Javascript 在HTML+jQuery中显示JSON数据
我有一个生成JSON输出的REST API,如下所示:Javascript 在HTML+jQuery中显示JSON数据,javascript,jquery,html,json,Javascript,Jquery,Html,Json,我有一个生成JSON输出的REST API,如下所示: [{"case": 2005608875, "filepath": "/x/eng/cs-data/latx/dev/20150510_uploads/wilp/perfstat_20150415_001256/node/10.95.172.19/output.data", "datatype": "perf8", "perfdateend": "2015-04-15T02:15:37-04:00", "use
[{"case": 2005608875,
"filepath": "/x/eng/cs-data/latx/dev/20150510_uploads/wilp/perfstat_20150415_001256/node/10.95.172.19/output.data",
"datatype": "perf8",
"perfdateend": "2015-04-15T02:15:37-04:00",
"userid": "wilp",
"filename":"perfstat_20150415_001256.zip",
"version": "v8.1 ",
"hosts": [{"filer": "cluster1-01",
"hostname": "10.95.172.18", }],
"perfid":"98"}]
我试图用HTML显示这些数据,但我无法这样做,
以下是我的HTML+jQuery div:
<div class="widgetcontent">
<select>
<option>
96
</option>
<option>
97
</option>
<option>
98
</option>
<option>
99
</option>
</select>
<button class="topcoat-button--cta">Get Data!</button>
</div><!--widgetcontent-->
<div class='content'> </div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/pull.js"></script>
这是我的jQuerypull.js
(function ($) {
$('button').on('click', function () {
// remove resultset if this has already been run
$('.content ul').remove();
// get selected zip code from selectbox
var perfid = $('select option:selected').text();
// make AJAX call
$.getJSON('http://myapiurl.com/ws/spm/search/perfid/' +perfid, function (data) {
// do all this on success
var items = [],
$ul;
$.each(data, function (key, val) {
//iterate through the returned data and build a list
items.push('<li id="' + key + '"><span class="Case">' + val.case + '</span><br><span class="UserID">' + val.userid + '</span></li>');
});
// if no items were returned then add a message to that effect
if (items.length < 1) {
items.push('<li>No Data Found!</li>');
}
// append list to page
$ul = $('<ul />').appendTo('.content');
//append list items to list
$ul.append(items);
});
});
}(jQuery));
两天以来,我一直在为这个问题发愁,但仍然无法解决它。您的jQuery应该是
$.getJSON('http://myapiurl.com/ws/spm/search/perfid/' + perfid, function (data) {
// do all this on success
var itemsHtml = "",
$.each(data, function (key, val) {
//iterate through the returned data and build a list
itemsHtml+= '<li id="' + key + '"><span class="Case">' + val.case + '</span><br><span class="UserID">' + val.userid + '</span></li>';
});
// if no items were returned then add a message to that effect
if (data.length == 0) {
itemsHtml = '<li>No Data Found!</li>';
}
// append list to page
$(".content").append("<ul>"+itemsHtml+"</ul>");
});
尝试:
我唯一看到的错误是您需要一个class=content的div:
<div class='content'></div>
但这有点危险,因为很多东西都将内容作为一个类来使用
除此之外,有时json结果嵌套在结果中,因此您必须通过results.data访问数据,而不仅仅是数据,下面是一个没有restful调用的JSFIDLE:
您面临的问题是什么?我没有看到HTML中声明了class.content的元素。您必须有.content div才能附加ul&li。@ParthTrivedi按下按钮后,我在屏幕上看不到任何内容。MartinSchneider:我的代码中有一个div标记,其中包含类内容。您的HTML中应该有div.content已经在DOM中了。
<div class='content'></div>
$.getJSON('http://myapiurl.com/ws/spm/search/perfid/' + perfid, function (data) {
// do all this on success
var itemsHtml = '<li>No Data Found!</li>';
if (data.length) {
itemsHtml = "",
$.each(data, function (key, val) {
//iterate through the returned data and build a list
itemsHtml+= '<li id="' + key + '"><span class="Case">' + val.case + '</span><br><span class="UserID">' + val.userid + '</span></li>';
});
}
$(".content").html("<ul>"+itemsHtml+"</ul>");
});