我使用 php 调用 Web 服务 API,响应采用 JSON 格式,格式如下:
"hits": {
"found": 23,
"start": 0,
"hit": [
{
"id": "data_upload_20150608_97",
"fields": {
"district": "City name",
"street": "Street name",
"building_name": "Blue tower",
"description": "Some description text.",
"latlon": "0.0,0.0",
"website": "http:\/\/www.example.com/id"
}
}
然后使用 $.getJSON
检索响应,如下所示:
$("#myForm").submit(function(event) {
event.preventDefault();
var search_term = $("#search_txt").val()
if(search_term.length > 0) {
$.getJSON("assets/php/search.php?query="+search_term, function(result) {
process_result(result);
});
}
});
我想要实现的是将 HTML 结构中的字段与 JSON 分开,如下所示:
<div id="result">
<div class="row">
<div class="large-6">
<h2>City name</h2>
<div>District: City name</div>
<div>Street: Street name</div>
<div>Building name: Blue tower</div>
</div>
<div class="large-3">
<div>Lat Lon: 0.0,0.0</div>
<div>Description: Some description text.</div>
<a href="http://www.example.com/id">Link</a>
</div>
</div>
我已经创建了一个函数来处理结果并显示它,但使用 $.each
和 .append
并没有取得多大进展。我不是 JS 人,但这里是函数,即使对我来说,它看起来也很困惑:
function process_result(response_string) {
$.each(response_string, function(index, hit) {
$("#result").append(
$( '<div />', { 'class': 'row' } ).append(
$( '<div />', { 'class': 'large-6' } ).append(
$.each(hit, function(key, value) {
if(key == "District") {
$("#result").append("<h2>"+value+"</h2>");
}
if(key == "URL") {
$("#result").append("<a href="+value+">Link</a>");
}
else {
$("#result").append("<div>"+key+": "+value+"</div>");
}
})
)
)
)
})
}
这没有给我想要的结果,即。 row 元素打印在底部。我可能离这里很远,不确定在这里使用 $.each
是最好的方法,但我现在不知道。如果有人有更好的方法来解决这个问题,很想听听。
另外,我的第一个问题是这样!
编辑:
我不得不放弃在 PHP 中处理 JSON,而只将原始 JSON 传递给 JS,然后使用以下内容根据需要获取 DOM 结构:
function process_result(response_string) {
var obj = JSON.parse(JSON.stringify(response_string));
//console.log(obj.hits.hit);
$("#result").empty();
for(var i in obj.hits.hit){
var item = obj.hits.hit[i]['fields'];
var html = '';
html += '<div class="row"><div class="large-6 columns small-12">';
html += '<h2>'+item['district']+'</h2>';
html += '<div>District: '+item['district']+'</div>';
html += '<div>Street: '+item['street']+'</div>';
html += '<div>Building: '+item['building_name']+'</div>';
html += '</div>';
html += '<div class="large-6 columns">';
html += '<div>Lat Lon: '+item['latlon']+'</div>';
html += '<div>Description: '+item['description']+'</div>';
html += '<a href="'+item['website']+'">Link</a>';
html += '</div>';
$('#result').append(html);
}
}
最佳答案
一种方法:https://jsfiddle.net/Lzbt5tr1/1/
var result = '{"hits": {"found": 23,"start": 0,"hit": [{"id": "data_upload_20150608_97","fields": {"district": "City name","street": "Street name","building_name": "Blue tower","description": "Some description text.","latlon": "0.0,0.0","website": "http:\/\/www.example.com/id"}}]}}';
var obj = JSON.parse(result);
console.log(obj.hits.hit);
for(var i in obj.hits.hit){
var item = obj.hits.hit[i]['fields'];
var html = '';
html += '<div class="row"><div class="large-6">';
html += '<h2>'+item['district']+'</h2>';
html += '<div>District: '+item['district']+'</div>';
html += '<div>Street: '+item['street']+'</div>';
html += '<div>Building: '+item['building_name']+'</div>';
html += '</div>';
html += '<div class="large-3">';
html += '<div>Lat Lon: '+item['latlon']+'</div>';
html += '<div>Description: '+item['description']+'</div>';
html += '<a href="'+item['website']+'">Link</a>';
html += '</div>';
$('#result').append(html);
}
关于javascript - 使用 $.each 和 .append 从 JSON 对象构造 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30926588/