How to destructure a Json array object to use in my react component?

Alright, do you have an array of objects. It's no big deal my friend, you extract it on both of this ways, choose the one that fits your needs.

1st way, extracting only elements:

const [element1, element2, element3, ...rest] = carpak;

This way you will extract the three first elements to the variables above and the rest of the array will be placed in the variable rest.

2nd way, extracting properties of the elements in array:

const [{
    id: id1,
    latitude: la1,
    longitude: lo1,
    ...rest: rest1,
}, {
    id: id2,
    latitude: la2,
    longitude: lo2,
    ...rest: rest2,
}] = carpak;

In this example we accessed the first and the second element's properties. But we didn't care about the rest of the array of elements. Note that we are using some alias for the variables because if we don't do so, the variables would be used twice and we would have a compilation problem.

3rd way, extracting elements and properties from array:

const [{
    id,
    latitude,
    longitude,
    ...restProperties,
}, element2, ...restElements] = carpak;

Now we have accessed the first element's properties, the entire second element and the rest of the elements in the array. Now we don't need aliases because we are only using the variables once.

Hope any of these help you man. In addition I would like to recommend you the next two links:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
• https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/