parse json from php display with javascript

Question

I have a 2 part question. In PHP, I use fetch_assoc like in the answer from this post which returns an array of objects. Then my JS is:

var result = JSON.parse(response),
    output = "";
for (var i = 0; i < result.length; i++){
    var obj = result[i];
    output += "<div class='mysql_row'>";
    for (key in obj){
        output += "<div class='mysql_col'>" + obj.key. + "</div>";
    }
    output += "</div>";
}
document.getElementById('main_grid').innerHTML = output;

I read in another post that using "key" should give me the value, but I'm getting undefined even though logging to the console gives me an array of strings.

Am I doing something wrong with my for..in?

I'm not too experienced with PHP, is there a more elegant way to echo and display the data? My PHP code:

$load = $connect->query("SELECT * FROM `user` WHERE `role` = 2");
$emp_proj = array();
while ($row = $load->fetch_assoc()){
    $emp_proj[] = $row;
};
echo json_encode($emp_proj);

Are you using `echo json_encode($array);` on the server to return a JSON object? Also perform `console.log(response);` what does it show you? — Ohgodwhy, Oct 21 '14 at 02:43
@Zack You must use 8 spaces to indent while code is in a list. — Daedalus, Oct 21 '14 at 02:52
Still can't figure out what I'm doing wrong with my code though :/ — , Oct 21 '14 at 02:55

score 1 · Accepted Answer · answered Oct 21 '14 at 02:59

It is not obj.key which gives you the value you want, but obj[key]:

var result = JSON.parse(response),
    output = "";
for (var i = 0; i < result.length; i++){
    var obj = result[i];
    output += "<div class='mysql_row'>";
    for (key in obj){
        output += "<div class='mysql_col'>" + obj[key] + "</div>";
    }
    output += "</div>";
}
document.getElementById('main_grid').innerHTML = output;

obj.key is looking at the object obj and retrieving a property whose key is the string "key". obj[key] retrieves a property whose name is the value of the variable key.

var obj = {
    key: 5,
    username: "test"
};

var key = "username";
console.log(obj.key); // 5
console.log(obj[key]); // "test"
console.log(obj.username); // "test"
console.log(obj["username"]); // "test"

parse json from php display with javascript

1 Answers1