Javascript 获取json api数据以正确显示_Javascript_Html_Json_Rest_Api

Javascript 获取json api数据以正确显示

javascript html json rest api

Javascript 获取json api数据以正确显示,javascript,html,json,rest,api,Javascript,Html,Json,Rest,Api,问题：为什么以及如何显示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 $(docu

问题：为什么以及如何显示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.');
  });
});

$（文档）.ready（函数（）{
$（“#获取数据”）。单击（函数（）{
var showData=$（“#显示数据”）；
$.getJSON（'https://some api'函数（数据）{
控制台日志（数据）；
变量项=data.title（函数（项）{
返回标题；
});
showData.empty（）；
if（项目长度）{
var content=''+items.join（'
'）+''；
var list=$（''）.html（内容）；
showData.append（列表）；
}
});
text（'加载JSON文件'）；
});
});

然后我有一个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>

您需要迭代数据中的项来构建HTML，然后将其附加到

showData

div

为了安全起见，我还稍微改变了您构建

的方式。如果将

的HTML设置为从

数据返回的每个项目的标题属性，并且标题包含恶意HTML/脚本，则您的应用程序已成功受到XSS攻击
一般来说，除非必须设置HTML，否则千万不要设置HTML，特别是如果它来自第三方源代码

$（文档）.ready（函数（）{
$（“#获取数据”）。单击（函数（）{
var showData=$（“#显示数据”）；
$.getJSON（'https://some api'函数（数据）{
showData.empty（）；
var items=data.map（函数（elem）{
返回$（“”{
文本：elem.title
});
});
变量列表=$（“”）。追加（项目）；
showData.append（列表）；
});
});
});
没有您想要的方法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);
    }
  });

$.getJSON（'https://some api'函数（数据）{
//将标题属性映射到展开数组中
var items=data.map（函数（项）{
返回项目名称；
});
if（项目长度）{
var content=''+items.join（'
'）+''；
var list=$（''）.html（内容）；
showData.append（列表）；
}
});

以$返回的数据。getJSON是对象的集合。当你安慰对方时，你可能已经明白了这一点
现在，通过数据循环，您可以访问每个对象并将标题插入到li中
请参见下面的示例代码：
data.map(function(obj) {
  console.log(obj.title) // use this in your <li>
})

data.map（函数（obj）{
console.log（obj.title）//在
})
在本例中，我看不出我在哪里调用外部API。唯一真正的变化是var items=data.map（）
而不是var items=data.title（）
，以及如何将其返回为item.title
。。。如果API返回的数据的title属性中返回恶意html，那么这里会发生什么？现在您有了XSS。