I am having a hard time accessing object properties from a JSON server response object. [HELP] please?
I am sending a request to a server and retrieving JSON data. However, I am having a hard time accessing the properties of the card objects. to me, the response looks like an object that has a property name of 'cards', which holds an array of cards (each card is an object). Here is an example of the JSON returned (you will need JSONview or something similar to view this data as JSON format: http://ift.tt/2t5hCO9
for example, I want to access the url of thwe card image. I would have though I could access it like cards[0].imageUrl, or even cards[0].name for the name of the first card, but I keep getting an error saying cards is undefined. Here is an example of my code for reference const mobileSelect = document.querySelector('.mobile-select');
mobileSelect.addEventListener('click', (e) => { // sets .selected class on nav items if (e.target.tagName === 'LI') { let selected = e.target; let selects = mobileSelect.querySelectorAll('LI'); // references all list items for (let i = 0; i < selects.length; i += 1) { let curSelect = selects[i]; curSelect.classList.remove('selected'); } selected.classList.add('selected'); // API stuff const color = selected.textContent; let magicAPI = "http://ift.tt/2uoEj3R;; const magicRed = "?colors=red"; const magicBlack = "?colors=black"; const magicWhite = "?colors=white"; // check button color and filter server response for matching color set if (color === 'red') { magicAPI += magicRed; } else if (color === 'black') { magicAPI += magicBlack; } else if (color === 'white') { magicAPI += magicWhite; } function displayCards(data) { const output = document.querySelector('.output'); const cards = data; output.innerHTML = cards; // <---Here is where I need to access the card properties console.log(cards); } console.log(magicAPI); $.getJSON(magicAPI, displayCards); } }); Can anyone help please?
Submitted July 17, 2017 at 01:51AM by mayaswelltrythis
via reddit http://ift.tt/2t58aKI
