javascript - ES6 - 遍历 JSON

Question

问题陈述

我从一个 API 访问 JSON——我们称这个 API #1。下面列出了示例数据。基本上包含论坛信息主要是帖子

[{
    "userId": 1,
    "id": 10,
    "title": "Tt1",
    "body": "qBb2"
  },
  {
    "userId": 2,
    "id": 11,
    "title": "TT4",
    "body": "BBB5"
  }]

我也从另一个 API 访问 JSON——我们称这个 API #2。此数据包含个人信息。

[
  {
    "id": 1,
    "name": "Lera",
    "username": "Lera2",
    "email": "Em@.com",
    "address": {
      "street": "GGa",
      "suite": "Ap3. 333",
      "city": "Gwee",
      "zipcode": "2222-3333",
      "geo": {
        "lat": "-11213",
        "lng": "312424"
      }]

我想获取所有唯一的名称并将每个名称放在一个 div 中，其中包含来自 API #2 的“用户”类。

然后，我希望 API #1 中的每个帖子都显示在 API #2 中每个用户的下方，使用匹配的“id”字段。

到目前为止我得到了什么

fetch('API-#2')
.then(function(response) {
    return response.json();
    })
.then(function(myJson) {
    document.getElementById("testDiv").innerHTML = JSON.stringify(myJson);
});

上面的输出本质上是 API #2 中显示的原始数据。尚未处理。

我不确定该怎么做

1. 需要使用 map、reduce 或其他可能的方法来遍历 API #2 中的每个名称并创建一个 div
2. 需要使用循环遍历 API #1 中的每个帖子，然后如果它与“id”字段匹配，我们将其粘贴到特定用户的 div 下

更新

fetch('API-#2')
.then(function(response) {
    return response.json();
    })
.then(function(myJson) {
    myJson.filter(function (item, index, self) { return self.indexOf(item) === index; }).forEach(function (user) { 
      document.getElementById("testDiv2").innerHTML += "<div>" + user.name + "</div>"; 
    });
});

返回并输出名称列表:

Name 1
Name 2
Name 3

我现在只需要使用 ID 将帖子与姓名交叉匹配

Answer 1

为了让你开始，你可以做这样的事情:

fetch('API-#2')
.then(function(response) {
    return response.json();
    })
.then(function(myJson) {
    myJson.filter(function (item, index, self) { return self.indexOf(item) === index; }).forEach(function (user) { 
      document.getElementById("testDiv").innerHTML += "<div>" + user.name + "</div>"; 
    });
});

像对待任何其他 JavaScript 对象一样对待 myJson。您可以过滤唯一值并在数据数组上调用 foreach。

您可以使用 jquery 或其他库来构建比连接字符串更简洁的 HTML，这仅用于说明目的。