Nested array within nested object

Question

I had an object whose structure is

const data = {
 "message": "fetch responces successfully",
 "responce": [
 {
 "created_AT": "2022年1月03日 17:39:24 GMT",
 "created_BY": "avinash",
 "dateTime": "2022年1月03日 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": "2022年1月04日 17:49:36 GMT",
 "created_BY": "avinash",
 "dateTime": "2022年1月04日 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": "2022年1月13日 18:06:39 GMT",
 "created_BY": "avinash",
 "dateTime": "2022年1月13日 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": "2022年1月13日 20:13:54 GMT",
 "created_BY": "avinash",
 "dateTime": "2022年1月13日 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'}]

• trincot: 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.

Answer 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);

• Sachin: 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: @Sachin I've updated my answer to include responce_ID as well, please take a look
• ikhvjs: @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: @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: @ikhvjs Yes As long as the object key is correct it will display properly

Answer 2

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);

• Alok: @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