Question

我尝试使用以下JSON输出从API检索数据，并且我有一个函数处于响应状态。

我可以在console.log（用户）中看到api输出，以便将数据传递给函数。

我正在尝试输出＆＃34; data＆＃34;中包含的数组。但似乎无法访问数据。

{
  "dataCount": 2,
  "data": [
    {
      "name": "Test review header",
      "text": "This is  adescription for a test review",
      "img": "http://pngimg.com/upload/pigeon_PNG3423.png"
    },
    {
      "name": "Test review header2",
      "text": "This is  adescription for a test review2",
      "img": "http://pngimg.com/upload/pigeon_PNG3422.png"
    }
  ]
}

renderUsers() {

    const { users } = this.props;

    console.log(users);

    Object.keys(users).map(name => users[name])
        console.log(users[name]);
    };

Answer 1

您需要迭代的数据出现在用户的data字段中。

当您使用lists时，您必须指定key属性，以便对列表中的每个项目做出反应。

renderUsers() {
  const { users } = this.props;
  return (
    <ul>
     { 
        users.data.map(name => {
            <li key={name}>users[name]</li>
        }) 
     }
    </ul>
  )
}

Answer 2

首先，我不使用react，但你想要的在其他javascript框架中应该是相同的。

您确定收到的是JSON吗？

我们需要确保您收到JSON对象而不是普通文本。假设你有一个函数parseResponse(data)。我们可以调用JSON.parse(data)来将数据参数解析为json对象。您也可以将结果存储在变量中。

使用JSON对象

当我们确定您将param解析为JSON对象时，我们会得到它的数据。例如，如果要获取数据中第一个对象的名称，可以调用： parsedJson.data[0].name 其中parsedJson是JSON.parse(data)的结果， data是JSON中的对象数组， 0是数组中的第一个对象

有可能你有这种功能：

function parseResponse(data) {
  var parsedJson = JSON.parse(data);
  for(var i = 0; i < parsedJson.data.length; i++) {
      console.log(parsedJson.data[i].name);
  }
}

请参阅jsfiddle

从React中的API对象中提取数据

2 个答案: