使用jQuery从Ajax调用访问键值对

Question

I am using jquery to call for a Json object from the server. This is my call:

$.getJSON( url, function( data ) {...}

I am getting back (from console.log) the following object:

> 0: Object
   cable key: "1"
   cable type: "Building Wire..."
> 1: Object
   cable key: "2"
   cable type: "PVC Wire..."
...

I am trying to access both key and value like the examples below without any luck.

$.getJSON( url, function( data ) {

    $.each( data, function( key,  value ) {

         $( "#CableType" ).append( $( "<option value='" + value['cable key'] + "'>" + value['cable type'] + "</option>" ) );

    });
})

Thanks for any help

Answer 1

You are trying to get a property of the VALUE instead of the object. Use

data['cable key']

instead of

value['cable key']

Beside, adding elements to the DOM inside a loop is inefficient. You need to collect your html in a string, and after the loop ends, put it in the DOM. You can do something like this:

$.getJSON( url, function(data){
    var htmlCollection = "",
        propertyName;

    data.forEach(function(pair){            
        htmlCollection += "<option value='" + pair['cable key'] + "'>" + pair['cable type'] + "</option>";
    });

    $( "#CableType" ).append(htmlCollection);
});