Alex
Alex

Reputation: 1606

Parse and search JSON file with jQuery

I’m trying to write some code to parse and search a JSON file for an industry. The code will be added to an autocomplete script and return items they were found (not relevant to to this question). I have the following JSON file:

{
  "sectors": [
    {
      "title": "Business, Finance & Technology",
      "subsectors": [
        {
          "title": "Finance and insurance",
          "industries": [
            {
              "name": "Retail banking",
              "name": "Insurance",
              "name": "Investment banking"
            }
          ],
          "title": "Business Services",
          "industries": [
            {
              "name": "Accounting & Audit",
              "name": "Recruitment",
              "name": "Legal services"
            }
          ]
        }
      ],
      "title": "Life & Consumer",
      "subsectors": [
        {
          "title": "Life Sciences",
          "industries": [
            {
              "name": "Biotechnology",
              "name": "Pharmaceutical",
              "name": "Medical supplies"
            }
          ],
          "title": "Healthcare",
          "industries": [
            {
              "name": "Surgery",
              "name": "Medicine",
              "name": "Nursery"
            }
          ]
        }
      ]
    }
  ]
}

And this code:

var q = 'Insurance';
$.getJSON('models/industries.json', function(data) {
    $.each(data, function(i, item) {
    if (item.sectors.subsectors.industries.search(new RegExp(q, "i")) != -1) {
      $('<li />').html(item.name).appendTo('body');
    }
  });
});

However, it’s not working.

I tried different variations:

if (item.name.search(new RegExp(q, "i")) != -1) {

This one throws an error Uncaught TypeError: Cannot call method 'search' of undefined

Any ideas?


EDIT: Thanks to @Arun P Johny below, I fixed the issues. There were issues with my JSON file: curly braces {} were needed for each industry, subsector, and sector. And I needed to iterate over each subsector and sector:

var q = 'Insurance',
    regex = new RegExp(q, "i");
$.getJSON('models/industries.json', function (data) {
    $.each(data.sectors, function (i, sector) {
        $.each(sector.subsectors, function (i, subsector) {
            $.each(subsector.industries, function (i, industry) {
                if (industry.name.search(regex) != -1) {
                    $('<li />').html(industry.name).appendTo('body');
                }
            })
        });
    });
});

Upvotes: 3

Views: 3250

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

You need to iterate over sectors, subsectors and industries arrays

var q = 'Insurance',
    regex = new RegExp(q, "i");
$.getJSON('models/industries.json', function (data) {
    $.each(data.sectors, function (i, sector) {
        $.each(sector.subsectors, function (i, subsector) {
            $.each(subsector.industries, function (i, industry) {
                if (industry.name.search(regex) != -1) {
                    $('<li />').html(industry.name).appendTo('body');
                }
            })
        });
    });
});

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337560

You need to loop over the sectors array, so the each code should be:

$.each(data.sectors, function(i, item) {
    if (item.subsectors.industries.search(new RegExp(q, "i")) != -1) {
        $('<li />').html(item.name).appendTo('body');
    }
});

Also, your item.name value will be undefined as you need to access item.subsectors[0].industries[0].name. The properties with [0] after them are arrays, which you will need to loop over if you need to retrieve all values from them. [0] will just get you the first value.

Upvotes: 1

Related Questions