I can't get the object value to the html id input field.

JSON return

// response from the call
{
  "COLUMNS": ["cityname", "stateabbr"],
  "DATA": [
    ["Culver City", "CA"]
  ]
}

$(document).ready(function() {

  $("#zipcode").keyup(function() {
    var el = $(this);
    if (el.val().length === 5) {
      $.ajax({
        url: 'zipcode.cfc?method=getZipCode&returnFormat=json',
        type: 'get',
        data: {
          zipcode: $("#zipcode").val()
        },
        dataType: 'json',
        success: function(response, success) {
          console.log(response);
          console.log('Ran Successfully');

          var i = 0;
          var col = [];
          var dat = [];
          col = response.COLUMNS;
          dat = response.DATA;

          console.log('col ', col);
          console.log('dat ', dat);

          $.each(response, function(index, zc) {
            $("#cityname").append([zc[0]]);
            $("#stateabbr").append([zc[0]]);
          });

          console.log(cityname);
          console.log(stateabbr);


        },
        error: function(response) {
          console.log('Error'   response)
        }
      });
    }

  });

});

CodePudding user response：

you have to to fix for each. try this instead

            $("#cityname").val(response.DATA[0][0]);
            $("#stateabbr").val(response.DATA[0][1]);