打印JSON值到HTML

我在我的控制檯正從我的JSON這些值：Object {test: 0, howmuch: 0, day: 22, calls: Array[0]}打印JSON值到HTML

但我怎麼可以打印此對我的HTML？我試圖做jQuery，但我無法得到。對於我來說，從網址獲取這些值也很簡單？

的jQuery：

$(document).ready(function() { 
    $('#get-data').click(function() { 
     var showData = $('#show-data'); 

     $.getJSON('real-data.json', function (data) { 
      console.log(data); 
      alert(data); 

      showData.empty(); 

     }); 

     showData.text('Loading the JSON file.'); 
    }); 
});

JSON：

{ 
    "test": 0, 
    "howmuch": 0, 
    "day": 22, 
    "calls": [ 

    ] 
}

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <script data-require="[email protected]" data-semver="1.9.1" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script> 

     <script src="real-data.js"></script> 
    <style>body{ background: #F9F9FA; }</style> 
    </head> 

    <body> 
    <a href="#" id="get-data">Get JSON data</a> 
    <div id="show-data"></div> 
    </body> 
</html>

來源

2016-05-31 Raduken

好了，你怎麼想顯示呢？您需要將它寫入HTML中某些元素的內容（可能是＃show-data div），以顯示您想要的字段。 –

在div中顯示 – Raduken

您沒有json字符串，您有一個JavaScript對象。如果你想再次得到字符串，你需要使用'JSON.stringify'。但大概你寧願格式化它看起來比這更好。但是你需要決定你想如何出現，然後附加html元素來實現。 –

showData.empty()應該showData.html(data)

來源

2016-05-31 14:40:38 dyagmin

我確實改變了，但我仍然沒有得到 – Raduken

這實際上並不顯示對象中的數據，這可能不是OP想要的。 –

是的，我知道，我剛剛在這個大聲笑 – Raduken

不知道你是否正在尋找這樣的東西。無法使用$.getJSON，因此假定var x具有所需的值。

var x ={ 
    "test": 0, 
    "howmuch": 0, 
    "day": 22, 
    "calls": [ 
    ] 
} 

$(document).ready(function() { 
    $('#get-data').click(function() { 
     var _jsonString = ""; 

for(var key in x){ 
    _jsonString +="key "+key+" value "+x[key]+ '</br>'; 
} 

$("#show-data").append(_jsonString) 
}); 
});

Jsfiddle

來源

2016-05-31 14:54:00 brk

非常感謝，但我需要得到來自文件的json：real-data.json我無法將它變成一個變量，因爲json會一天一天地在變化。 – Raduken

而不是x使用$ .getJSON的響應 – brk

我試過使用$ .getJSON（'真實數據。json'，功能（數據）{alert（data）; }）;但我得到了錯誤的加載:( – Raduken

您將需要一個迭代器在HTML中顯示您的JSON對象數據。在jQuery中，您可以使用$ .each或純javascript，您可以使用for-in循環。

$.each(data, function(i, val){ 
    $('div').append(val.test); 
});

或者：

for (var i in data) { 
    $('div').append(data[i].test); 
    $('div').append(data[i].howmuch); 
    $('div').append(data[i].day); 
}

看到這個職位更多的例子：jquery loop on Json data using $.each

來源

2016-05-31 14:54:28 Rob

你能提供一個jsfiddle嗎？我無法使它工作。謝謝 – Raduken

一定要把循環放在getJSON回調函數中：https：//jsfiddle.net/tecfy4fL/ – Rob

謝謝，我得到這個錯誤：XMLHttpRequest無法加載https：//testapinow.com=0。沒有'Access-Control-Allow-Origin'標頭出現在請求的資源上Origin'http：//0.0 .0.0：8000'因此不允許訪問。響應的HTTP狀態代碼爲400. – Raduken

var json = { 
 
    "test": 0, 
 
    "howmuch": 0, 
 
    "day": 22, 
 
    "calls": [ 
 

 
    ] 
 
}; 
 
$('#get-data').on('click', function() { 
 
    $('#show-data').html(JSON.stringify(json)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="get-data">Get JSON data</a> 
 
<div id="show-data"></div>

來源

2016-05-31 14:59:54

謝謝，但我需要從json文件中獲取這些值，所以我無法在js var中轉換ir 。 – Raduken

只需更改y的var我們真正的json文件 –

我試過這個，但沒有工作:(： $ .getJSON（'real-data.json'，function（data）{ alert（data）; }）; （'click'，function（）{0}（'＃show-data'）。html（JSON.stringify（json））; }）; $（'＃get-data'）。 – Raduken

打印JSON值到HTML

回答

相關問題