JavaScript 访问本地 json

Question

所以我有一个包含模拟数据的 JSON 文件：

{
  "name": "Harvey Specter",
  "location": "New York, USA",
  "picture": "",
  "likes": 121,
  "following": 723,
  "followers": 4433,
  "comments": [
    {
      "id": 0,
      "author": {
        "picture": "",
        "name": "Mike Ross"
      },
      "date": "",
      "body": ""
    },
    {
      "id": 1,
      "author": {
        "picture": "",
        "name": "Rachel Zein"
      },
      "date": "",
      "body": ""
    },
    {
      "id": 2,
      "author": {
        "picture": "",
        "name": "Louis Litt"
      },
      "date": "",
      "body": ""
    }
  ]
}

如何通过 javascript 访问它并在我的 React SPA 中显示数据？此外，我希望能够更改数据，即如果我单击 'follow' 按钮，它会增加 JSON 中的关注者。

Answer 1

出于开发目的，您可以像这样将数据添加为常规变量：

var myData = JSON.parse( { "data" : "test test test" });

如果您想使用 API 进行模拟，您可以创建一个返回 Promise 的函数，如下所示：

function getData() { return Promise.resolve(myData) }

然后您几乎可以像（封装的）API 调用一样使用它，如下所示：

getData()
  .then(resolvedData => console.log('my data is', resolvedData)

Answer 2

How do I access it through javascript, and display the data in my React SPA?

您可以使用 fetch 方法制作 request 以便从您的文件中获取 data。

fetch("data.json")
    .then( (response) => {
      return response;
    }).then( (json) => {
      //do whatever
    });

或使用 XMLHttpRequest 的 native javascript 请求。

如果要从 local 文件中读取。 使用 require 语句。

var data = require('../../data.json');
for(var i = 0; i < data.length; i++) {
   //iterate data

当 React 组件初始化时，您可以使用 render 函数显示 data。

Also, I would like to be able to change the data i.e. if I click the 'follow' button it increments followers in JSON.

您可以使用 javascript 更改 array 对象。

obj["followers"]=parseInt(obj["followers"])+1

然后使用 fetch 方法将新对象保存到 server-side。

Answer 3

像这样创建对象：

    let objRef = {name: "Harvey Specter"
             ,location: "New York, USA"
              ,picture: ""
                ,likes: 121
            ,following: 723
            ,followers: 4433
             ,comments:[{id: 0
                    ,author: {picture: ""
                                ,name: "Mike Ross" }
                      ,date: ""
                      ,body: "" }
                       ,{id: 1
                    ,author: {picture: ""
                                ,name: "Rachel Zein" }
                      ,date: ""
                      ,body: "" }
                       ,{id: 2
                    ,author: {picture: ""
                                ,name: "Louis Litt" }
                      ,date: ""
                      ,body: "" }]};

一些例子如何参考：

    alert( objRef["name"] );

    alert( objRef["comments"][0]["author"]["name"] );

Answer 4

为此，您需要一个后端运行，它对数据进行所有转换。这样做有几个非常有说服力的理由。

首先，安全。我不希望网站只是从我的 PC 下载文件，更不希望他们在未经我明确同意的情况下将文件保存到我的驱动器。

其次，如果您的所有用户都有此文件的本地副本，他们现在如何看待对您的文件所做的任何更改？

所以您需要一个后端来维护这些数据，最好是在数据库中。因为这比任何基于文件的数据存储都快。现在你有了选择，但看到你正在做一个基于 javascript 的项目，我建议你使用 node.js，它在服务器上是 javascript 运行。对于数据库，如果你的数据不会变得更高级，你可以选择一个简单的 mongo, use mongoose for ease of access. Or if you need more relational mapping you could choose to work with postgres。您可以通过 REST API 获得所有转换，例如使用 loopback。或者您可以选择使用 websockets 实时进行并使用库 socket.io

但是让客户端应用程序执行文件转换是不可能的。

JavaScript 访问本地 json

JavaScript access local json

javascript

frontend

json

reactjs

create-react-app