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.

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

• Ohgodwhy: 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?
• user3968302: the result is [{key1: value},{key1: value}]
• Daedalus: @Zack You must use 8 spaces to indent while code is in a list.
• user3968302: Still can't figure out what I'm doing wrong with my code though :/

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"