无法从数组中获取信息

Question

```
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>
 `);
});
}
```

我一直在尝试从数组中获取信息，但没有成功获取信息。游戏平台的信息有些嵌套，我一直试图挖掘出来但无济于事。

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

我可以更详细地显示信息的最佳方法是建议将上面的 link 扔到邮递员中，您会看到我正在尝试使用的内容。基本上它在结果>平台>平台>名称下。当我将此信息添加到地图函数中时，它出现未定义。运行现在他们想出了用逗号表示对象。我希望它只提供省略逗号的信息。我不知道如何让 join() 进入 html()。非常感谢！

编辑： 1）我想要的结果是能够在平台树内拉起但被埋没了。如果我只使用 game.platforms 它会生成 [object, Object]。如果我尝试向 gamedata 中的行添加更多内容，它将产生未定义的结果。

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

3) 是的，我尝试根据我在网上找到的代码制作一个辅助函数。我在网上找到的代码使用了过多的 li 和 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(' ');
});
}
```

这有效但产生了非常奇怪的结果。

4) 不，我将其全部添加到同一个 ID 中。

5) 那是我试图从 API 上的平台挖掘信息。它被埋在那里，我还没有找到一个好的解决方案。

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();

所以我很感谢这里每个人的帮助。现在我返回 "Metacritic: No metacritic rating" 或者如果我删除它或部分未定义。我错过了什么？

Answer 1

下面的代码片段为您提供了平台名称。我modified/created

displayResults() 函数仅 return 一个值（并且还更正了 metacritic 中的拼写错误（metacritc -> metacritic） )
inputData() 函数创建正确的 HTML 并将其附加到容器
一个fetchData()函数来实际获取数据
启动获取和显示数据的未命名函数

您应该查看您的数据 - 您没有使用 game.genres（尽管您映射了它）并且您想显示未映射的 input.system。

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>

虽然它确实有效 - 你不应该在一个网站上使用多个 h1 标签 - 这将是一个 HTML 验证警告（SEO！）。如果您每页只显示一个游戏，那么请忘记我的话:)

无法从数组中获取信息

Unable to get information from Array

javascript

jquery

api-design

postman