How to get values from JSON array in JavaScript | Example code

  • by

Just use for loop get values from JSON array in JavaScript.

Get values from JSON array in JavaScript

Simple example code.

<!DOCTYPE html>
<html>
<body>

  <script>

    var obj = [{"oid":"2","cid":"107"},{"oid":"4","cid":"98"},{"oid":"4","cid":"99"}];

    for (var i = 0; i < obj.length; i++) {
      console.log("PAIR " + i + ": " + obj[i].oid);
      console.log("PAIR " + i + ": " + obj[i].cid);
    }
    
  </script>

</body>
</html

Output:

How to get values from JSON array in JavaScript

Source: stackoverflow.com

Another examples

Loop through the array and then parse the stringified JSON so that you can access the data array. Then simply loop that data array to get the value of each name property.

    var arr = [{
      "assetName": "LCT",
      "assetValue": "",
      "typeValueInput": "select",
      "valueInputSelect": null,
      "required": true,
      "valueInput": "{\"data\":[{\"name\":\"name1\",\"id\":\"12\"},{\"name\":\"name2\",\"id\":\"13\"},{\"name\":\"name3\",\"id\":\"14\"}]}"
    }];

    arr.forEach((arrObj) => {
      var jsonData = JSON.parse(arrObj.valueInput);
      jsonData.data.forEach(({name}) => console.log(name));
    });

To get only the CustomerName values, use the concept of the map()

var details = [
   {
      "customerDetails": [
         {
            "customerName": "John Smith",
            "customerCountryName": "US"
         }
      ]
   },
   {
      "customerDetails": [
         {
            "customerName": "David Miller",
            "customerCountryName": "AUS"
         }
      ]
   },
   {
      "customerDetails": [
         {
            "customerName": "Bob Taylor",
            "customerCountryName": "UK"
         }
      ]
   }
]
var allCustomerName = details.map(obj=>
obj.customerDetails[0].customerName);
console.log(allCustomerName);

Do comment if you have any doubts or suggestions on this JS JSON Array topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.