0
236
ViewsMapping through array in React with nested objects
For a school project, I am making a dashboard where I want to visualize some data. I've already got it so far that I can load the data into the front end which is react.
Now I want to get certain values from the array. But since it's a fairly large array, I'm not exactly sure how to loop through this.
The data looks like this:
I want to have the _value for each object so that I can eventually load it into a area chart from rechart.
The code for the areachart:
<AreaChart
width={1550}
height={400}
data={this.getMachineData()}
margin={{
top: 10,
right: 30,
left: 0,
bottom: 0,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis dataKey="_table" />
<Tooltip />
<Area type="monotone" dataKey="uv" stackId="1" stroke="#8884d8" fill="#8884d8" />
<Area type="monotone" dataKey="pv" stackId="1" stroke="#82ca9d" fill="#82ca9d" />
<Area type="monotone" dataKey="amt" stackId="1" stroke="#ffc658" fill="#ffc658" />
<Legend />
<Bar dataKey="_value" fill="#8884d8" />
<Bar dataKey="uv" fill="#82ca9d" />
</AreaChart>
I have already made a method but it is not implemented yet:
getMachineData(data) {
console.log(data)
const result = data.map((innerArray) => {
console.log(innerArray)
// Map over the inner array
return innerArray.map((item) => {
// Return an object with only the properties you need
return ({
time: item._time,
value: item._value
});
});
})
console.log(result)
return result;
};
I was thinking of looping through the object myself with the .map function but since they are objects within objects I'm not sure how to go about this.
1 answers
Answer question0
Not sure what you mean by objects within objects. What I see in the above image is an array (with 816 objects) inside an array. So a simpler way using the map function would be:
const data = [
[
{ _time: 1, _value: 2 },
{ _time: 3, _value: 4 },
{ _time: 5, _value: 6 },
{ _time: 7, _value: 8 },
]
]
const results = []
// Map over the outer array
data.map((innerArray) => {
// Map over the inner array
return innerArray.map((item) => {
// Return an object with only the properties you need
results.push({
time: item._time,
value: item._value
});
});
})
console.log(results);