使用javascript从php显示解析json

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.

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

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

Answer 1

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"