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中显示数据？此外，我希望能够更改数据，即如果我点击“关注”按钮，它会增加JSON中的关注者。

Answer 1

要做到这一点，你需要一个后端运行，它会对数据进行所有转换。有一些非常令人信服的理由这样做。

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

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

因此，您需要一个维护此数据的后端，最好是在数据库中。因为它比任何基于文件的数据存储都快。现在你有了选择，但是看到你正在做一个基于javascript的项目，我建议你使用node.js，这是在服务器上运行的javascript。对于数据库，如果您的数据无法获得更高级的数据，则可以使用简单的mongo，使用mongoose以便于访问。或者，如果您需要更多关系映射，则可以选择使用postgres。您可以通过REST API获取所有转换，例如使用loopback。或者您可以选择使用websockets实时完成并使用库socket.io

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

Answer 2

出于开发目的，您可以将数据添加为常规变量，如下所示：

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 3

如何通过javascript访问它，并显示我的数据 React SPA？

您可以使用request方法制作fetch，以便从您的文件中获取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

初始化data组件时，您可以使用render功能显示React。

此外，我希望能够更改数据，即如果我点击 “关注”按钮会增加JSON中的关注者。

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

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

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

Answer 4

像这样创建对象：

    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"] );

JavaScript访问本地json

4 个答案: