Search code examples
javascriptarraysjsonecmascript-5

How to find and match a specific value in a JSON object array?


I've seen lots of similar questions, but nothing that seems to exactly match what I'm trying to do. I was able to get the code working, but I feel it needs to be refactored and I'm not sure how to do this?

I have two for in loops that goes through the JSON to get each of the objects that I call item. That worked, but I was unable to do another loop or figure out a way to get one of the values of the item based on a specific property. So I created a function from some code I found here: Javascript: find an object in an array based on the object's property

My question is, is this the proper way to code this or is there a better way by another nested loop somehow, which is what I was trying originally?

Here is the working Plunker

Code:

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.items = {"GROUP":[
            {"name":"Plan A","value":[163],"displayed":true},
            {"name":"Plan B","value":[497],"displayed":true},
            {"name":"Plan C","value":[324],"displayed":true},
            {"name":"Plan D","value":[476],"displayed":true},
            {"name":"Plan E","value":[343],"displayed":true}]};

     for (var key in $scope.items) {
       console.log("key is: " + key + " " + JSON.stringify($scope.items[key]));

        var item = $scope.items[key];
        for(var itemKey in item){
          //item is part of an object array
          console.log("item is an array: " + JSON.stringify(item)); 

          //itemKey is the number
          console.log("itemKey is: " + itemKey); 

          //Each item in the GROUP
          console.log("Each item: " + JSON.stringify(item[itemKey]));

          //The names in the items.
          console.log("The item name is: " + JSON.stringify(item[itemKey].name));

        }
        var objItem = findObjectByKey(item, 'name', 'Plan B');
        console.log("objItem is: " + JSON.stringify(objItem));
        console.log("objItem name is: " + JSON.stringify(objItem.name));
        console.log("objItem value is: " + JSON.stringify(objItem.value));
        console.log("objItem displayed is: " + JSON.stringify(objItem.displayed));
      }

      function findObjectByKey(array, key, value) {
          for (var i = 0; i < array.length; i++) {
              if (array[i][key] === value) {
                  return array[i];
              }
          }
          return null;
      }
});

Here is the console output

key is: GROUP [
{"name":"Plan A","value":[163],"displayed":true},
{"name":"Plan B","value":[497],"displayed":true},
{"name":"Plan C","value":[324],"displayed":true},
{"name":"Plan D","value":[476],"displayed":true},
{"name":"Plan E","value":[343],"displayed":true}]

itemKey is: 0
itemKey is: 1
itemKey is: 2
itemKey is: 3
itemKey is: 4
itemKey is: 5

The item name is:  "Plan A"
The item name is:  "Plan B"
The item name is:  "Plan C"
The item name is:  "Plan D"
The item name is:  "Plan E"

This is the data I wanted to select.

objItem is: { "name":"Plan B","value":[497],"displayed":true }

objItem name is: "Plan B"

objItem value is: [497]

objItem displayed is: true


Solution

    • Assuming you have only one GROUP, you can use the function find along with the function some as follow.

    let items = {"GROUP":[            {"name":"Plan A","value":[163],"displayed":true},            {"name":"Plan B","value":[497],"displayed":true},            {"name":"Plan C","value":[324],"displayed":true},            {"name":"Plan D","value":[476],"displayed":true},            {"name":"Plan E","value":[343],"displayed":true}]},
        key = 'Plan B',
        object = items.GROUP.find(o => Object.entries(o).some(([k, value]) => k === 'name' && value === key));
    
    console.log(object);
    .as-console-wrapper { max-height: 100% !important; top: 0; }