从 JSON 文件获取 JavaScript 对象

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

本指南将演示如何从 JSON 文件获取 JavaScript 对象或使用“fetch()”HTTP 请求访问它。

介绍

JSON 是一种文件格式，广泛用于任何框架和数据服务器的静态存储和应用配置管理。任何 JSON 文件都包含由逗号运算符分隔的键值对。JavaScript 对象是 React 应用不可或缺的一部分，因此需要从 JSON 文件/数据访问它们才能在组件中使用。

本指南将演示如何从 JSON 文件获取 JavaScript 对象或使用fetch() HTTP 请求访问它。

从 JSON 文件渲染值

任何 JSON 数据都可以通过使用 API 调用获取数据来从不同来源（如本地 JSON 文件）使用。从服务器获取响应后，您需要呈现其值。

您可以使用本地 JSON 文件进行应用程序配置，例如基于服务器环境（如 dev、QA 或 prod）的 API URL 管理。

创建一个如下所示的示例 JSON 文件，并将其保存为data.json

      {
  "data": {
    "test1": {
      "name": "test123",
      "surname": "surname123"
    },
    "test2": {
      "name": "test456",
      "surname": "surname456"
    },
    "test3": {
      "name": "test789",
      "surname": "surname789"
    }
  }
}
    

现在，如果您想呈现 JSON 中的任何键值对，.map()函数将有助于迭代对象；示例如下。

      import React, { Component } from "react";
// Import local JSON file
import Data from "./data";

export class Example1 extends Component {
  render() {
    return (
      <>
        <div>
          <h3>Using local JSON file</h3>
          {Object.keys(Data.data).map((item, i) => (
            <li key={i}>
              <span>Key name : {item}</span>
            </li>
          ))}
        </div>
      </>
    );
  }
}

export default Example1;
    

在上面的例子中，要使用本地JSON文件需要使用import语句来使用。

      import Data from "./data";
    

之后，您可以使用Object.keys()和.map()函数在组件中使用数据访问所有 JSON 数据。

      {Object.keys(Data.data).map((item, i) => ())}
    

当您想要渲染一些静态数据、维护服务器配置等时，在 React 应用程序中使用本地 JSON 文件是一种常见方法。

通过 API 调用渲染 JSON 对象

您已经看到了使用本地 JSON 文件的示例，但同时您可能需要从服务器访问 JSON 数据。

现在大多数后端服务都兼容 JSON，并以 JSON 格式返回响应数据。因此，您需要从服务器管理 JSON 数据（例如对象和数组）。

按照如下所示实现 API 调用。

      componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(
        result => {
          this.setState({
            data: result
          });
        },
        error => {
          console.log(error);
        }
      );
}
    

要进行 API 调用，您可以使用fetch()或另一个名为Axios的第三方包。在上面的示例中，使用fetch()后跟 API 的 URL。

需要注意的一点是，当响应来自服务器时，其格式将变为 JSON。

      .then(res => res.json())
    

现在，API 的响应将是 JSON 并存储到称为数据的组件状态中。

实现 API 调用后，您可以访问渲染的 JSON 数据，如下所示。

      render() {
    return (
      <>
        <div>
          <h3>Using API call</h3>
          {this.state.data &&
            this.state.data.length > 0 &&
            this.state.data.map((item, i) => (
              <li key={i}>
                <span>Email : {item.email}</span>
              </li>
            ))}
        </div>
      </>
    );
}
    

除了状态this.state.data之外，还使用了.map()函数，它从状态中迭代数组项并将它们呈现到 DOM 中。

结论

JSON 是客户端和服务器之间数据转换的一种被广泛接受的格式，并且大多数后端 API 都以 JSON 形式发送响应。

您的应用应该能够很好地管理 JSON 文件中的 JavaScript 对象。本指南将有助于您了解如何使用 JSON 文件中的 JavaScript 对象或如何从服务器获取 JSON。

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

_查看原文

技术指南

阅读全文

从 JSON 文件获取 JavaScript 对象

杭州电子商务研究院

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

{ "data": { "test1": { "name": "test123", "surname": "surname123" }, "test2": { "name": "test456", "surname": "surname456" }, "test3": { "name": "test789", "surname": "surname789" } } }

import React, { Component } from "react"; // Import local JSON file import Data from "./data"; export class Example1 extends Component { render() { return ( <> <div> <h3>Using local JSON file</h3> {Object.keys(Data.data).map((item, i) => ( <li key={i}> <span>Key name : {item}</span> </li> ))} </div> </> ); } } export default Example1;

componentDidMount() { fetch("https://jsonplaceholder.typicode.com/users") .then(res => res.json()) .then( result => { this.setState({ data: result }); }, error => { console.log(error); } ); }

render() { return ( <> <div> <h3>Using API call</h3> {this.state.data && this.state.data.length > 0 && this.state.data.map((item, i) => ( <li key={i}> <span>Email : {item.email}</span> </li> ))} </div> </> ); }