Nested array within nested object

Question

I had an object whose structure is

const data = {
    "message": "fetch responces successfully",
    "responce": [
        {
            "created_AT": "Mon, 03 Jan 2022 17:39:24 GMT",
            "created_BY": "avinash",
            "dateTime": "Mon, 03 Jan 2022 17:39:24 GMT",
            "deleted_BY": "",
            "flag": 0,
            "project_ID": "infobot1234",
            "responce": {
                "uttence_test_heading": [
                    {
                        "buttons": [
                            {
                                "payload": "/my_localities",
                                "title": "savings"
                            },
                            {
                                "payload": "/my_localities12333qqqwq",
                                "title": "current"
                            },
                            {
                                "payload": "/fruits",
                                "title": "platinum"
                            }
                        ]
                    },
                    {
                        "title": "Test Heading"
                    }
                ]
            },
            "responce_ID": "6bbb20d6-7f71-408a-a78a-bab39a30016f",
            "responce_name": "uttence_test_heading",
            "updated_BY": "",
            "user_ID": "av1234"
        },
        {
            "created_AT": "Tue, 04 Jan 2022 17:49:36 GMT",
            "created_BY": "avinash",
            "dateTime": "Tue, 04 Jan 2022 17:49:36 GMT",
            "deleted_BY": "",
            "flag": 0,
            "project_ID": "infobot1234",
            "responce": {
                "utter_content": [
                    {
                        "text": "text_title for buttonqwqwq"
                    }
                ]
            },
            "responce_ID": "81d699ee-3e78-4356-b703-af095d91e36b",
            "responce_name": "utter_txt1234",
            "updated_BY": "",
            "user_ID": "av1234"
        },
        {
            "created_AT": "Thu, 13 Jan 2022 18:06:39 GMT",
            "created_BY": "avinash",
            "dateTime": "Thu, 13 Jan 2022 18:06:39 GMT",
            "deleted_BY": "",
            "flag": 0,
            "project_ID": "infobot1234",
            "responce": {
                "uttence_text_heading": [
                    {
                        "buttons": [
                            {
                                "payload": "/my_localities",
                                "title": "savings"
                            },
                            {
                                "payload": "/my_localities12333qqqwq",
                                "title": "current"
                            },
                            {
                                "payload": "/test",
                                "title": "premium"
                            }
                        ]
                    },
                    {
                        "title": "Text Heading"
                    }
                ]
            },
            "responce_ID": "bb6b0005-bbd4-49a1-8b25-58e0768800a1",
            "responce_name": "uttence_text_heading",
            "updated_BY": "",
            "user_ID": "av1234"
        },
        {
            "created_AT": "Thu, 13 Jan 2022 20:13:54 GMT",
            "created_BY": "avinash",
            "dateTime": "Thu, 13 Jan 2022 20:13:54 GMT",
            "deleted_BY": "",
            "flag": 0,
            "project_ID": "infobot1234",
            "responce": {
                "uttence_heading_test": [
                    {
                        "buttons": [
                            {
                                "payload": "/my_localities",
                                "title": "savings"
                            },
                            {
                                "payload": "/fruits",
                                "title": "current"
                            },
                            {
                                "payload": "/undefined",
                                "title": "premium"
                            }
                        ]
                    },
                    {
                        "title": "heading test"
                    }
                ]
            },
            "responce_ID": "7aeb2a42-a5f8-464d-832d-47cee4cfdb38",
            "responce_name": "uttence_heading_test",
            "updated_BY": "",
            "user_ID": "av1234"
        }
    ],
    "status_code": 0
}

I was able to extract below array of objects by using data.responce.map(responce => responce.responce)

[{
  uttence_test_heading: [{
  buttons: [{
  payload: "/my_localities",
  title: "savings"
}, {
  payload: "/my_localities12333qqqwq",
  title: "current"
}, {
  payload: "/fruits",
  title: "platinum"
}]
}, {
  title: "Test Heading"
}]
}, {
  utter_content: [{
  text: "text_title for buttonqwqwq"
}]
}, {
  uttence_text_heading: [{
  buttons: [{
  payload: "/my_localities",
  title: "savings"
}, {
  payload: "/my_localities12333qqqwq",
  title: "current"
}, {
  payload: "/test",
  title: "premium"
}]
}, {
  title: "Text Heading"
}]
}, {
  uttence_heading_test: [{
  buttons: [{
  payload: "/my_localities",
  title: "savings"
}, {
  payload: "/fruits",
  title: "current"
}, {
  payload: "/undefined",
  title: "premium"
}]
}, {
  title: "heading test"
}]
}]

