Question

client.html

how can I write this json data retrieval in client end in order to loop out each box and the style inside it.

something like this just cannot work…

success:  function(output) {
    var records = output.data;
    var str = "";

    if (records) {
        alert(records.length);

        for (var i = 0; i < records.length; i++) {
            for (var j in records[i]) {
                str += j + " --> " + records[i][j] + "\n";
            }
        }
    }
}

test.php

$sql= "select id, style from table";
$result = mysql_query ($sql);

while($r = mysql_fetch_assoc($result)) {
    $id = $r['id'];
    $rows[$id] = $r;
}

$data = array(
    'data' => $rows,
    'debug' => $msg,
    'status'    => 1
);

the data after converted to json with help of php in build feature. (format that I want)

{
    "data": {
        "box1": { "style":"position: absolute;", "id":"box1" },
        "box2": { "style":"position: relative;", "id":"box2" },
        "box88": { "style":"position: relative;", "id":"box3" }
    },
    "debug":"feedback to client end",
    "status":1
}

Answer 1

@Rory, the problem in your function id that you are iterating the object attributes as if it was an array. I guess the following code solves your problem (you can also see it working on this fiddle).

function process(records) {
    result = [];
    for(var rec in records) {
        var row = [rec + "->"];
        for(var stl in records[rec]) {
            row.push("\t" + stl + "->" + (records[rec][stl]));
        }
        result.push(row.join("\n"));
    }

    $("#result").html(result.join("\n"));
}

// var obj = { your original data }
process(obj.data);