使用 JavaScript 中的根节点迭代 JSON

2020-09-29 08:00:00 · 飞浪

在本指南中，您将学习如何识别和理解具有根节点的 JSON 响应，并最终使用 React 中的 JavaScript 对它们进行迭代。

介绍

在应用程序中集成后端 API 时，前端开发人员的很大一部分工作包括处理 JSON 响应。JSON 响应通常很复杂，难以一下子理解。但是，它们的复杂结构在解密返回到前端的数据方面是合理的。因此，您可能会收到一个 JSON 响应，其中的根节点指示相应对象的含义。

在本指南中，您将学习如何识别和理解具有根节点的 JSON 响应，并最终使用 React 中的 JavaScript 对它们进行迭代。

带根节点的 JSON

考虑以下 JSON 文件。您可以在 dummy-json API文档中找到它。

下面的 JSON 文件包含四个节点或属性：users、images、coordinates和price。所有节点在节点树中都处于同一级别，您可以通过访问这些属性来验证这一点。例如，如果您将此响应存储在名为resp 的对象中，则可以访问users和image属性，如resp.users和resp.images。因此，给定的 JSON 不包含根节点。

      {
  "users": [
    {
      "id": 0,
      "name": "Adam Carter",
      "work": "Unilogic",
      "email": "adam.carter@unilogic.com",
      "dob": "1978",
      "address": "83 Warner Street",
      "city": "Boston",
      "optedin": true
    },
    {
      "id": 1,
      "name": "Leanne Brier",
      "work": "Connic",
      "email": "leanne.brier@connic.org",
      "dob": "1987",
      "address": "9 Coleman Avenue",
      "city": "Toronto",
      "optedin": false
    }
  ],
  "images": [
    "img0.png",
    "img1.png",
    "img2.png"
  ],
  "coordinates": {
    "x": 35.12,
    "y": -21.49
  },
  "price": "$59,395"
}
    

让我们修改上面的 JSON 响应，使其包含根节点。这意味着要访问这些属性，您必须比之前的访问方式低一级。

      "data":{
    "users": [
        {
          "id": 0,
          "name": "Adam Carter",
          "work": "Unilogic",
          "email": "adam.carter@unilogic.com",
          "dob": "1978",
          "address": "83 Warner Street",
          "city": "Boston",
          "optedin": true
        },
        {
          "id": 1,
          "name": "Leanne Brier",
          "work": "Connic",
          "email": "leanne.brier@connic.org",
          "dob": "1987",
          "address": "9 Coleman Avenue",
          "city": "Toronto",
          "optedin": false
        }
      ],
      "images": [
        "img0.png",
        "img1.png",
        "img2.png"
      ],
      "coordinates": {
        "x": 35.12,
        "y": -21.49
      },
      "price": "$59,395"
 }
    

现在，您的 JSON 响应有一个名为data 的根节点，并且您的属性将以resp.data.users、 resp.data.images等形式访问。以这种方式构造 JSON 响应的需要是了解整个对象对应的内容。在现实生活中，您可以想象此响应对应于在电子商务网站上销售其产品的卖家。根节点可以是sellers_product_1355，从而了解数据的含义。现在您已经了解了带有根节点的 JSON，让我们看看如何在 React 中使用 JavaScript 对其进行迭代。

使用根节点迭代 JSON

在你的 React 应用程序中，创建一个data.js文件并将上述响应导出为对象。

      export default {
"data":{
    ...
  }
}
    

现在，您可以像从后端 API 获取该对象一样将该对象作为常规 JavaScript 对象导入。任何 JSON 属性都将通过首先访问根节点来访问。查看以下控制台日志以了解如何访问这些属性

      import React from 'react';
import response from './data';

function App() {
  console.log('users: ',response.data.users);
  console.log('images: ',response.data.images);
  console.log('images: ',response.data.coordinates);
  console.log('price: ',response.data.price);
  return (
    <div className="App">
 
    </div>
  );
}

export default App;
    

请注意，图片和用户都是数组，因此您可以使用JSX 中的map()方法对它们进行迭代，如下所示。您也可以使用常规 for 循环。

      import React from 'react';
import logo from './logo.svg';
import './App.css';
import response from './data';

function App() {
  console.log('users: ',response.data.users);
  console.log('images: ',response.data.images);
  console.log('images: ',response.data.coordinates);
  console.log('images: ',response.data.price);
  return (
    <div className="App">
    {
      response.data.users.map(user=><><h1 key={user.id}>{user.name}</h1></>)
    }    
    {
      response.data.images.map(img=><><h1>{img}</h1></>)
    }    
    </div>
  );
}

export default App;
    

对于其余属性，根据其数据类型分别渲染，如下所示

      ...
   <p>{response.data.coordinates.x } {response.data.coordinates.y }</p>     
   <p><strong>{response.data.price}</strong></p>
...
    

结论

JSON 中的根节点可让您更好地理解响应对象。如果 JSON 响应包含相似的数据类型，您可以将它们合并为一个并一起迭代所有响应，但这在很大程度上取决于数据库的设置方式。通用方法是通过根节点单独访问它们，并仅迭代那些可以迭代的属性（例如数组和字符串），如本指南中所示。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用 JavaScript 中的根节点迭代 JSON

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

{ "users": [ { "id": 0, "name": "Adam Carter", "work": "Unilogic", "email": "adam.carter@unilogic.com", "dob": "1978", "address": "83 Warner Street", "city": "Boston", "optedin": true }, { "id": 1, "name": "Leanne Brier", "work": "Connic", "email": "leanne.brier@connic.org", "dob": "1987", "address": "9 Coleman Avenue", "city": "Toronto", "optedin": false } ], "images": [ "img0.png", "img1.png", "img2.png" ], "coordinates": { "x": 35.12, "y": -21.49 }, "price": "$59,395" }

"data":{ "users": [ { "id": 0, "name": "Adam Carter", "work": "Unilogic", "email": "adam.carter@unilogic.com", "dob": "1978", "address": "83 Warner Street", "city": "Boston", "optedin": true }, { "id": 1, "name": "Leanne Brier", "work": "Connic", "email": "leanne.brier@connic.org", "dob": "1987", "address": "9 Coleman Avenue", "city": "Toronto", "optedin": false } ], "images": [ "img0.png", "img1.png", "img2.png" ], "coordinates": { "x": 35.12, "y": -21.49 }, "price": "$59,395" }

import React from 'react'; import response from './data'; function App() { console.log('users: ',response.data.users); console.log('images: ',response.data.images); console.log('images: ',response.data.coordinates); console.log('price: ',response.data.price); return ( <div className="App"> </div> ); } export default App;

import React from 'react'; import logo from './logo.svg'; import './App.css'; import response from './data'; function App() { console.log('users: ',response.data.users); console.log('images: ',response.data.images); console.log('images: ',response.data.coordinates); console.log('images: ',response.data.price); return ( <div className="App"> { response.data.users.map(user=><><h1 key={user.id}>{user.name}</h1></>) } { response.data.images.map(img=><><h1>{img}</h1></>) } </div> ); } export default App;