blocks|key|4412016|text|var+data+=+require('../../file.json');+//+forward+slashes+will+depend+on+the+file+location|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4412017|​|unstyled|4412018|var+data+=+[
++++{
++++++"id":+1,
++++++"gender":+"Female",
++++++"first_name":+"Helen",
++++++"last_name":+"Nguyen",
++++++"email":+"hnguyen0@bloomberg.com",
++++++"ip_address":+"227.211.25.18"
++++},+{
++++++"id":+2,
++++++"gender":+"Male",
++++++"first_name":+"Carlos",
++++++"last_name":+"Fowler",
++++++"email":+"cfowler1@gnu.org",
++++++"ip_address":+"214.248.201.11"
++++}
];

for+(var+i+=+0;+i+<+data.length;+i%2B%2B)
{
++++var+obj+=+data[i];
++++console.log(`Name:+${obj.last_name},+${obj.first_name}`);
}|4412019|4412020|https://jsfiddle.net/c9wupvo6/|offset|length|4412021|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|U|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$B|C]]|$1|I|3|E|5|F|7|X|8|@]|9|@]|A|$]]|$1|J|3|K|5|F|7|Y|8|@]|9|@$L|Z|M|10|1|11]]|A|$]]|$1|N|3|-4|5|F|7|12|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|K]]]]

<pre><code>var data = require('../../file.json'); // forward slashes will depend on the file location
</code></pre>
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var data = [
 {
 "id": 1,
 "gender": "Female",
 "first_name": "Helen",
 "last_name": "Nguyen",
 "email": "hnguyen0@bloomberg.com",
 "ip_address": "227.211.25.18"
 }, {
 "id": 2,
 "gender": "Male",
 "first_name": "Carlos",
 "last_name": "Fowler",
 "email": "cfowler1@gnu.org",
 "ip_address": "214.248.201.11"
 }
];

for (var i = 0; i &lt; data.length; i++)
{
 var obj = data[i];
 console.log(`Name: ${obj.last_name}, ${obj.first_name}`);
}</code></pre>
</div>
</div>

<a href="https://jsfiddle.net/c9wupvo6/" rel="nofollow noreferrer">https://jsfiddle.net/c9wupvo6/</a>

blocks|key|4411950|text|对于那些在这方面也有问题的人，这段代码似乎已经解决了这个问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4411951|var+jsonData+=+require('../../file.json');

class+blah+extends+React.Component+{

render(){
++++var+data;+

++++function+loadJSON(jsonfile,+callback)+{+++

++++++++var+jsonObj+=+new+XMLHttpRequest();
++++++++jsonObj.overrideMimeType("application/json");
++++++++jsonObj.open('GET',+"../../file.json",+true);
++++++++jsonObj.onreadystatechange+=+function+()+{
++++++++++++++if+(jsonObj.readyState+==+4+&&+jsonObj.status+==+"200")+{
++++++++++++++++callback(jsonObj.responseText);
++++++++++++++}
++++++++};
++++++++jsonObj.send(null);++
+++++}

++++function+load()+{

++++++++loadJSON(jsonData,+function(response)+{
++++++++++++data+=+JSON.parse(response);
++++++++++++console.log(data);
++++++++});
++++}

++++load();
}

}|code-block|syntax|javascript|4411952|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For those of you who also have trouble with this, this code seemed to have fixed the problem

<pre><code>var jsonData = require('../../file.json');

class blah extends React.Component {

render(){
 var data; 

 function loadJSON(jsonfile, callback) { 

 var jsonObj = new XMLHttpRequest();
 jsonObj.overrideMimeType("application/json");
 jsonObj.open('GET', "../../file.json", true);
 jsonObj.onreadystatechange = function () {
 if (jsonObj.readyState == 4 &amp;&amp; jsonObj.status == "200") {
 callback(jsonObj.responseText);
 }
 };
 jsonObj.send(null); 
 }

 function load() {

 loadJSON(jsonData, function(response) {
 data = JSON.parse(response);
 console.log(data);
 });
 }

 load();
}

}
</code></pre>

blocks|key|4412058|text|我在取回一个空对象时也遇到了问题。即使使用上面建议的require也是如此。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4412059|然而，fetch解决了我的问题：|4412060|fetch('./data/fakeData.json')
++.then((res)+=>+res.json())
++.then((data)+=>+{
++++console.log('data:',+data);
++})|code-block|syntax|javascript|4412061|(到目前为止，支持并不是最优的：http://caniuse.com/#feat=fetch)|4412062|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/#feat=fetch^0|Q|7|0|3|5|0|0|G|U|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

I also had problems with getting an empty Object back. Even when using <code>require</code> as suggested above.

<code>fetch</code> however solved my problem:

<pre><code>fetch('./data/fakeData.json')
 .then((res) =&gt; res.json())
 .then((data) =&gt; {
 console.log('data:', data);
 })
</code></pre>

(As of today, the support isn't optimal though: <a href="http://caniuse.com/#feat=fetch" rel="noreferrer">http://caniuse.com/#feat=fetch</a>)

blocks|key|4412082|text|JS扩展操作符还有助于获取对象的深层副本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4412083|import+jsonData+from+'../../file.json';

const+loadData+=+[...jsonData];|code-block|syntax|javascript|4412084|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The JS spread operator also helps to get a deep copy of the object.

<pre><code>import jsonData from '../../file.json';

const loadData = [...jsonData];
</code></pre>

How can I parse through a JSON file retrieving all its data and using it in my code?

I've tried importing the file and just tried console logging it, but all it does is print Object {}:

<pre><code>import jsonData from "./file.json";
console.log(jsonData);
</code></pre>

This is what my file.json looks like:

<pre><code>[
 {
 "id": 1,
 "gender": "Female",
 "first_name": "Helen",
 "last_name": "Nguyen",
 "email": "hnguyen0@bloomberg.com",
 "ip_address": "227.211.25.18"
 }, {
 "id": 2,
 "gender": "Male",
 "first_name": "Carlos",
 "last_name": "Fowler",
 "email": "cfowler1@gnu.org",
 "ip_address": "214.248.201.11"
 }
]
</code></pre>

I'd want to be able to access the first and last name of each component and print those on the website.

How can I parse through local JSON file in React js?

JSON

如何解析JSON文件，检索其所有数据并在代码中使用？我已经尝试导入该文件，并尝试在控制台记录它，但它所做的全部工作是打印对象{}：import jsonData from "./file.json";console.log(jsonData);这是我的file.json的样子：[    {      "id": 1, ...

问如何在React js中解析本地JSON文件？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在React js中解析本地JSON文件？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在React js中解析本地JSON文件？
EN