How to convert nested array of object into Json object

Question

Using React or JavaScript how to convert below sample nested array of objects into JSON: Is there any solution? for this problem in react? I try to solve this problem through map but, in variable it will store last value remaining child objects are overwriting

Here i want to bind Json data into Fluent UI detailList with reference of filed name later i need to export in different format like excel... for exporting excel we have to call data by filed name thats the reason whatever nested Json data is there i just try making simple Json format

Fluent table example: https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist

{
  "msg": "hello world",
  "success": "true",
  "Details": [
    {
      "group": "grp1",
      "personDetails": [
        {
          "firstName": "abc",
          "lastName": "xyz",
          "mobile": 12334,
          "state": "abc"   
        }
      ]
    },
    {
      "group": "grp1",
      "personDetails": [
        {
          "firstName": "abc",
          "lastName": "xyz",
          "mobile": 12334,
          "state": "abc"   
        },
        {
          "firstName": "abc",
          "lastName": "xyz",
          "mobile": 12334,
          "state": "abc"   
        }
      ]
    }
  ]
}

how to convert above Json object into below format: Expexted Json format

[
 
  {
    firstName: "abc",
    lastName: "xyz",
    mobile: 12334,
    state: "abc",
  },
  {
    firstName: "abc",
    lastName: "xyz",
    mobile: 12334,
    state: "abc",
  },
  {
    firstName: "abc",
    lastName: "xyz",
    mobile: 12334,
    state: "abc",
  },
];

Answer 1

First of all, part of what you are trying to achieve is invalid JSON syntax as you cannot have key value pairs in an array. Hence [ "msg": "hello world", "success": "true" is not possible.

However, what you could do is the following:

Details.flatMap((element) => element.personDetails));

Wich will take all the nested elements and return them in a single, "flat" array. You can then use this result to put it in a JSON object together with your msg and success attributes.

Consider reading more about JSON here . And more about Array.flatMap here .

Answer 2

I find the solution for that, If someone facing this kind of issue you can go thorough below steps.

var array = [];

source["Details"].forEach((i) => array.push(...i["personDetails"]));

console.log(array);

Answer 3

Here is a flexible and legible solution using object-scan

 // const objectScan = require('object-scan'); const data = { msg: 'hello world', success: 'true', Details: [ { group: 'grp1', personDetails: [ { firstName: 'abc', lastName: 'xyz', mobile: 12334, state: 'abc' } ] }, { group: 'grp1', personDetails: [ { firstName: 'abc', lastName: 'xyz', mobile: 12334, state: 'abc' }, { firstName: 'abc', lastName: 'xyz', mobile: 12334, state: 'abc' } ] } ] }; const r = objectScan(['Details[*].personDetails[*]'], { rtn: 'value' })(data); console.log(r); // => [ { firstName: 'abc', lastName: 'xyz', mobile: 12334, state: 'abc' }, { firstName: 'abc', lastName: 'xyz', mobile: 12334, state: 'abc' }, { firstName: 'abc', lastName: 'xyz', mobile: 12334, state: 'abc' } ]

 .as-console-wrapper {max-height: 100%;important: top: 0}

 <script src="https://bundle.run/object-scan@14.0.0"></script>

Disclaimer : I'm the author of object-scan

Answer 4

Try this

 const result = { msg: "hello world", success: "true", Details: [ { group: "grp1", personDetails: [ { firstName: "abc", lastName: "xyz", mobile: 12334, state: "abc", }, ], }, { group: "grp1", personDetails: [ { firstName: "abc", lastName: "xyz", mobile: 12334, state: "abc", }, { firstName: "abc", lastName: "xyz", mobile: 12334, state: "abc", }, ], }, ], }; const items = result.Details.map((item) => item.personDetails); console.log(items.flat());