获取 json api 数据以正确显示答案

【问题标题】：get json api data to display correct获取 json api 数据以正确显示
【发布时间】：2017-04-25 15:46:55
【问题描述】：

问题，为什么以及如何让我的 json api 数据显示。显示我的 api 信息

我是 api 新手，正在尝试

json 数据

[{"title":"One article - API 1 - 2017-04-25 15:43:20"},{"title":"Another article - API 1 - 2017-04-25 15:43:20"},{"title":"Great article - API 1 - 2017-04-25 15:43:20"}]

我有一个小的 js 文件，我用它来获取我的 api

$(document).ready(function () {
  $('#get-data').click(function () {
    var showData = $('#show-data');

    $.getJSON('https://some api ', function (data) {
      console.log(data);

      var items = data.title (function (item) {
        return title;
      });

      showData.empty();

      if (items.length) {
        var content = '<li>' + items.join('</li><li>') + '</li>';
        var list = $('<ul />').html(content);
        showData.append(list);
      }
    });

    showData.text('Loading the JSON file.');
  });
});

然后我有一个 html 部分来显示 api 信息 onlick

<body>
  <a href="#" id="get-data">Get JSON data</a>
    <div id="show-data"></div>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="example.js"></script>


   </body>

【问题讨论】：

标签： javascript html json rest api

【解决方案1】：

您需要遍历数据中的项目以构建您的 HTML，然后将其附加到 showData div。

出于安全目的，我还稍微更改了您构建<li> 的方式。如果您将<li> 的HTML 设置为等于从data 返回的每个项目的标题属性，并且标题包含恶意HTML/脚本，则您的应用程序已成功受到XSS 攻击的破坏。

作为一般经验法则，除非绝对必要，否则永远不要设置 HTML——尤其是当它来自第三方来源时。

$(document).ready(function() {
  $('#get-data').click(function() {
    var showData = $('#show-data');
    $.getJSON('https://some api ', function(data) {
      showData.empty();
      var items = data.map(function(elem) {
        return $("<li />", {
          text: elem.title
        });
      });

      var list = $('<ul />').append(items);
      showData.append(list);
    });
  });
});

<a href="#" id="get-data">Get JSON data</a>
<div id="show-data"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="example.js"></script>

【讨论】：

【解决方案2】：

没有你想要的方法data.title()Array#map()

缩小版：

 $.getJSON('https://some api ', function(data) {
    // map title properties into flattened array
    var items = data.map(function(item) {
      return item.title;
    });

    if (items.length) {
      var content = '<li>' + items.join('</li><li>') + '</li>';
      var list = $('<ul />').html(content);
      showData.append(list);
    }
  });

DEMO

【讨论】：

在这个例子中我看不到我在哪里调用外部 api
唯一真正的变化是 var items = data.map() 而不是 var items = data.title() 以及它是如何返回为 item.title ... 其他一切都一样
如果在API返回的数据的title属性中返回恶意html会发生什么？你现在有了 XSS。

【解决方案3】：

$.getJSON 返回的数据是对象的集合。在您安慰回复时，您可能已经很清楚了。

现在，遍历数据，您可以访问每个对象并将标题插入到 li 中。

查看下面的示例代码：

data.map(function(obj) {
  console.log(obj.title) // use this in your <li>
})

【讨论】：