得到json api数据显示正确

问题，为什么以及如何让我的json api数据显示。显示我的API信息来源得到json 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"}]

我有一个即时通讯使用让我的API小js文件

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

来源

2017-04-25 Beep

-1

没有方法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

来源

2017-04-25 15:57:35 charlietfl

在这个例子中我看不到其中i调用外部API – Beep

唯一真正的变化是'VAR项= data.map（）'代替'VAR项= data.title（）'以及如何返回为'item.title' ...其他所有将是相同的 – charlietfl

如果在API返回的数据的title属性中返回恶意html，这里会发生什么？你现在有XSS。 – mhodges

您需要迭代数据中的项目以构建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>

来源

2017-04-25 15:56:18 mhodges

-1

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

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

请参见下面的样本代码：

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

来源

2017-04-25 15:57:49 anusreemn

得到json api数据显示正确

回答

相关问题