通过jQuery显示JSON数据的值

Question

I have my data returned by Json but somehow I'm not able to print it out.

here is my javascript

jQuery( document ).ready( function( $ ) {
    $('select[name="country_id"]').on('change', function() {
      $.ajaxSetup({
          headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
      });
       var CountryId = $(this).val();
        if(CountryId) {
            $.ajax({
              url: '{{ url('profilegetStateList') }}/'+encodeURI(CountryId),
              type: "GET",
              dataType: "json",
              success:function(data) {
                console.log(data);
                  // $('select[name="state_id"]').empty();
                  // $('select[name="state_id"]').empty().append('<option value='+ data +' selected>'+data+'</option>');
              }
            });
        }else{
          $('select[name="state_id"]').empty().append("<option value='' selected>Select</option>");
        }
    });
  });

I have tried data , data->name , data['name'] all of them return [object object]

here is my console prints on console.log(data);

[]
length: 0
__proto__: Array []

[…]
0: Object { id: 1, name: "ACEH", country_id: 101 }
1: Object { id: 16, name: "BALI", country_id: 101 }
2: Object { id: 15, name: "BANTEN", country_id: 101 }
.....
length: 32
__proto__: Array []

any idea?

Answer 1

By seeing your code, I think the commented code should be like

var options = '';
data.forEach(function(country) {
    options += '<option value='+ country.id +' selected>'+country.name+'</option>'
})
$('select[name="state_id"]').empty().append(options);

Answer 2

The data that you are consoling, is in array format. You need to access each index of object. Try this inside success function,

for(var i=0;i<data.length;i++ ){

console.log('name-',i,'= ',data[i].name)

}

Answer 3

[object Object] is the default toString representation of an object in javascript.

If you want to know the properties of your object, just foreach over it like this:

for(var property in data) {
    alert(property + "=" + data[property]);
}

UPDATE

for(var property in data) {
   if(data[property]){
      console.log(data[property])
   }
}

Answer 4

Cant Comment.. so here is an addition to @Aswin Ramesh: Maybe remove the selected property from the options attributes and add it only to the first option. This was a mistake of the OP