使用Jquery获取JSON数据馈送，并以HTML格式显示多个json数组对象

Question

I am using jquery and getJSON to GET a data feed constructed by PHP. The Feed displays fine when visiting the PHP page. The problem I am running into is that the JSON feed returns as multiple objects when it is GET requested in jQuery, and I don't know how to write the jQuery to display all objects and their data.

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 (Constructs JSON Feed):

$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();

Sample JSON Feed:

[{
    "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

Your output is an Array of JSON objects. Fortunately, JavaScript is convenient for manipulating JSON (actually, that is why JSON was created..), and jQuery is convenient for manipulating the DOM.

To parse the result, you can just iterate through that Array, construct whatever HTML string that you need within the Array, and then insert it into the DOM using jQuery.

Here a simple example with lists :

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);

If you only want to display some of the properties, you can read them separately and do additional formatting (for the date for example). It is also useful to give the different HTML objects ids corresponding to what they represent.