WebDev

First off, thank you to @tst123@lemmy.world for the initial help regarding the API in my original post

I’ve managed to use the Sheets API to pull in JSON of my spreadsheet. I am now struggling to pair the data to use in cards on my front end.

Here is my code

const API_KEY = "APIKEY";
const CLIENT_ID = "ID";
const HEADERS_ID = "tab1!A2:CE2";
const VALUES_ID = "tab1!A3:CE";
const URL = `https://sheets.googleapis.com/v4/spreadsheets/${CLIENT_ID}/values:batchGet?ranges=${HEADERS_ID}&ranges=${VALUES_ID}&key=${API_KEY}`;

async function getData() {
  const RESPONSE = await fetch(URL);

  const DATA = await RESPONSE.json();

  const COCKTAILHEADERS = DATA.valueRanges[0];
  const COCKTAILHEADERSOBJ = Object.assign({}, COCKTAILHEADERS.values[0]);
  const COCKTAILVALUES = DATA.valueRanges[1];
  const COCKTAILVALUESOBJ = Object.assign({}, COCKTAILVALUES.values);

  // console.log(DATA);
  // console.log(COCKTAILHEADERS.values[0]);
  console.log(COCKTAILHEADERSOBJ);
  // console.log(COCKTAILVALUES.values);
  console.log(COCKTAILVALUESOBJ);
}

getData(); 

My spreadsheet is set up like this…

• ROW 1 = Headers for cocktail name in column A and ingredients in B through CE
• All other ROWs = Column A is the cocktail name and B through CE is the measurement

When I log COCKTAILHEADERSOBJ I get an object with each ingredient name in an array and when I log COCKTAILVALUESOBJ I get an object with nested arrays, each array has the name and the measurement. If the drink does not contain the ingredient, I have an empty string.

Example of COCKTAILHEADERSOBJ
[0] = Cocktail Name
[1] = Lime
[2] = Tequila

Example of COCKTAILVALUESOBJ
[0]
   [0] = Margarita
   [1] = 1oz
   [2] =  2oz
[1]
   [0] = Old Fashioned
   [1] = 0oz
   [2] = 0oz

My goal is to have an object for each cocktail that looks like this

  "drinks": [
    {
      "cocktail name": "Margarita",
      "lime": 1,
      "tequila": 2
    }
]

If the value is zero, I don’t want the ingredient added to the new object for that drink.

Any suggestions on how I can loop through each item in COCKTAILVALUESOBJ and assign the correct COCKTAILHEADERSOBJ label to it so I can make a new object with each drinks recipe and then pull that new object into the DOM?

Feels like I should be able to use Array Map to get them into a single object, but I’m a little lost on how to do it with 2 objects.

Still incredibly new to JS and struggling with tutorials, hoping this project helps me learn and I appreciate any advice to help me search out the answer.