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().