중첩 된 객체 배열 값

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과 같은 transpiler를 사용할 수있는 환경이있는 경우)을 사용하는 것이 바람직 할 수 있습니다. 어느 쪽이든, 이것은 배열에 추가하고 마지막에 빈 문자열에 조인하여 노드를 만듭니다. 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>