How to Use React.js and Complex JSON Objects

How to parse a complex JSON Response in ReactJs.How to Use React.js and Complex JSON Objects

Creating Components

We can use Javascript JSON.parse() to parse any JSON object in ReactJS. Dealing with complex JSON responses is a necessity today to React developers

Make a component with the name Product

Product.js

import React,{useEffect,useState} from 'react';
import Colors from './Colors';
import axios from 'axios';

const Product=()=>{
    const [Data,setData]=useState({
        Company:'',
        Description:''
    })
    const [colorsData,setColorsData]=useState([])
    useEffect(()=>{
        axios.get('https://reqres.in/api/unknown')
            .then(res=>{
                console.log('Response from main API: ',res)
                console.log('Home Data: ',res.data.ad)
                let companyData=res.data.ad;
                setData({Company:companyData.company,Description:companyData.text})
                console.log('Colors Data: ',res.data.data)
                setColorsData(res.data.data)
            })
            .catch(err=>{
                console.log(err);
            })
    },[])
    return(
        <>
            <h1>{Data.Company}</h1>
            <p>{Data.Description}</p>
            <Colors data={colorsData}/>
        </>
    )
}

export default Product;

This way you can parse Object in ReactJS or Javascript . If you are parsing Data in PHP then you can use json_decode().

Leave a Reply

Your email address will not be published. Required fields are marked *