CODEWITHSUNDEEP
javascriptjquerypostmanapi-design
jorzwar
jorzwar

Reputation: 11

Unable to get information from Array

```
function displayResults(responseJson) {
const gamedata = responseJson.results.map(game => {
	return {
		name: game.name,
		consoles: game.platforms,
		metacritc: game.metacritic,
		genre: game.genres
	};
});
console.log(gamedata);
inputData(gamedata);
}

function platformdata(consoles) {
return consoles.map(system => {
	return system.platform.name;
});
}

function inputData(gamedata) {
gamedata.map(input => {
	$(`#home-list`).html(`
	<h1>${input.name}</h1>
	<h5>${input.metacritc}</h5>
	<span>${input.system}</span>
	`);
});
}
```

I have been trying to get information from an array but have not been successful in obtaining the information. The information for the game platforms is somewhat nested and I have been trying to dig it out but to no avail.

https://api.rawg.io/api/games?page_size=1

Best way I can show the information more in detail is to just advise to throw the link above into postman and you'll see what I am trying to work with. Basically it is under results > platforms > platform > name. When I add this information into the map function it comes up undefined. Running it now they come up with saying object with commas. I'd like it to just come up with just the information leaving out the commas. I can't figure out how to get join() to go into html(). Thank you very much!

Edit: 1) Results I'd like is to be able to pull up is within the platforms tree but is buried. If I just use game.platforms it produces [object, Object]. If I try to add more to the line in gamedata it will produce undefined.

2) In "gamedata.map(input => {" ?

3) Yes I tried making a helper function based on code I found online. The code I found online used excessive li and ul

```
function platformnames(platforms) {
return platforms.map(system => {
	return '<li>'  system.platform.name + '</li>';
});
}

function pullArray(gamedata) {
gamedata.map(function(input) {
	let platformNames = input.platforms.map(
		system => `<li>${system.platform.name}</li>`
	);
	$(`#home-container`)
		.append(`<li><ul><li>${platformNames}</li></ul></li>`)
		.join(' ');
});
}
```

This worked but gave really odd results.

4) No I'm adding it all to the same ID as one pull.

5) That is me trying to mine the information from platforms on an API. It's buried in there and I haven't found a good solution. 

function formatParams(params) {
    const queryItems = Object.keys(params).map(
        key => `${key}=${params[key]}`
    );
    console.log(queryItems);
    return queryItems.join('&');
}

const opts = {
    headers: {
        'User-Agent': `<ClassProject> / <VER 0.01> <Currently in Alpha testing>`
    }
};

function fetchAPI() {
    const params = {
        ...($('.search-param').val() && {
            search: $('.search-param').val()
        }),
        ...($('.genre-param').val() && {
            genres: $('.genre-param').val()
        }),
        ...($('.platforms-param').val() && {
            platforms: $('.platforms-param').val()
        }),
        ...($('.publishers-param').val() && {
            publishers: $('.publishers-param').val()
        }),
        page_size: '1'
    };

    console.log(params);

    const baseURL = 'https://api.rawg.io/api/games';
    const queryString = formatParams(params);
    let url = `${baseURL}?${queryString}`;

    console.log(url);

    fetch(`${url}`, opts)
        .then(response => response.json())
        .then(responseJson => displayResults(responseJson))
        .catch(error => {
            console.log(`Something went wrong: ${error.message}`);
        });
}

function displayResults(responseJson) {
    const gamedata = responseJson.results.map(game => {
        return {
            name: game.name,
            consoles: game.platforms,
            metacritc: game.metacritic,
            genre: game.genres
        };
    });
    console.log(gamedata);
    inputData(gamedata);
}

function inputData(gamedata) {
    let html = '';
    gamedata.forEach(input => {
        html += `<h1>${input.name}</h1>`;
        html += `<h5>Metacritic: ${input.metacritic ||
            'No metacritic rating'}</h5>`;
        html += 'Platforms:<br />';
        input.consoles.forEach(e => {
            html += `<span>${e.platform.name}</span><br />`;
        });
        html += `<br /><span>System: ${input.system}</span>`;
    });
    document.getElementById('home-list').innerHTML = html;
}

function pageLoad() {
    $(document).ready(function() {
        fetchAPI();
    });
}

pageLoad();

So I'm close thanks to the help of everyone here. Now I'm returning "Metacritic: No metacritic rating" or if I remove that or part an undefined. What am I missing?

Upvotes: 0

Views: 192

Answers (1)

muka.gergely
muka.gergely

Reputation: 8329

The snippet below gets you the platform names. I modified/created

  • the displayResults() function to only return a value (and also corrected the typo in metacritic (metacritc -> metacritic))

  • the inputData() function to create a correct HTML and append it to the container

  • a fetchData() function to actually fetch the data

  • an unnamed function to initiate fetch and display the data

You should look at your data - you don't use game.genres (although you map it) and you would like to display input.system that is not mapped.

function displayResults(responseJson) {
  return responseJson.results.map(game => {
    return {
      name: game.name,
      consoles: game.platforms,
      metacritic: game.metacritic,
      genre: game.genres
    };
  });
}

function platformdata(consoles) {
  return consoles.map(system => {
    return system.platform.name;
  });
}

function inputData(gamedata) {
  let html = ''
  gamedata.forEach(input => {
    html += `<h1>${input.name}</h1>`
    html += `<h5>Metacritic: ${input.metacritic || 'No metacritic rating'}</h5>`
    html += 'Platforms:<br />'
    input.consoles.forEach(e => {
      html += `<span>${e.platform.name}</span><br />`
    })
    html += `<br /><span>System: ${input.system}</span>`
  });
  document.getElementById('home-list').innerHTML = html

}

async function fetchData() {
  const data = await fetch('https://api.rawg.io/api/games?page_size=5')
  const json = await data.json()
  return json
}

(async function() {
  const json = await fetchData()
  inputData(displayResults(json))
})();
<div id="home-list"></div>

And although it does work - you're not supposed to use more than one h1 tag on a site - it will be an HTML validation warning (SEO!). If you will display only one game per page, then forget my remark :)

Upvotes: 1

Related Questions