Display Array Object With Jquery

Question

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

I need displaying value inside A1_score and A2_score as <td>, 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(
                '<tr id="idscore"><td>' + key + '</td><td>' + value + '</td><td>' + value + '</td></tr> '
            );
        });
    }
});
});

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.

Swati · Accepted Answer · 2021-02-26 08:33:23Z

1

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(
    '<tr class="idscore"><td>' + keys_ + '</td><td>' + data["A1_score"][keys_] + '</td><td>' + data["A2_score"][keys_] + '</td></tr> '
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbodyres"></table>

answered Feb 26, 2021 at 8:33

Swati

28.5k4 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Karan · Accepted Answer · 2021-02-26 10:54:27Z

1

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(
        '<tr id="idscore"><td>' + key + '</td><td>' + data["A1_score"][key] + '</td><td>' + data["A2_score"][key] + '</td></tr> '
    );
});

edited Feb 26, 2021 at 10:54

answered Feb 26, 2021 at 7:50

Karan

12.7k3 gold badges31 silver badges45 bronze badges

2 Comments

BigBossta Over a year ago

its displayed, but A2_score values didnt displayed as <td> but new <tr>, what i expected is the values of A1_score and A2_score displayed side by side with <td>

Karan Over a year ago

I have updated the answer. Please try now.

Collectives™ on Stack Overflow

Display Array Object With Jquery

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related