Display Array Object With Jquery

Question

I want displaying object data in table, which value inside name of object appear as , i have result in the network preview like this below:

I need displaying value inside A1_score and A2_score as , so i tried jquery like this:

$(document).on('click', '#cektesting', function(e) {
$('.row').css({ 'visibility': 'hidden', 'display': 'none' });
$.ajax({
    url: "pengguna/getCounting",
    type: "GET",
    dataType: "JSON",
    success: function(data) {
        $('.row').css({ 'visibility': 'visible', 'display': 'flex' });
        $.each(data['A1_score', 'A2_score'], function(key, value) {
            $('#tbodyres').append(
                '' + key + '' + value + '' + value + ' '
            );
        });
    }
});
});

And last thing those data came from my Controller.php:

 public function getCounting()
{
    $get_row_class = $this->getdata->getAutism();
    $get_row = $this->getdata->countrow();

    $row_autism = $get_row_class['Autism'];
    $row_normal = $get_row_class['Normal'];

    $res_autism = number_format($row_autism / $get_row['jml_data_latih'], 6);
    $res_normal = number_format($row_normal / $get_row['jml_data_latih'], 6);

    $A_Score = $this->getdata->getA_score();
    $data = [];
    foreach ($A_Score as $as) {
        $row['A_Y_NORMAL'] = $as['A1_YES_NORMAL'] / $row_normal;
        $row['A_Y_AUTIS'] = $as['A1_YES_AUTIS']  / $row_autism;
        $row['A_N_NORMAL'] = $as['A1_NO_NORMAL']  / $row_normal;
        $row['A_N_AUTIS'] = $as['A1_NO_AUTIS']  / $row_autism;

        $row2['A_Y_NORMAL'] = $as['A2_YES_NORMAL'] / $row_normal;
        $row2['A_Y_AUTIS'] = $as['A2_YES_AUTIS'] / $row_autism;
        $row2['A_N_NORMAL'] = $as['A2_NO_NORMAL'] / $row_normal;
        $row2['A_N_AUTIS'] = $as['A2_NO_AUTIS'] / $row_autism;


        $data['A1_score'] = $row;
        $data['A2_score'] = $row2;
    }

    echo json_encode($data);
}

Result: And this is what i get when i tried build jquery from jquery code above, So i get A2_score data but A1_score didn't displaying only A2_score data get looped.

user_9695286 · Answer

You can not use data['A1_score', 'A2_score'] to iterate over properties A1_score & A2_score. What you should do is iterate over either A1_score or A2_score and retrieve key. Then get values from A1_score & A1_score with data["A1_score"][key] & data["A2_score"][key].

Try like below.

$.each(data["A1_score"], function(key, value) {
    $('#tbodyres').append(
        '' + key + '' + data["A1_score"][key] + '' + data["A2_score"][key] + ' '
    );
});

user_10606400 · Answer

You can get all keys inside your object and then use that keys to get required data from both JSON Object .

Demo Code :

//just for demo..
var data = {
  "A1_score": {
    "xs": 12322,
    "sse": 1232
  },
  "A2_score": {
    "xs": 1234,
    "sse": 213
  }
}
//get keys of one object because keys in other object are same
var keys = Object.keys(data["A1_score"])
console.log(keys)
//loop through keys 
for (var i = 0; i < keys.length; i++) {
  var keys_ = keys[i]
  //add that inside your table
  $('#tbodyres').append(
    '' + keys_ + '' + data["A1_score"][keys_] + '' + data["A2_score"][keys_] + ' '
  );
}

Display Array Object With Jquery

2 Answers