How to search a nested JSON array with jQuery?

Question

I'm trying to iterate through an array of 'Machine' objects within a JSON file (sample object pasted below). Each object contains a nested array of software installed which I'd like to be able to search through dynamically via an input field. i.e. Identify a match between a user input string such as 'Unreal' and a machine that has the software installed where the name contains 'Unreal'.

I've already created the below algorithm to search through other objects in the top level of each JSON object, I assume it will be something similar but trial and error has not served me too well so far!

Simply adding value.software.product_name to retrieve each software name does not work considering the value is a level deeper in the object.

$.getJSON('../assets/mbid_directory.json', function(data){
        $.each(data, function(key, value){
          if(value.general.building_name.search(expression) != -1 || value.general.room_name.search(expression) != -1 || value.hardware.cpu.search(expression) != -1 ||
            value.hardware.memory.search(expression) != -1 || value.hardware.gpu.search(expression) != -1 || value.hardware.screen_resolution.search(expression) != -1 ||
              value.hardware.notable_peripherals.search(expression) != -1) {
                //do something
          }
        })
      })

  {
    "general": {
      "machine_id": 2,
      "machine_ip_address": "192.168.0.18",
      "building_name": "Mellor",
      "room_name": "S509",
      "map_location": {
        "lat": "-25.363",
        "lng": "131.044"
      }
    },
    "hardware": {
      "cpu": "AMD Ryzen 5 3570K 3.40GHz",
      "memory": "8GB DDR3 2600Ghz",
      "gpu": "Nvidia GTX 790 Ti 3GB",
      "screen_resolution": "1920x1200",
      "notable_peripherals": "Dual-monitors"
    },
    "software": [
      {
        "product_title": "Windows 10 Education",
        "product_version": "6.2.9200.16384"
      },
      {
        "product_title": "Unreal Engine Games Studio",
        "product_version": "8.4.2"
      },
      {
        "product_title": "Microsoft Visual Studio 2017",
        "product_version": "5.5.106.3"
      }
    ]
  },

Any guidance would be appreciated!

@jeprubio Yes, that's the stumbling block. I'm unsure how to iterate through its objects in the same if statement researching the general and hardware values. — Alex
– Alex, Commented Jun 6, 2019 at 9:52

virgiliogm · Accepted Answer · 2019-06-06 10:05:19Z

You can use filter on the software array, for example:

$.getJSON('../assets/mbid_directory.json', function(data){
    $.each(data, function(key, value){
        if (value.general.building_name.search(expression) != -1 ||
            value.general.room_name.search(expression) != -1 ||
            value.hardware.cpu.search(expression) != -1 ||
            value.hardware.memory.search(expression) != -1 ||
            value.hardware.gpu.search(expression) != -1 ||
            value.hardware.screen_resolution.search(expression) != -1 ||
            value.hardware.notable_peripherals.search(expression) != -1 ||
            value.software.filter(function(elem){
              return elem.product_title.search(expression) != -1 ||
                     elem.product_version.search(expression) != -1
              }).length > 0) {
              console.log("Match!");
        }
    });
});

Chintan Kotadiya · Accepted Answer · 2019-06-06 10:01:58Z

0

You can search text from array of object using a Javascript filter and includes a method, You can do it simplified as per follow.

let machineObj = JSON.parse(`{
  "general": {
    "machine_id": 2,
    "machine_ip_address": "192.168.0.18",
    "building_name": "Mellor",
    "room_name": "S509",
    "map_location": {
      "lat": "-25.363",
      "lng": "131.044"
    }
  },
  "hardware": {
    "cpu": "AMD Ryzen 5 3570K 3.40GHz",
    "memory": "8GB DDR3 2600Ghz",
    "gpu": "Nvidia GTX 790 Ti 3GB",
    "screen_resolution": "1920x1200",
    "notable_peripherals": "Dual-monitors"
  },
  "software": [
    {
      "product_title": "Windows 10 Education",
      "product_version": "6.2.9200.16384"
    },
    {
      "product_title": "Unreal Engine Games Studio",
      "product_version": "8.4.2"
    },
    {
      "product_title": "Microsoft Visual Studio 2017",
      "product_version": "5.5.106.3"
    }
  ]
}`);

let textSearch = 'Unreal';
let result = (machineObj.software).filter(o => o.product_title.includes(textSearch));
console.log(result);

answered Jun 6, 2019 at 10:01

Chintan Kotadiya

1,4251 gold badge12 silver badges19 bronze badges

2 Comments

Alex Over a year ago

I appreciate the response, but this is a hardcoded, procedural solution to only the example scenario I gave. The user input could be a range of different results, not just 'Unreal'.

Chintan Kotadiya Over a year ago

@Alex You can change the text by this code of line let textSearch = 'Unreal';

Collectives™ on Stack Overflow

How to search a nested JSON array with jQuery?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related