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

Posted 2023-02-22

【中文标题】ReactJS：Rest API JSON 响应：如何解析

【英文标题】：ReactJS : RestAPI JSON response : How to Parse

【发布时间】：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.

【参考方案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);
  ));