How to get value based on key from an array of objects javascript

Question

I have an array which I get from Database as below

var sampleArray = 
{ID:1, ANALYSIS_NAME : "name1",
   custodians:"[{\"ID\": 1, \"NAME\": \"abc\"}, 
                {\"ID\": 2, \"NAME\": \"xyz\"}, 
                {\"ID\": 3, \"NAME\": \"pqr\"}]"

};

How do I get name from the above array. I am able to display console.log(sampleArray.custodians) But When I tried to display console.log(sampleArray.custodians.name) I am getting an error Cannot read property 'NAME' of undefined.

return(<div>
<Panel>test</panel>
/*custodians should come here*/
</div>)

How to display the above object? please help. Thanks in advance

The value of custodians is JSON, so you first have to parse it -> JSON.parse() — Andreas
– Andreas, Commented Jul 1, 2021 at 8:54
sampleArray is not an array it's an object. Also, custodians is stringified (serialized as text). — marzelin
– marzelin, Commented Jul 1, 2021 at 8:55

Rory McCrossan · Accepted Answer · 2021-07-01 09:18:37Z

2

Part of the issue is because sampleArray.custodians is a JSON formatted string. You will need to deserialise it before you access it.

The other part of the issue is that the result of the deserialisation will convert custodians to an array, so you will need to access it directly by index or through a loop.

var sampleArray = {
  ID: 1,
  ANALYSIS_NAME: "name1",
  custodians: "[{\"ID\": 1, \"NAME\": \"abc\"},{\"ID\": 2, \"NAME\": \"xyz\"},{\"ID\": 3, \"NAME\": \"pqr\"}]"
};

let custodians = JSON.parse(sampleArray.custodians);

custodians.forEach(c => console.log('loop', c.NAME)); // loop

console.log('index', custodians[0].NAME); // direct access by index

-- UPDATE --

Given the update to your question, you can use map() to build the HTML string to return from your function:

var sampleArray = {
  ID: 1,
  ANALYSIS_NAME: "name1",
  custodians: "[{\"ID\": 1, \"NAME\": \"abc\"},{\"ID\": 2, \"NAME\": \"xyz\"},{\"ID\": 3, \"NAME\": \"pqr\"}]"
};


let buildCustodianHtml = (data) => {
  let custodianHtml = JSON.parse(data.custodians).map(c => `<p>${c.NAME}</p>`).join('');
  return `<div><Panel>test</panel>${custodianHtml}</div>`;
}

$('#container').append(buildCustodianHtml(sampleArray));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

edited Jul 1, 2021 at 9:18

answered Jul 1, 2021 at 8:54

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

2 Comments

Sai sri Over a year ago

I have edited my question. How do I display in the code where I added the comment /*custodians should come here*/

Rory McCrossan Over a year ago

I updated my answer to show you how to do that

Martin Meli · Accepted Answer · 2021-07-01 08:55:25Z

0

The custodians property is a string. You first need to convert this string into JSON using

var custodians = JSON.parse(sampleArray.custodians);

Then you can access it using

console.log(custodians[0].NAME)

answered Jul 1, 2021 at 8:55

Martin Meli

5957 silver badges24 bronze badges

1 Comment

Sai sri Over a year ago

I have edited my question. How do I display in the code where I added the comment /*custodians should come here*/

ahsan · Accepted Answer · 2021-07-01 08:57:23Z

0

Since custodians is a string, it needs to converted to an object first before "NAME" can be accessed.

Use JavaScript's built-in JSON.Parse()

var sampleArray = 
    {
    ID:1, ANALYSIS_NAME : "name1",
    custodians:`[{\"ID\": 1, \"NAME\": \"abc\"}, 
                {\"ID\": 2, \"NAME\": \"xyz\"}, 
                {\"ID\": 3, \"NAME\": \"pqr\"}]`

};

let newObj = JSON.parse(sampleArray.custodians);

for(let i=0; i<newObj.length; i++){
    console.log(`Name: ${newObj[i]["NAME"]}`);
}

answered Jul 1, 2021 at 8:57

ahsan

1,50411 silver badges12 bronze badges

1 Comment

Sai sri Over a year ago

I have edited my question. How do I display in the code where I added the comment /*custodians should come here*/

Collectives™ on Stack Overflow

How to get value based on key from an array of objects javascript

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related