Question

我在我的控制台中从我的json获取这些值：Object {test: 0, howmuch: 0, day: 22, calls: Array[0]}

但是如何在我的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="jquery@2.1.1" 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>

Answer 1

不确定您是否正在寻找类似的东西。无法使用$.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

Answer 2

showData.empty()应为showData.html(data)

Answer 3

您需要一个迭代器来以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

Answer 4

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>

将json值打印成html

4 个答案: