嵌套对象数组值

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

这将为您提供预期的输出。

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

您的代码的工作版本如下。这只是如何做到这一点的一个例子，但是在 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(''));