Question

问题，为什么以及如何让我的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>

Answer 1

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

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

作为一般经验法则，除非您绝对需要，否则永远不要设置HTML - 特别是如果它来自第三方来源。

＆＃13;

$(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);
    });
  });
});

＆＃13;

<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>

＆＃13;

Answer 2

您想要的Array#map()

没有方法data.title()

缩小版本：

 $.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

Answer 3

$ .getJSON中返回的数据是一组对象。当你安慰回应时，你可能已经清楚了。

现在，循环访问数据，您可以访问每个对象并将标题插入li。

请参阅以下示例代码：

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

获取json api数据以显示正确

3 个答案: