3

Please Help Me data does not appear in the div result and display [object] how to fix it?

 <div id="result">
 </div>
 <script>
    jQuery(document).ready(function($){
    var html = 'Sedang memproses data';
    $('#result').html(html);
    $('#result').css('background','none');
    $.getJSON( "get.php?nopel=<?php echo $idp;?>", function(data) {
      if(data) {
          html = '<h2>Berikut Tagihan Listrik Anda</h2><table>';
          $.each(data,function(x,y){
              html += '<tr><td>'+x.replace('_','/')+'</td><td>'+y+'</td>';
          });
          html += '</table>';
          $('#result').html(html);
      }
      else {
           $('#result').html('Tidak ada data');
      }
    });
   });
</script>

with json data like this, how to invite it to JavaScript

{
 "status": "success",
  "data": [
{
  "Info": "A",
  "hasil": "AA"
},
{
  "Info": "B",
  "hasil": "BB"
}
 ]
}

console.log (data) enter image description here

Improve this question
11
  • 1
    change $.each(data, ... to $.each(data.data, ... Commented Jul 5, 2019 at 8:45
  • 1
    sounds like you want $.each(data.data instead of $.each(data, since the response has a datakey holding an array. As a side, funny note, I've never ever seen someone saying that he needs to "invite" json data to javascript. That's weird. Commented Jul 5, 2019 at 8:45
  • 8
    Amazingly similar question to one I remember seeing yesterday Commented Jul 5, 2019 at 8:52
  • 1
    @MedicalClinic that is in your code above. where you write $.each(data, function(x,y){ change data to data.data Commented Jul 5, 2019 at 8:54
  • 1
    @freefaller that's a very nice catch, indeed. Commented Jul 5, 2019 at 8:55

1 Answer 1

Reset to default
2

Firstly, please don't use multiple accounts to ask the same question.

There are two main issues with your code...

  • As pointed out in comments by multiple people, if you want the dataproperty in your data json object, then you need to use data.data instead of data
  • The $.each function passes two parameters (index and value), but it appears that you think that it's passing the two properties of the object.

The below has the two changes, where you can see I've changed function(x,y) to function(i,v) where v is the object. I'm then using v.Info and v.hasil...

var data = 
{
 "status": "success",
  "data": [
    {
      "Info": "A",
      "hasil": "AA"
    },
    {
      "Info": "B",
      "hasil": "BB"
    }
 ]
}

$(function(){
  var html = 'Sedang memproses data';
  $('#result').html(html);
  $('#result').css('background','none');
  //$.getJSON( "get.php?nopel=<?php echo $idp;?>", function(data) {
    if(data) {
        html = '<h2>Berikut Tagihan Listrik Anda</h2><table>';
        $.each(data.data,function(i,v){
            html += '<tr><td>'+v.Info.replace('_','/')+'</td><td>'+v.hasil+'</td>';
        });
        html += '</table>';
        $('#result').html(html);
    }
    else {
         $('#result').html('Tidak ada data');
    }
  //});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="result">
</div>

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

Comments