嵌套的对象数组值

Question

我正在利用jQuery来循环'searchResults'并循环'SearchResult'，然后再次循环到'SearchResultItems'开始附加值。然后，我找到'LocationDetails'并通过嵌套的状态值来循环显示每个'DisplayTitle'的状态。

如果描述写得不好，这里是代码。我的当前尝试导航对象数组。

$.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>"); 
     }); 
    }); 
}); 

看到我的工作到这里为止了错误的输出：https://jsfiddle.net/arkjoseph/esvgcos7/15/

我找的这个输出滤波重复的状态，并没有因为这是在对象中可用的每个状态不同的标题。

• 老板人
  • 加州
  • 科罗拉多
• 助理
  • 科罗拉多
  • 加州

Answer 1

你的代码的工作版本如下。这只是一个例子，但如果使用ES6中的Set（如果你有一个允许使用的环境或使用像Babel这样的转译器）可能是可取的。无论哪种方式，这只是附加到一个数组，并在最后加入一个空字符串来创建节点。使用jQuery构建您的元素也可能会更具可扩展性，但对于小型应用程序，以下方法可行。

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('')); 

Answer 2

这给你预计输出。

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>