得到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數據顯示正確

回答

相關問題