Introduction

JSON stands for JavaScript Object Notation.JSON is a lightweight format for storing and transporting data.JSON is often used when data is sent from a server to a web page.JSON is "self-describing" and easy to understand. JavaScript objects are an integral part of the React app, so they need to get accessed from JSON files/data to be uses in components.

This blog will demonstrate how to get a JavaScript object from a JSON file or access it using a fetch() HTTP request.

Rendering Values from a JSON File

Create one sample JSON file as given below, and save it as data.json

{
"employees":{
"employee1": {"firstName":"John", "lastName":"Doe"},
"employee2": {"firstName":"Anna", "lastName":"Smith"},
"employee3": {"firstName":"Peter", "lastName":"Jones"}
}
}

Now, if you want to render any of the key-value pairs from the JSON, the .map() function would be useful to iterate the objects; the example is below.

import React, { Component } from "react";
// Import local JSON file
import Data from "./data";

export class Sample extends Component {
  render() {
    return (
      <>
        <div>
          <h3>Using local JSON file</h3>
          {Object.keys(Data.employees).map((item, i) => (
            <li key={i}>
              <span>Key name : {item}</span>
            </li>
          ))}
        </div>
      </>
    );
  }
}

export default Sample;

In the above example, to use the local JSON file needs to be consumed using the import statement.

import Data from "./data";

After that, you can access all the JSON data using Data in your component by using Object.keys() along with the .map() function.

{Object.keys(Data.employees).map((item, i) => ())}

Using a local JSON file in the React app is a common approach when you want to render some static data, maintain server config, etc.

Rendering JSON Objects from an API Call

You have seen the example where a local JSON file is used, but at the same time you may need to access JSON data from the server.

Implement the API call as demonstrated below.

componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(
        result => {
          this.setState({
            data: result
          });
        },
        error => {
          console.log(error);
        }
      );
}

After implementing the API call, you can access the JSON data for the rendering as below.

render() {
    return (
      <>
        <div>
          <h3>Using API call</h3>
          {this.state.data &&
            this.state.data.length > 0 &&
            this.state.data.map((item, i) => (
              <li key={i}>
                <span>Email : {item.email}</span>
              </li>
            ))}
        </div>
      </>
    );
}

Along with the state this.state.data, the additional function used is .map(), which iterates the array items from the state and renders them into the DOM.

Hope ou enjoyed the blog post!!

Please feel free to like, save and comment your thoughts!!

Happy Reading!!!