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.