2017-04-03 93 views
-1

我試圖從特定網站輸出json,並在我的html網站上顯示該信息。例如,這將是對網站example.com的JSON,把json從一個網站上顯示在html網站上

[ { "nickname":"name", "votes":"3" }, { "nickname":"name", "votes":"2" }, { "nickname":"name", "votes":"2" }] 

如何我能得到來自example.com的數據,並在我的html網頁mydomain.com顯示呢?任何幫助將是驚人的!

+0

你可以使用jQuery與jQuery ..看看這裏http://api.jquery.com/jquery.ajax/ https://www.w3schools.com/jquery/ajax_ajax.asp – winter

回答

-1

只是將它解析爲json對象,然後運行一個循環來顯示它,然後運行以下示例。

var text = '{"employees":[' + 
 
'{"firstName":"John","lastName":"Doe" },' + 
 
'{"firstName":"Anna","lastName":"Smith" },' + 
 
'{"firstName":"Peter","lastName":"Jones" }]}'; 
 

 
obj = JSON.parse(text); 
 

 
for (i = 0; i < obj.employees.length; i++) { 
 
document.getElementById("demo").innerHTML += 
 
obj.employees[i].firstName + " " + obj.employees[i].lastName+ "<br/>";  
 
}
<h2>Create Object from JSON String</h2> 
 

 
<p id="demo"></p>

+0

謝謝!我將如何去從網​​站抓取數據,而不是讓它在var文本中出現? – Czar

+0

,這取決於服務器端技術使用什麼服務器端技術你使用你需要啓動一個http獲取或發佈根據你的需求。 – MasterDev

+0

$ .getJSON('example.com',function(result){}); 如果我使用這個,結果是json字符串對嗎?我可以直接解析嗎? – Czar

-1

你JSON是包含對象的數組。每個對象都有一個nickname和一個votes成員。讓我們假設你有一個模板是這樣的:

function votesByNicknameTemplate(input, target) { 
    var output = ""; 
    for (var index in input) { 
     output += input[index].nickname + " has " + input[index].votes + "<br>"; 
    } 
    target.innerHTML += output 
} 

如果調用此使用votesByNicknameTemplate([ { "nickname":"name", "votes":"3" }, { "nickname":"name", "votes":"2" }, { "nickname":"name", "votes":"2" }], document.getElementsByTagName("body")[0]);那麼你就寫一個outputbody。您可以abstractize這進一步支持更多的模板,像這樣:

function runTemplate(input, target, templateName) { 
    window[templateName](input, target); 
} 

,然後用相同的結果叫runTemplate([ { "nickname":"name", "votes":"3" }, { "nickname":"name", "votes":"2" }, { "nickname":"name", "votes":"2" }], document.getElementsByTagName("body")[0], "votesByNicknameTemplate"),但有一個更通用的解決方案。

+0

謝謝!我將如何去從網​​站抓取數據傳遞到runTemplate? – Czar

+0

@Czar你需要向服務器發送一個AJAX請求,並在回調中處理響應。請閱讀更多信息:https://www.w3schools.com/xml/ajax_xmlhttprequest_send.asp –