javascript - 使用 $.each 和 .append 从 JSON 对象构造 HTML

Question

我正在用 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>");
                            }
                        })
                    )
                )
            )
        })
    }

这没有给我想要的结果，即。行元素打印在底部。我可能离这里很远，不确定在这里使用 $.each 是最好的方法，但我现在不知道。如果有人有更好的方法来解决这个问题，很想听听。

另外，关于 SO 的第一个问题!

编辑:

我不得不放弃在 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);
      }
    }

Answer 1

一种方法: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);
}