如何迭代地获取特定的JSON数据并显示为HTML

问题描述

我在SO上浏览了许多类似的帖子，用户在其中询问有关如何在客户端显示JSON数据的问题。我一直在努力的是，大多数示例都在使用相当简单的JSON数据。我正在使用Bing网络搜索API，并已成功设法调用该API并接收了JSON响应数据。

下面的示例响应：请注意，这只是返回一个结果，完整的响应中将会有很多结果。

result = {
 "_type": "SearchResponse","queryContext": {
    "originalQuery": "Microsoft Cognitive Services"
  },"webPages": {
    "webSearchUrl": "https://www.bing.com/search?q=Microsoft+cognitive+services","totalEstimatedMatches": 22300000,"value": [
      {
        "id": "https://api.cognitive.microsoft.com/api/v7/#WebPages.0","name": "Microsoft Cognitive Services","url": "https://www.microsoft.com/cognitive-services","displayUrl": "https://www.microsoft.com/cognitive-services","snippet": "Knock down barriers between you and your ideas. Enable natural and contextual interaction with tools that augment users' experiences via the power of machine-based AI. Plug them in and bring your ideas to life.","deepLinks": [
          {
            "name": "Face","url": "https://azure.microsoft.com/services/cognitive-services/face/","snippet": "Add facial recognition to your applications to detect,identify,and verify faces using a Face service from Microsoft Azure. ... Cognitive Services; Face service;"
          },{
            "name": "Text Analytics","url": "https://azure.microsoft.com/services/cognitive-services/text-analytics/","snippet": "Cognitive Services; Text Analytics API; Text Analytics API . Detect sentiment,... you agree that Microsoft may store it and use it to improve Microsoft services,..."
          },{
            "name": "Computer Vision API","url": "https://azure.microsoft.com/services/cognitive-services/computer-vision/","snippet": "Extract the data you need from images using optical character recognition and image analytics with Computer Vision APIs from Microsoft Azure."
          },{
            "name": "Emotion","url": "https://www.microsoft.com/cognitive-services/emotion-api","snippet": "Cognitive Services Emotion API - microsoft.com"
          },{
            "name": "Bing Speech API","url": "https://azure.microsoft.com/services/cognitive-services/speech/","snippet": "Add speech recognition to your applications,including text to speech,with a speech API from Microsoft Azure. ... Cognitive Services; Bing Speech API;"
          },{
            "name": "Get Started for Free","url": "https://azure.microsoft.com/services/cognitive-services/","snippet": "Add vision,speech,language,and kNowledge capabilities to your applications using intelligence APIs and SDKs from Cognitive Services."
          }
        ]
      }
    ]
  },"relatedSearches": {
    "id": "https://api.cognitive.microsoft.com/api/v7/#RelatedSearches","value": [
      {
        "text": "microsoft bot framework","displayText": "microsoft bot framework","webSearchUrl": "https://www.bing.com/search?q=microsoft+bot+framework"
      },{
        "text": "microsoft cognitive services youtube","displayText": "microsoft cognitive services youtube","webSearchUrl": "https://www.bing.com/search?q=microsoft+cognitive+services+youtube"
      },{
        "text": "microsoft cognitive services search api","displayText": "microsoft cognitive services search api","webSearchUrl": "https://www.bing.com/search?q=microsoft+cognitive+services+search+api"
      },{
        "text": "microsoft cognitive services news","displayText": "microsoft cognitive services news","webSearchUrl": "https://www.bing.com/search?q=microsoft+cognitive+services+news"
      },{
        "text": "ms cognitive service","displayText": "ms cognitive service","webSearchUrl": "https://www.bing.com/search?q=ms+cognitive+service"
      },{
        "text": "microsoft cognitive services text analytics","displayText": "microsoft cognitive services text analytics","webSearchUrl": "https://www.bing.com/search?q=microsoft+cognitive+services+text+analytics"
      },{
        "text": "microsoft cognitive services toolkit","displayText": "microsoft cognitive services toolkit","webSearchUrl": "https://www.bing.com/search?q=microsoft+cognitive+services+toolkit"
      },{
        "text": "microsoft cognitive services api","displayText": "microsoft cognitive services api","webSearchUrl": "https://www.bing.com/search?q=microsoft+cognitive+services+api"
      }
    ]
  },"rankingResponse": {
    "mainline": {
      "items": [
        {
          "answerType": "WebPages","resultIndex": 0,"value": {
            "id": "https://api.cognitive.microsoft.com/api/v7/#WebPages.0"
          }
        }
      ]
    },"sidebar": {
      "items": [
        {
          "answerType": "RelatedSearches","value": {
            "id": "https://api.cognitive.microsoft.com/api/v7/#RelatedSearches"
          }
        }
      ]
    }
  }
}

