Question

165

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

rated 0 times [ 172] [ 7] / answers: 1 / hits: 143787 / 8 Years ago, mon, june 6, 2016, 12:00:00

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 {}:

import jsonData from ./file.json;

console.log(jsonData);

This is what my file.json looks like:

[

    {

      id: 1,

      gender: Female,

      first_name: Helen,

      last_name: Nguyen,

      email: [email protected],

      ip_address: 227.211.25.18

    }, {

      id: 2,

      gender: Male,

      first_name: Carlos,

      last_name: Fowler,

      email: [email protected],

      ip_address: 214.248.201.11

    }

]

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jadyngraysons

Add To Favorites

Follow

Total Points: 455

Total Questions: 109

Total Answers: 98

Location: Trinidad and Tobago

Member since Fri, May 8, 2020

4 Years ago

jadyngraysons questions

1 AWS Lambda SNS Destinations not working on failure or success

Fri, Aug 14, 20, 00:00, 4 Years ago

1 React Hooks useState Array empty with states rendered in the component

Tue, May 5, 20, 00:00, 4 Years ago

1 postman pm set environment variable

Thu, Apr 23, 20, 00:00, 4 Years ago

1 getElementById after dynamically adding it in React

Sat, Jan 18, 20, 00:00, 4 Years ago

1 How to customise Intl.DateTimeFormat date?

Tue, Dec 31, 19, 00:00, 4 Years ago

View All

answered 8 Years ago jamaal · Accepted Answer

var data = require('../../file.json'); // forward slashes will depend on the file location

var data = [

    {

      id: 1,

      gender: Female,

      first_name: Helen,

      last_name: Nguyen,

      email: [email protected],

      ip_address: 227.211.25.18

    }, {

      id: 2,

      gender: Male,

      first_name: Carlos,

      last_name: Fowler,

      email: [email protected],

      ip_address: 214.248.201.11

    }

];



for (var i = 0; i < data.length; i++)

{

    var obj = data[i];

    console.log(`Name: ${obj.last_name}, ${obj.first_name}`);

}

https://jsfiddle.net/c9wupvo6/