Javascript 嵌套对象数组值

我正在利用jquery循环通过“searchResults”，循环通过“SearchResult”，然后再次循环到“SearchResultItems”，开始添加值。然后我找到'LocationDetails'并循环通过嵌套的状态值来显示每个'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>");
        });
    });
});

$。每个（搜索结果、函数（键、值）{
$.each（value.SearchResult.SearchResultItems，函数（键，值）{
变量项=value.MatchedObjectDescriptor，
title=items.DisplayTitle；
$.each（items.LocationDetails，函数（键，值）{
var states=value.State；
$（“.content”）。追加（“
”+title+”
“+states+”
”）；
});
});
});

到目前为止，我在这里的工作输出错误：

我正在寻找这个过滤重复状态的输出，并且对于对象中可用的每个状态没有不同的标题

• 老板
  • 加州
  • 科罗拉多州
• 助手
  • 科罗拉多州
  • 加州

---

代码的工作版本如下所示。这只是一个如何实现的示例，但是在ES6中使用Set（如果您有一个允许使用Set的环境，或者正在使用像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(''));

搜索结果=[{
“搜索结果”：{
“SearchResultItems”：[{
“匹配对象描述符”：{
“URI”：http://...",
“显示标题”：“老板人”，
“位置详细信息”：[{
“州”：“加利福尼亚州”，
“城市名称”：“加利福尼亚州旧金山县”，
},{
“州”：“科罗拉多州”，
“地点名称”：“科罗拉多州丹佛市”，
},{
“州”：“加利福尼亚州”，
“城市名称”：“加利福尼亚州洛杉矶”，
}]
}
},{
“匹配对象描述符”：{
“URI”：http://...",
“显示标题”：“助理”，
“位置详细信息”：[{
“州”：“科罗拉多州”，
“城市名称”：“科罗拉多州丹佛市”，
},{
“州”：“科罗拉多州”，
“地点名称”：“科罗拉多州丹佛市”，
},{
“州”：“加利福尼亚州”，
“城市名称”：“加利福尼亚州萨克拉门托”，
}]
}    
},
]
}
}];
var状态=[]；
var输出=[]；
$.each（搜索结果、函数（键、值）{
输出推送（“
”）
$.each（value.SearchResult.SearchResultItems，函数（键，值）{
变量项=value.MatchedObjectDescriptor，
title=items.DisplayTitle；
输出.推送（“
”+标题+“
”）
输出推送（“
”）
$.each（items.LocationDetails，函数（键，值）{
if（states.filter（s=>s==value.State）.length）返回；
states.push（value.State）
output.push（“
”+value.State+“
”）
});
国家=[]
输出。推送（“
”）
});
输出.推送（“
”）
});
$（“.content”）.append（output.join（“”））；

这将提供预期的输出

搜索结果=[{
“搜索结果”：{
“SearchResultItems”：[{
“匹配对象描述符”：{
“URI”：http://...",
“显示标题”：“老板人”，
“位置详细信息”：[{
“州”：“加利福尼亚州”，
“城市名称”：“加利福尼亚州旧金山县”，
}, {
“州”：“科罗拉多州”，
“地点名称”：“科罗拉多州丹佛市”，
}, {
“州”：“加利福尼亚州”，
“城市名称”：“加利福尼亚州洛杉矶”，
}]
}
}, {
“匹配对象描述符”：{
“URI”：http://...",
“显示标题”：“助理”，
“位置详细信息”：[{
“州”：“科罗拉多州”，
“城市名称”：“科罗拉多州丹佛市”，
}, {
“州”：“科罗拉多州”，
“地点名称”：“科罗拉多州丹佛市”，
}, {
“州”：“加利福尼亚州”，
“城市名称”：“加利福尼亚州萨克拉门托”，
}]
}
}, ]
}
}];
var states=“”；
$.each（搜索结果、函数（键、值）{
$.each（value.SearchResult.SearchResultItems，函数（键，值）{
变量项=value.MatchedObjectDescriptor，
title=items.DisplayTitle；
var s=[]；
var li=“”；
$.each（items.LocationDetails，函数（键，值）{
var states=value.State；
如果（！s.包括（州））{
s、 推动（国家）；
li+=（“
”+状态+“
”）
}
});
$（“.content”）。追加（“
”+标题+”
“+li+”
”）；
});
});

实际的json端点：
谢谢你Anumul Hasan，很好用。我修改了它，用一个段落来表示所有的州，除了用逗号分隔最后一个州之外。我该怎么做？你希望它是段落而不是列表？这是你的意思吗？例如加州、科罗拉多州，使用s.join（“，”）代替变量li。我们不再需要变量li了。最后一行是这样的-$（“.content”）.append（“
”+title+”
“+s.join（“，”+”
”）；像这样使用indexOf，我认为这在所有平台上都是受支持的<代码>如果（s.indexOf）（州）为什么投反对票？