如何在 jQuery 中从外部 API 输出 JSON 数据，就像我在控制台日志中看到的那样，在 HTML 中（在 jQuery 中格式化 JSON）

Posted 2023-05-08

【中文标题】如何在 jQuery 中从外部 API 输出 JSON 数据，就像我在控制台日志中看到的那样，在 HTML 中（在 jQuery 中格式化 JSON）

【英文标题】：How to output JSON data, from an external API, in jQuery like I see it in the console log, in HTML (formatting JSON in jQuery)

【发布时间】：2021-09-17 01:22:40

【问题描述】：

编辑：我运气不错

var items = [];

$.each(response.response.content, function(i, item)  
  $("#title").append(item.title + " ");

 );

我已连接到外部 API，可以在控制台日志中完美打印所有内容，但只能在我的 html 页面上以 JSON 格式打印。我很困惑为什么我不知道如何让它在我的页面上以相同的方式打印。

 <script>
 const settings = 
     "async": true,
     "crossDomain": true,
     "url": "https://learning-objects-v2.p.rapidapi.com/search?keywords=Excel&lang=en&type=video&sort=popularity&model=strict&max=10&page=0",
     "method": "GET",
     "headers": 
         "x-rapidapi-key": "12345678901234567890",
         "x-rapidapi-host": "learning-objects-v2.p.rapidapi.com"
     
 ;

 $.ajax(settings).done(function (response) 

  $('#demo').append(JSON.stringify(response))

 var items = [];

  $.each(response.response.content, function(i, item)  

 console.log(item);
  );
 );
 </script>

这里是一些 JSON

 "response":
 "content":[
 
 "title":"Normal distribution excel exercise | Probability and Statistics | Khan 
 Academy",
 "url":"https://www.youtube.com/watch?v=yTGEMoaWDCQ",
 "description":"(Long-26 minutes) Presentation on spreadsheet to show that the normal distribution approximates the binomial distribution for a large number of trials. Watch the next lesson: https://www.khanacademy.org/math/probability/statistics-inferential/normal_distribution/v/ck12-org-normal-distribution-probl...",
 "picture":"https://i.ytimg.com/vi/yTGEMoaWDCQ/hqdefault.jpg",
 "provider":[
 "YouTube"
 ],
 "bloom":[
 "discover"
 ],
 "type":[
 "Video"
 ],
 "level":-0.5,
  "learningTimeValue":26.07,
 "learningTimeUnit":"min"

这是控制台日志的示例

  title: "Excel Forecast Function Explained!", url: "https://www.youtube.com/watch?v=nRrZJpG_S7M", description: "This excel video tutorial provides a basic introdu…ted sales forecast in the future. My Website: ...", picture: "https://i.ytimg.com/vi/nRrZJpG_S7M/hqdefault.jpg", provider: Array(1), …
 bloom: ["discover"]
 description: "This excel video tutorial provides a basic introduction into the forecast function which can be used to predict a y value given an x value. It could be used to predict the population at a certain year, the value of a car at a given time, or the estimated sales forecast in the future. My Website: ..."
 learningTimeUnit: "min"
 learningTimeValue: 10.3
 level: -0.5
 picture: "https://i.ytimg.com/vi/nRrZJpG_S7M/hqdefault.jpg"
 provider: ["YouTube"]
 title: "Excel Forecast Function Explained!"
 type: ["Video"]
 url: "https://www.youtube.com/watch?v=nRrZJpG_S7M"

我知道我需要将 's 分配给它，并将其放入一个循环中，但我不确定具体如何，而且我打开的书并没有多大帮助。谢谢！

【问题讨论】：

预期的结果是什么？到目前为止，您尝试过什么来自己解决这个问题？

我想在页面上将结果显示为带有链接和图像的文本，以格式化 JSON，使其基本可读，到目前为止，我已经尝试了不同的 Ajax 调用等，一些不同的解决方案通过 SO，虽然没有任何工作，我现在正在浏览几本电子书，以及不同的循环，但我遇到了错误，只是未格式化的 json 或空白屏幕。

Edit 您的问题并在那里添加相关信息以及您最有希望的方法。

【参考方案1】：

您只需要使用keyname 来访问所需的值，即：title,pictures..etc。所以，在每个循环中获取这些值并将它们添加到生成的 html 中，最后将其附加到您的 DOM . 演示代码：

//just for demo ..suppose response variable have your response :
var response = 
  "response": 
    "content": [
      "title": "Normal distribution excel exercise | Probability and Statistics | Khan  Academy ",
      "url": "https://www.youtube.com/watch?v=yTGEMoaWDCQ",
      "description": "(Long-26 minutes) Presentation on spreadsheet to show that the normal distribution approximates the binomial distribution for a large number of trials. Watch the next lesson: https://www.khanacademy.org/math/probability/statistics-inferential/normal_distribution/v/ck12-org-normal-distribution-probl...",
      "picture": "https://i.ytimg.com/vi/yTGEMoaWDCQ/hqdefault.jpg",
      "provider": [
        "YouTube"
      ],
      "bloom": [
        "discover"
      ],
      "type": [
        "Video"
      ],
      "level": -0.5,
      "learningTimeValue": 26.07,
      "learningTimeUnit": "min",
    , 
      "title": "Normal distribution excel exercise | Probability and Statistics | Khan  Academy2222 ",
      "url": "https://www.youtube.com/watch?v=yTGEMoaWDCQ",
      "description": "(Long-26 minutes) Presentation on spreadsheet to show that the normal distribution approximates the binomial distribution for a large number of trials. Watch the next lesson: https://www.khanacademy.org/math/probability/statistics-inferential/normal_distribution/v/ck12-org-normal-distribution-probl...",
      "picture": "https://i.ytimg.com/vi/yTGEMoaWDCQ/hqdefault.jpg",
      "provider": [
        "YouTube"
      ],
      "bloom": [
        "discover"
      ],
      "type": [
        "Video"
      ],
      "level": -0.5,
      "learningTimeValue": 26.07,
      "learningTimeUnit": "min",
     
    ]
  

var html = ""
$.each(response.response.content, function(i, item) 
  //just for demo ..
  html += `<div><img src="$item.picture"/><a href="$item.url">$item.title</a></div>`
);
$("#somediv").html(html)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="somediv"></div>