Nested Object array values

Question

I am utilizing jquery to loop thru 'searchResults' and looping thru 'SearchResult' and then looping again into 'SearchResultItems' to begin appending values. I then locate 'LocationDetails' and loop thru the nested values of State to display states for each 'DisplayTitle'.

If that description isn't well written, here is the code.

searchResults = [{
  "SearchResult": {
    "SearchResultItems": [{
        "MatchedObjectDescriptor": {
        "URI":"http://...",
        "DisplayTitle": "Boss Person",
        "LocationDetails": [{
            "State": "California",
          "CityName": "San Francisco County, California",
        },{
          "State": "Colorado",
          "LocationName": "Denver, Colorado",
        },{
            "State": "California",
          "CityName": "Los Angeles, California",      
        }]
      }
    },{
        "MatchedObjectDescriptor": {
        "URI":"http://...",
        "DisplayTitle": "Assistant",
        "LocationDetails": [{
            "State": "Colorado",
          "CityName": "Denver, Colorado",
        },{
          "State": "Colorado",
          "LocationName": "Denver, Colorado",
        },{
            "State": "California",
          "CityName": "Sacramento, California",      
        }]
      }    
        },
    ]
   }
}];

My current attempt at navigating the array of objects.

$.each(searchResults, function(key,value){
    $.each(value.SearchResult.SearchResultItems,function(key,value){
        var items = value.MatchedObjectDescriptor,
            title = items.DisplayTitle;
        $.each(items.LocationDetails, function(key,value){
            var states = value.State;
            $(".content").append("<ul><li>'" + title + "'<ul><li>'" + states + "'</li></ul></li></ul>");
        });
    });
});

See my work here so far with the wrong output: https://jsfiddle.net/arkjoseph/esvgcos7/15/

I am looking for this output filtering duplicate states and not having a different title for each state that is available in the object.

• Boss person
  • California
  • Colorado
• Assistant
  • Colorado
  • California

Answer 1

This gives you expected output .

 searchResults = [{ "SearchResult": { "SearchResultItems": [{ "MatchedObjectDescriptor": { "URI": "http://...", "DisplayTitle": "Boss Person", "LocationDetails": [{ "State": "California", "CityName": "San Francisco County, California", }, { "State": "Colorado", "LocationName": "Denver, Colorado", }, { "State": "California", "CityName": "Los Angeles, California", }] } }, { "MatchedObjectDescriptor": { "URI": "http://...", "DisplayTitle": "Assistant", "LocationDetails": [{ "State": "Colorado", "CityName": "Denver, Colorado", }, { "State": "Colorado", "LocationName": "Denver, Colorado", }, { "State": "California", "CityName": "Sacramento, California", }] } }, ] } }]; var states = ""; $.each(searchResults, function(key, value) { $.each(value.SearchResult.SearchResultItems, function(key, value) { var items = value.MatchedObjectDescriptor, title = items.DisplayTitle; var s = []; var li = ""; $.each(items.LocationDetails, function(key, value) { var states = value.State; if (!s.includes(states)) { s.push(states); li += ("<li>" + states + "</li>") } }); $(".content").append("<ul><li>" + title + "<ul>" + li + "</ul></li></ul>"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div class="content"></div> actual json endpoint: <a target="_blank" href="https://pastebin.com/embed_js/dRfMedYb">Here</a> 

Answer 2

A working version of your code is as follows. This is just one example of how to do it, but using Set in ES6 (if you have an environment where it's permitted or are using a transpiler like Babel) might be desirable. Either way, this just appends to an array and joins on an empty string at the end to create your nodes. Using jQuery to build your elements also will likely be more scalable down the road, but for a small app the following works.

searchResults = [{
  "SearchResult": {
    "SearchResultItems": [{
        "MatchedObjectDescriptor": {
        "URI":"http://...",
        "DisplayTitle": "Boss Person",
        "LocationDetails": [{
            "State": "California",
          "CityName": "San Francisco County, California",
        },{
          "State": "Colorado",
          "LocationName": "Denver, Colorado",
        },{
            "State": "California",
          "CityName": "Los Angeles, California",      
        }]
      }
    },{
        "MatchedObjectDescriptor": {
        "URI":"http://...",
        "DisplayTitle": "Assistant",
        "LocationDetails": [{
            "State": "Colorado",
          "CityName": "Denver, Colorado",
        },{
          "State": "Colorado",
          "LocationName": "Denver, Colorado",
        },{
            "State": "California",
          "CityName": "Sacramento, California",      
        }]
      }    
        },
    ]
   }
}];

var states = [];
var output = [];
$.each(searchResults, function(key,value){
    output.push("<ul>")
    $.each(value.SearchResult.SearchResultItems,function(key,value){
    var items = value.MatchedObjectDescriptor,
            title = items.DisplayTitle;
        output.push("<li>" + title + "</li>")
        output.push("<ul>")
        $.each(items.LocationDetails, function(key,value){
            if (states.filter(s => s == value.State).length) return;
          states.push(value.State)
          output.push("<li>" + value.State + "</li>")
        });
        states = []
        output.push("</ul>")
  });
  output.push('</ul>')
});
$(".content").append(output.join(''));