使用 Jquery 获取 JSON 数据提要，并在 HTML 中显示多个 json 数组对象

Question

我正在使用 jquery 和 getJSON 来获取由 PHP 构建的数据馈送。访问 PHP 页面时，Feed 显示正常。我遇到的问题是，当在 jQuery 中请求 GET 时，JSON 提要作为多个对象返回，我不知道如何编写 jQuery 来显示所有对象及其数据。

jQuery:

$(document).ready(function () {
    $("#display_results").hide();
    $("#searchButton").click(function (event) {
        $("#display_results").show();
        event.preventDefault();
        search_ajax_way();
    });
    $("#search_results").slideUp();
    $("#searchBox").keyup(function (event) {
        $("#display_results").show();
    });
});

function search_ajax_way() {
    //var search_this=$("#searchBox").val();
    //$.post("http:/url.com/folder/cl/feed.php", {city : search_this},         function(data){
    //$("#display_results").html(data);
    //});
    var search_this = $("#searchBox").val();
    $.getJSON('http://url.com/app/cl/disp_byowner_feed.php', {
        city: search_this
    }, function (result) {
        $.each(result, function (i, r) {
            console.log(r.seller);
            window.title = r.title;
            window.seller = r.seller;
            window.loc = r.location;
            (Plan on listing all keys listed in the data feed below here)
        });
        console.log(result);
        $("#display_results").html(window.seller + < need to list all keys / values here > );
    });
}

PHP（构造 JSON 提要）：

$city = 'Kanosh';
$s = "SELECT * FROM `list` WHERE `city` LIKE '%".$city."%'";
$res = $mysqli->query($s) or trigger_error($mysqli->error."[$s]");
$a = array(); 
while($row = $res->fetch_array(MYSQLI_BOTH)) { 
$a[] = array(
'title' => $row['title'],
'price' => $row['price'],
'rooms' => $row['rooms'],
'dimensions' => $row['dimensions'],
'location' => preg_replace('pic\u00a0map', '', $row['location']),
'price' => $row['price'],
'address' => $row['address'],
'seller' => $row['seller'],
'href' => $row['href'],
'date' => $row['date']
); 
}
header('Content-Type: application/json');
echo json_encode($a);
$res->free();
$mysqli->close();

示例 JSON 提要：

[{
    "title": "Great Ski-In Location with Seller Financing Available ",
    "price": "  (Park City near the Resort)   ",
    "rooms": "",
    "dimensions": "",
    "location": "",
    "address": "Crescent Road at Three Kings Dri",
    "seller": "real estate - by owner",
    "href": "http:\/\/saltlakecity.craigslist.org",
    "date": "20140811223115"
}, {
    "title": "Prospector Building 1 - Tiny Condo, Great Location - Owner Financing",
    "price": "$75000",
    "rooms": false,
    "dimensions": "",
    "location": "  Prospector Square Park City Ut",
    "address": "",
    "seller": "real estate - by owner",
    "href": "http:\/\/saltlakecity.craigslist.org",
    "date": "20140811223115"
}]

Answer 1

您的输出是一个 JSON 对象数组。 幸运的是，JavaScript 便于操作 JSON（实际上，这就是创建 JSON 的原因..），而 jQuery 便于操作 DOM。

要解析结果，您只需遍历该数组，在该数组中构造您需要的任何 HTML 字符串，然后使用 jQuery 将其插入 DOM。

这里是一个简单的列表示例：

var html = "";

for (var i = 0; i < result.length; i++) { //assuming result in the JSON array

    html += '<ul id = 'house_' + i>';
    for (var property in result[i]) { //read all the object properties
        html += '<li>' + property + ' : ' + result[i][property] + '</li>';

    }
    html += '</ul>';

};

$("whatever_div").html(html);

如果您只想显示一些属性，您可以单独阅读它们并进行额外的格式化（例如日期）。 为不同的 HTML 对象提供与它们所代表的内容相对应的 id 也很有用。

Answer 2

function search_ajax_way(){
    //var search_this=$("#searchBox").val();
    //$.post("http:/url.com/folder/cl/feed.php", {city : search_this},         function(data){
    //$("#display_results").html(data);
    //});
    var search_this=$("#searchBox").val();
    $.getJSON('http://hooley.me/scraper/cl/disp_byowner_feed.php', { city : search_this },     function(result) {
        var output = '';
        $.each(result, function(i,r) {
            output+= r.title + " " + r.seller
        });

        $("#display_results").html(output);
    });

}