ネストされたオブジェクトの配列値

Question

jqueryを使用して 'searchResults'をループし、 'SearchResult'をループし、 'SearchResultItems'にループして値の追加を開始します。次に、「LocationDetails」を探し、Stateのネストされた値をループして、それぞれの 'DisplayTitle'の状態を表示します。

その説明がうまく書かれていない場合は、ここにコードがあります。

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",  
     }] 
     }  
     }, 
    ] 
    } 
}]; 

オブジェクトの配列をナビゲートする際の私の現在の試みです。

$.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

コードの動作バージョンは次のとおりです。これはどのように行うのかの一例にすぎませんが、Set in ES6を使用することができます（環境が許可されている場合、または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>