的JavaScript访问本地JSON

所以我有一个模拟数据的JSON文件：的JavaScript访问本地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，并在我的阵营SPA显示的数据？此外，我希望能够更改数据，即如果我点击'关注'按钮，它会以JSON增加关注者。

来源

2017-09-04 Adam Marczyk

由于安全原因，无法在没有用户交互的情况下从磁盘加载本地文件。 – Danmoreng

那我该怎么办？ –

@AdamMarczyk，你在服务器端使用什么技术？ –

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 
    });

或native的javascript使用XMLHttpRequest请求。

如果你想从local文件读取。使用require声明。

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

可以显示data使用render功能时React部件被初始化。

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。

来源

2017-09-04 10:13:32

我得到一个错误“未捕获（承诺）SyntaxError：意外的令牌<在JSON在位置0” –

@AdamMarczyk，在哪里？ –

而不是/ /做任何评论我只是把console.log（json） –

为发展目的，你可以只添加数据作为常规变量，像这样：

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

如果你想使用一个API来similate那么你可以让一个函数返回一个承诺，像这样：

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

然后你可以使用它几乎就像一个（封装）API调用，就像这样：

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

来源

2017-09-04 10:12:25 jonahe

创建对象，像这样：

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

来源

2017-09-04 10:13:59 SPlatten

要做到这一点，你需要一个后台运行的，这确实对数据的所有tranfsforms。有几个非常令人信服的理由这样做。

首先，安全。我不希望网站只是简单地从我的电脑上下载文件，甚至没有我的明确同意将文件保存到我的驱动器。其次，如果你所有的用户都有这个文件的本地副本，他们现在将如何对你的文件做任何修改？

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

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

来源

2017-09-04 10:22:56 Pjetr

的JavaScript访问本地JSON

回答

相关问题