How to access array inside a json objectin react js

Question

I am trying to access a array inside json object. This is my json file.

{
"items": [
 {
 "createTime": "2019-10-25T04:33:50.238Z",
 "attachments": [
 {
 "name": "xxx.pdf",
 "legal": false,
 "id": "1908925450",
 "abc": true,
 "def": true
 },
 {
 "name": "xxx_original.xml",
 "legal": true,
 "id": "1908925449",
 "abc": false,
 "def": false
 }
 ]
 }
 ]
}

I access the details contains here using following code

 const {
 items = [],
 attachmentList = items.slice(0, 1).map(item => item.attachments),
 attachmentName = attachmentList.slice(0, 1).map(item => item.name),
 createTime = items.slice(0, 1).map(item => item.createTime),
 } = data;

I can get the value for createTime, but I cannot get attachmentName, it returns empty ? Why it is not possible to get values from attachments

• akhtarvahid: is this that you want ? stackoverflow.com/a/58553030/6544460
• Pubudu Jayasanka: @VahidAkhtar I want a way to access the data. Because i am accessing the attachmentList as the same way I access items array..

Answer 1

The issue is because your attachments are array and doing

attachmentList.slice(0, 1).map(item => item.name),

is failing as attachmentList contains array of arrays and item is an array.

Try using flat, it will flatten the array of array (attachments) to array of attachments.

Checkout the snippet

var data = {
 "items": [{
 "createTime": "2019-10-25T04:33:50.238Z",
 "attachments": [{
 "name": "xxx.pdf",
 "legal": false,
 "id": "1908925450",
 "abc": true,
 "def": true
 },
 {
 "name": "xxx_original.xml",
 "legal": true,
 "id": "1908925449",
 "abc": false,
 "def": false
 }
 ]
 }]
}
const {
 items = [],
 attachmentList = items.slice(0, 1).map(item => item.attachments).flat(),
 attachmentName = attachmentList.slice(0, 1).map(item => item.name),
 createTime = items.slice(0, 1).map(item => item.createTime),
} = data;
console.log(attachmentName)

Answer 2

It's because your attchmentList is an array of arrays now, you can do this to get name

const {
 items = [],
 attachmentList = items.slice(0, 1).map(item => item.attachments),
 attachmentName = attachmentList.slice(0, 1).map((item, i) => item[i].name),
 createTime = items.slice(0, 1).map(item => item.createTime),
} = data;

Hope it helps

Answer 3

items.slice(0, 1) will return an new Array. So when you use map, attachmentList will return an Array in Array like this:

[{...}]
 0:
 attachments: (2) [{...}, {...}]
 createTime: "2019-10-25T04:33:50.238Z"

First you you can refactor like this:

const {
 items = [],
 attachmentList = items.slice(0, 1)[0].map(item => item.attachments), 
 // Access to the first item with return of items.slice(0, 1)
 attachmentName = attachmentList.slice(0, 1).map(item => item.name),
 createTime = items.slice(0, 1).map(item => item.createTime),
 } = data;

Or:

const {
 items = [],
 attachmentList = items.slice(0, 1).map(item => item.attachments),
 attachmentName = attachmentList[0].slice(0, 1).map(item => item.name),
 // Access to the first item of attachmentList
 createTime = items.slice(0, 1).map(item => item.createTime),
 } = data;