Now I want to construct an array of objects whose structure is something like below

This is my expected result, but I am stuck since the uttence_name is a key and it is different for each object so could someone please guide me through how can I acheive my expected result. Please Help !

[{uttence_name: ' uttence_test_heading',buttons: ['savings','current','platinum'],text: '',responce_ID:'6bbb20d6-7f71-408a-a78a-bab39a30016f'},
{uttence_name: 'utter_content',buttons: '',text: 'text_title for buttonqwqwq',responce_ID:'81d699ee-3e78-4356-b703-af095d91e36b'},
{uttence_name:'uttence_text_heading',buttons:['savings','current','premium'],text: '',responce_ID:'bb6b0005-bbd4-49a1-8b25-58e0768800a1'}]

Your desired output is not valid JavaScript. Is buttons indented to be an array? Then surround all those strings with square brackets, also '' to be consistent, or even better: an empty array. Note that JS has a specific value for the absence of a value, and it is not the empty string. — trincot
– trincot, Commented Jan 15, 2022 at 9:04

Som Shekhar Mukherjee · Accepted Answer · 2022-01-15 09:44:17Z

1

You can chain a second map and obtain the desired result. But my answer assumes that the arrays only have a single item in them.

Also, I didn't quite understand what you wanted to do with the buttons so I've kept them as an array.

You can run the snippet below to see if you're getting the desired output.

const data={message:"fetch responces successfully",responce:[{created_AT:"Mon, 03 Jan 2022 17:39:24 GMT",created_BY:"avinash",dateTime:"Mon, 03 Jan 2022 17:39:24 GMT",deleted_BY:"",flag:0,project_ID:"infobot1234",responce:{uttence_test_heading:[{buttons:[{payload:"/my_localities",title:"savings",},{payload:"/my_localities12333qqqwq",title:"current",},{payload:"/fruits",title:"platinum",},],},{title:"Test Heading",},],},responce_ID:"6bbb20d6-7f71-408a-a78a-bab39a30016f",responce_name:"uttence_test_heading",updated_BY:"",user_ID:"av1234",},{created_AT:"Tue, 04 Jan 2022 17:49:36 GMT",created_BY:"avinash",dateTime:"Tue, 04 Jan 2022 17:49:36 GMT",deleted_BY:"",flag:0,project_ID:"infobot1234",responce:{utter_content:[{text:"text_title for buttonqwqwq",},],},responce_ID:"81d699ee-3e78-4356-b703-af095d91e36b",responce_name:"utter_txt1234",updated_BY:"",user_ID:"av1234",},{created_AT:"Thu, 13 Jan 2022 18:06:39 GMT",created_BY:"avinash",dateTime:"Thu, 13 Jan 2022 18:06:39 GMT",deleted_BY:"",flag:0,project_ID:"infobot1234",responce:{uttence_text_heading:[{buttons:[{payload:"/my_localities",title:"savings",},{payload:"/my_localities12333qqqwq",title:"current",},{payload:"/test",title:"premium",},],},{title:"Text Heading",},],},responce_ID:"bb6b0005-bbd4-49a1-8b25-58e0768800a1",responce_name:"uttence_text_heading",updated_BY:"",user_ID:"av1234",},{created_AT:"Thu, 13 Jan 2022 20:13:54 GMT",created_BY:"avinash",dateTime:"Thu, 13 Jan 2022 20:13:54 GMT",deleted_BY:"",flag:0,project_ID:"infobot1234",responce:{uttence_heading_test:[{buttons:[{payload:"/my_localities",title:"savings",},{payload:"/fruits",title:"current",},{payload:"/undefined",title:"premium",},],},{title:"heading test",},],},responce_ID:"7aeb2a42-a5f8-464d-832d-47cee4cfdb38",responce_name:"uttence_heading_test",updated_BY:"",user_ID:"av1234",},],status_code:0,}

const result = data.responce
  .map((res) => ({...res.responce, responce_ID: res.responce_ID }))
  .map((obj) => ({
    utterance_name: Object.keys(obj)[0],
    text: Object.values(obj)[0][0].text || "",
    buttons: Object.values(obj)[0][0].buttons?.map((btn) => btn.title) || "",
    responce_ID: obj.responce_ID
  }));

console.log(result);

edited Jan 15, 2022 at 9:44

answered Jan 15, 2022 at 8:56

