ReactJS：Rest API JSON 响应：如何解析答案

【问题标题】：ReactJS : RestAPI JSON response : How to ParseReactJS：Rest API JSON 响应：如何解析
【发布时间】：2019-02-27 02:18:18
【问题描述】：

作为一个 ReactJS 新手，我尝试解析 RestfulAPI JSON 响应，但是，我无法检索所有元素。在尝试访问 text.subjects.code 和 text.subjects.description 时，它返回 null。但是，我可以成功访问 text.id 和 text.name。

JSON 响应如下。

[
  {
    "id":95822,
    "name":"Alex",
    "subjects":[
      {
        "code": "101",
        "description": "Course 101"
      }
    ]
  }
]

请多多指教。

【问题讨论】：

你注意到subjects 是一个数组，你应该通过索引来访问它的属性吗？
Access / process (nested) objects, arrays or JSON的可能重复
现在您知道主题是一个数组。当主题数组为空并且您尝试从中获取代码时，避免错误情况的最佳方法是使用 map() 或 lodash-get: let code=lodash.get(text.subjects,'[0][code ]',undefined) 然后检查值 if(typeof code != 'undefined') {dosomething.}

标签： javascript json reactjs rest

【解决方案1】：

如果您检查主题是一个数组并且您没有从中获得价值，请尝试 text.subjects[0].code

【讨论】：

【解决方案2】：

因为主题是一个数组，你应该像下面这样map主题：

text.subjects.map((subject) => {
    console.log(subject.code, subject.description);
})

或直接获取您想要的索引，如下所示：

text.subjects[0].code

【讨论】：

当您不更改数组时不要使用map。你应该改用forEach。

【解决方案3】：

您可以通过多种方式进行迭代，而我总是喜欢使用 .forEach 和 .map 的几种方式

如果您需要新数组，请使用 .map。因为map返回一个新数组

  const dataArray = text.subjects.map(subject => {
      let obj = {};
      obj.code = subject.code;
      obj.description = subject.description;
      return obj;
 });

//dataArray 将包含所有对象

还有一种不同的地图制作方式

   const dataArray = text.subjects.map(subject => (
       let obj = {};
      obj.code = subject.code;
      obj.description = subject.description;
      return obj;
  );

或者，如果您只想迭代数据，请使用 .forEach。 forEach 不返回数组

   let array = [];
   text.subjects.forEach(subject => (
      let obj = {};
      obj.code = subject.code;
      obj.description = subject.description;
      array.push(obj);
  ));

【讨论】：