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

is this that you want ? stackoverflow.com/a/58553030/6544460 — akhtarvahid
– akhtarvahid, Commented Oct 25, 2019 at 6:06
@VahidAkhtar I want a way to access the data. Because i am accessing the attachmentList as the same way I access items array.. — Pubudu Jayasanka
– Pubudu Jayasanka, Commented Oct 25, 2019 at 6:09

Nadir Laskar · Accepted Answer · 2019-10-25 06:13:13Z

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)

ibtsam · Accepted Answer · 2019-10-25 06:14:10Z

0

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

answered Oct 25, 2019 at 6:14

ibtsam

1,7001 gold badge11 silver badges10 bronze badges

Comments

thortsx · Accepted Answer · 2019-10-25 06:16:37Z

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;

Collectives™ on Stack Overflow

How to access array inside a json objectin react js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related