How to Parse Through Local Json File in React Js

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++)
{
    var obj = data[i];
    console.log(`Name: ${obj.last_name}, ${obj.first_name}`);
}

How to fetch data from local JSON file on react native?

Since React Native 0.4.3 you can read your local JSON file like this:

const customData = require('./customData.json');

and then access customData like a normal JS object.

loading json data from local file into React JS

You are opening an asynchronous connection, yet you have written your code as if it was synchronous. The reqListener callback function will not execute synchronously with your code (that is, before React.createClass), but only after your entire snippet has run, and the response has been received from your remote location.

Unless you are on a zero-latency quantum-entanglement connection, this is well after all your statements have run. For example, to log the received data, you would:

function reqListener(e) {
    data = JSON.parse(this.responseText);
    console.log(data);
}

I'm not seeing the use of data in the React component, so I can only suggest this theoretically: why not update your component in the callback?

Local JSON file is not parsing in React

First of all, there are some places you should change in your code.

• You should keep an array property in your state for all movies: movies: []
• You should map this state value, then render some JSX.
• Use componentDidMount instead of componentWillMount since it will be deprecated in a future release.

Here is the example code:

class Box extends React.Component {
  constructor() {
    super();
    this.state = { movies: [] };
  }

  componentDidMount() {
    fetch("./MovieDatabaseShort.json")
      .then(res => res.json())
      .then(movies => this.setState({ movies }));
  }

  renderMovies() {
    const { movies } = this.state;
    return movies.map(movie => (
      <h1 key={movie.title} className="heading">
        {movie.title}
      </h1>
    ));
  }

  render() {
    return <div className="box">{this.renderMovies()}</div>;
  }
}

If you still don't see anything maybe fetch would the problem here. Then, try this:

class Box extends React.Component {
  constructor() {
    super();
    this.state = { movies: [] };
  }

  componentDidMount() {
    import("./MovieDatabaseShort.json").then(movies =>
      this.setState({ movies })
    );
  }

  renderMovies() {
    const { movies } = this.state;
    return movies.map(movie => (
      <h1 key={movie.title} className="heading">
        {movie.title}
      </h1>
    ));
  }

  render() {
    return <div className="box">{this.renderMovies()}</div>;
  }
}

Again, if nothing is shown up please share you JSON file with us as well as check your console if there is any error.

---

Related Topics