JavaScript访问本地json

所以我有一个包含模拟数据的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访问它,并在我的Reaction SPA中显示数据? 此外,我还希望能够更改数据,即如果我单击‘Follow’按钮,它会增加JSON中的追随者。


解决方案

如何通过javascript访问它,并将数据显示在我的 反应SPA?

您可以使用fetch方法创建request,以便从您的文件中获取data

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

或使用XMLHttpRequest的nativejavascript请求。

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

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

初始化React组件时,可以使用render函数显示data

此外,我还希望能够更改数据,即如果我单击 ‘Follow’按钮它增加JSON中的追随者。

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

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

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

相关文章