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

Question

我浏览了很多关于 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"
          }
        }
      ]
    }
  }
}

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

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

我想读取 JSON 数据，从“Value”中提取项目：“name”、“displayURL”、“Snippet”（其中有多个，我认为 Value 是一个数组）然后在我的页面显示摘录。

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

<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 个项目

提前致谢。

查看我的 fiddle 当前进度：它只有一个结果 https://jsfiddle.net/q9bxrgy7/2/

更新：查看我的新 fiddle，它使用搜索 'dog'

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

Answer 1

您可以在某个变量中获取 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",
      "url": "https://www.microsoft.com/cognitive-services",
      "displayUrl": "https://www.microsoft.com/cognitive-services",
      "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>

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

How to take specific JSON data iteratively and display as HTML

javascript

json

loops

bing-api