CODEWITHSUNDEEP
reactjsjsonmultidimensional-array
user9325447
user9325447

Reputation: 23

How do I extract two arrays from a JSON with nested objects

I am trying to generate a menu and a sub menu in ReactJs. The data comes from an external api in JSON format.

Here's the JSON data:

[
    {
        "content": "A",
        "Subtypes": [
            {
                "content": "1"
            },
            {
                "content": "2"
            },
            {
                "content": "3"
            }
        ]
    },
    {
        "content": "B",
        "Subtypes": [
            {
                "content": "10"
            },
            {
                "content": "20"
            },
            {
                "content": "30"
            },
            {
                "content": "40"
            }
        ]
    },
    {
        "content": "C",
        "Subtypes": [
            {
                "content": "X"
            },
            {
                "content": "Y"
            },
            {
                "content": "Z"
            }
        ]
    }
]

I would like to generate two arrays from the above JSON data, similar to the ones below:

Array1 = ["A","B","C"]

Array2 = {
            A: ["1", "2", "3"],
            B: ["10", "20", "30", "40"],
            C: ["X", "Y", "Z"]
        };

How can I achieve that ? Thanks.

Upvotes: 1

Views: 132

Answers (4)

Neel Dsouza
Neel Dsouza

Reputation: 1549

To filter an object uniquely, the best way is to create an object with that unique key and keep on appending data to that unique key something like below.

const obj = {}
  const data = [
    {
        "content": "A",
        "Subtypes": [
            {
                "content": "1"
            },
            {
                "content": "2"
            },
            {
                "content": "3"
            }
        ]
    },
    {
        "content": "B",
        "Subtypes": [
            {
                "content": "10"
            },
            {
                "content": "20"
            },
            {
                "content": "30"
            },
            {
                "content": "40"
            }
        ]
    },
    {
        "content": "C",
        "Subtypes": [
            {
                "content": "X"
            },
            {
                "content": "Y"
            },
            {
                "content": "Z"
            }
        ]
    }
]

data.forEach(el => obj[el.content] = el.Subtypes.map(e => e.content));
console.log(obj);
console.log(Object.keys(obj));

Upvotes: 0

Shan
Shan

Reputation: 131

This is an example code written in typescript that gives the above-mentioned output.

let s = [
    {
        "content": "A",
        "Subtypes": [
            {
                "content": "1"
            },
            {
                "content": "2"
            },
            {
                "content": "3"
            }
        ]
    },
    {
        "content": "B",
        "Subtypes": [
            {
                "content": "10"
            },
            {
                "content": "20"
            },
            {
                "content": "30"
            },
            {
                "content": "40"
            }
        ]
    },
    {
        "content": "C",
        "Subtypes": [
            {
                "content": "X"
            },
            {
                "content": "Y"
            },
            {
                "content": "Z"
            }
        ]
    }
]



type subType = {
    [k: string]: any
}
let contentList: string[] = []
let obj: subType = {};
s.forEach((c) => {
    contentList.push(c.content);
    obj[c.content] = [];
    c.Subtypes.forEach((e) => {
         obj[c.content].push(e.content);
    });
})

console.log(obj)
console.log(contentList)

Upvotes: 1

Immanuel
Immanuel

Reputation: 167

below code give the output you desired,var ff is the array

ff.reduce((accm, cv, cidx, arr) => {
   accm.array1.push(cv.content);
   accm.array2[cv.content] = cv.Subtypes.map(t => t.content);
   return accm;
}, { array1: [], array2: {} });

Upvotes: 1

cute_programmer
cute_programmer

Reputation: 372

I'm not sure if this is what you need because you mentioned two arrays and the array2 in your example is an object

const firstArray = [],
    secondArray = [];

json.forEach(({
    content,
    Subtypes
}) => {
    firstArray.push(content);
    secondArray.push(Subtypes.map(({
        content
    }) => content));
});

if you meant an object for the second array, you can update it to

secondArray[content] = Subtypes.map(({content}) => content);

Upvotes: 1

Related Questions