How to fetch array objects from api using axios? - reactjs

Question

Im fetching data from api using axios.
I have array of objects.
I would like to fetch objects inside array.
Here is api : https://51fgc922b7.execute-api.ap-south-1.amazonaws.com/dev/productpreview?product_id=122003
enter image description here
Here is what i tried !
useEffect(() => {
if (props.product_id) {
axios.
get(`https://51fgc922b7.execute-api.ap-south-1.amazonaws.com/dev/productpreview?product_id=${props.product_id}`)
.then((res) => {
console.log(res.data)
setModelData(res.data.data[0])
})
.catch((error) => {
setIsErrorImage(true)
})
}
}, []);
Im able to fetch data but what im trying to achive is that, there are three objects with camera objects called 0,1,2 and i want to fetch them.

Answer 1

I'm not sure about your requirement but as far as I understood you just want the array of objects from the data you get. You can get that simply by traversing the object like
const cameraData = res.data.reduce((acc,el) => [...acc, ...el.camera], [] )

Answer 2

console.log(res.data) if correct ,
setModelData(res.data)
and in return example ;
modelData.map((item)=> {
return (
<div> {item.camera.map((data)=>{
return (
<div> {data.camera_beta} </div>
)
})}
</div> )})
this is what i want to tell
const [modelData, setModelData] = useState([
{
name: 'Electronics',
slug: 'electronics',
count: 11,
items: [
{ name: 'Phones', slug: 'phones', count: 4 },
{ name: 'Tablets', slug: 'tablets', count: 5 },
{ name: 'Laptops', slug: 'laptops', count: 2 },
],
},
{
name: 'Clothing',
slug: 'clothing',
count: 12,
items: [
{ name: 'Tops', slug: 'tops', count: 3 },
{ name: 'Shorts', slug: 'shorts', count: 4 },
{ name: 'Shoes', slug: 'shoes', count: 5 },
],
}
])
you have data like this.
this way you set the data into setmodeldata in useeffect.
in useffect after set
console.log(modelData) and
console.log(modelData[0])
you can see the difference between the two.one comes in the form of an object and the other as an array.
at most you can map them