接下来我要做的是显示搜索结果中每个值的特定元素。值是每个搜索结果的数组位置。

即result.webPages.value[0].name = Microsoft认知服务

我想读取JSON数据，从“值”（其中有多个且我认为是数组的值）中提取以下项：“名称”，“ displayURL”，“代码段” 然后在我的页面中显示摘录。

到目前为止，我正在做什么以在页面中显示某些数据：

<html>
<!-- Ideally should be only one dive that has all the results-->
  <div id="result1"></div>
  <div id="result2"></div>
  <div id="result3"></div>
</html>

<script>
// ideally should be a for loop instead of writing same code again
   document.getElementById("result1").innerHTML = "<a href='"+result.webPages.value[0].displayUrl+"'>"+result.webPages.value[0].name+"</a>" +"<br>" + result.webPages.value[0].snippet;
   document.getElementById("result2").innerHTML = "<a href='"+result.webPages.value[1].displayUrl+"'>"+result.webPages.value[1].name+"</a>" +"<br>" + result.webPages.value[1].snippet;
   document.getElementById("result3").innerHTML = "<a href='"+result.webPages.value[2].displayUrl+"'>"+result.webPages.value[2].name+"</a>" +"<br>" + result.webPages.value[2].snippet;
</script>

我知道我需要某种循环。遍历JSON，从每个Value [i]中获取每个名称，displayUrl和代码段。然后附加这些值，以使您在使用bing搜索或google搜索页面进行网络搜索时看到的内容与之相似。

for (var i = 0; i < result.value.length; i++) {
  var resultItemsName = resultItems[i].name;
  var resultItemsUrl = resultItems[i].displayUrl;
  var resultItemsDescription = resultItems[i].snippet;
  document.getElementById('display-results') // push the extracts to the div called display-results
}

我不确定我需要做什么，因为每个“值”都需要3个项目

谢谢。

请参阅我的小提琴以了解当前的进展：它只有一个结果 https://jsfiddle.net/q9bxrgy7/2/

更新：请参阅我使用搜索“狗”的小提琴

https://jsfiddle.net/q9bxrgy7/3/

解决方法

您可以在某个变量中获得result.webPages.value，然后使用for-loop遍历该数据，然后使用+=将html附加到某个变量中，然后最终使用innerHTML在您的div中分配此生成的html。

演示代码 ：

var result = {
  "_type": "SearchResponse","queryContext": {
    "originalQuery": "Microsoft Cognitive Services"
  },"webPages": {
    "webSearchUrl": "https://www.bing.com/search?q=Microsoft+cognitive+services","totalEstimatedMatches": 22300000,"value": [{
      "id": "https://api.cognitive.microsoft.com/api/v7/#WebPages.0","name": "Microsoft Cognitive Services","url": "https://www.microsoft.com/cognitive-services","displayUrl": "https://www.microsoft.com/cognitive-services","snippet": "Soemthings"

    },{
      "id": "https://api.cognitive.microsoft.com/api/v7/#WebPages.0","name": "Microsoft Cognitive Services1","snippet": "Soemthings1"

    }]
  }
}


var results = result.webPages.value //get value array
var html = ""; //declare this
for (var i = 0; i < results.length; i++) {
  var resultItemsName = results[i].name;
  var resultItemsUrl = results[i].displayUrl;
  var resultItemsDescription = results[i].snippet;
  html += "<div><a href='" + resultItemsUrl + "'>" + resultItemsName + "</a>" + "<br>" + resultItemsDescription + "</div>"; //append new rows 

}
document.getElementById('display-results').innerHTML = html //add htmls to divs

<div id="display-results"></div>

bing-api javascript json loops

如何迭代地获取特定的JSON数据并显示为HTML

问题描述

解决方法

相关问答