Som Shekhar Mukherjee

8,1982 gold badges16 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Sachin Over a year ago

This works but what If I want the responce_ID as well, I forgot to mention that in my question and I have edited it just now

Som Shekhar Mukherjee Over a year ago

@Sachin I've updated my answer to include responce_ID as well, please take a look

ikhvjs Over a year ago

@Sachin, A friendly reminder: there would be an bug if the order of buttons, text ,title are not always the same in the array. For example, if buttons in order 0 and text in order 1.

Sachin Over a year ago

@ikhvjs Order is as such not necessary in my case, the data is coming from an api endpoint and I have to display that in an ant design table which uses only an array of objects to display the data that's why I wanted to construct array of objects in which I have only 4 fields the responce_ID is needed if a user wants to delete the utterance

Sachin Over a year ago

@ikhvjs Yes As long as the object key is correct it will display properly

|

Alok · Accepted Answer · 2022-01-15 09:50:46Z

Here is the required result based upon the data you have given. In the code, the best case scenario is, it checks whether you have object containing text or not and then adds the data accordingly. It also has response_ID

const data={message:"fetch responces successfully",responce:[{created_AT:"Mon, 03 Jan 2022 17:39:24 GMT",created_BY:"avinash",dateTime:"Mon, 03 Jan 2022 17:39:24 GMT",deleted_BY:"",flag:0,project_ID:"infobot1234",responce:{uttence_test_heading:[{buttons:[{payload:"/my_localities",title:"savings",},{payload:"/my_localities12333qqqwq",title:"current",},{payload:"/fruits",title:"platinum",},],},{title:"Test Heading",},],},responce_ID:"6bbb20d6-7f71-408a-a78a-bab39a30016f",responce_name:"uttence_test_heading",updated_BY:"",user_ID:"av1234",},{created_AT:"Tue, 04 Jan 2022 17:49:36 GMT",created_BY:"avinash",dateTime:"Tue, 04 Jan 2022 17:49:36 GMT",deleted_BY:"",flag:0,project_ID:"infobot1234",responce:{utter_content:[{text:"text_title for buttonqwqwq",},],},responce_ID:"81d699ee-3e78-4356-b703-af095d91e36b",responce_name:"utter_txt1234",updated_BY:"",user_ID:"av1234",},{created_AT:"Thu, 13 Jan 2022 18:06:39 GMT",created_BY:"avinash",dateTime:"Thu, 13 Jan 2022 18:06:39 GMT",deleted_BY:"",flag:0,project_ID:"infobot1234",responce:{uttence_text_heading:[{buttons:[{payload:"/my_localities",title:"savings",},{payload:"/my_localities12333qqqwq",title:"current",},{payload:"/test",title:"premium",},],},{title:"Text Heading",},],},responce_ID:"bb6b0005-bbd4-49a1-8b25-58e0768800a1",responce_name:"uttence_text_heading",updated_BY:"",user_ID:"av1234",},{created_AT:"Thu, 13 Jan 2022 20:13:54 GMT",created_BY:"avinash",dateTime:"Thu, 13 Jan 2022 20:13:54 GMT",deleted_BY:"",flag:0,project_ID:"infobot1234",responce:{uttence_heading_test:[{buttons:[{payload:"/my_localities",title:"savings",},{payload:"/fruits",title:"current",},{payload:"/undefined",title:"premium",},],},{title:"heading test",},],},responce_ID:"7aeb2a42-a5f8-464d-832d-47cee4cfdb38",responce_name:"uttence_heading_test",updated_BY:"",user_ID:"av1234",},],status_code:0,};

let newObject = [];
data.responce.forEach((item) => {
    // We will get each item here now
    // Assuming object of item.responce will come always
    const objectName = Object.keys(item.responce)[0];
    const dataToPush = {
      'responce_ID': item.responce_ID,
      'uttence_name': objectName,
      'buttons': item.responce[objectName][0].buttons ? item.responce[objectName][0].buttons.map(data => data.title) : '',
      'text': item.responce[objectName].find(data => data.hasOwnProperty('text')) ? item.responce[objectName].map(value => value.text)[0] : ''
    };
    // Finally adding the item to the array to give the final output
    newObject.push(dataToPush);
});

console.log(newObject);

@Sachin take a look at this answer, as it is somehow improved version of all the solution. Do let me know if that also solves your problem with more efficiency

Collectives™ on Stack Overflow

Nested array within nested object

2 Answers 2

12 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related