打印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

回答

相关问题