AJAX call display api key and values in html div

Question

hope you can help me.

I am trying to figure out how to display api json key and value data on my html webpage as (formatted css). Ajax call hooking into a nodejs server and getting back data. I am getting successful ajax call and outputting on console.log, but coming back with [object object] on my webpage.

Api data is structured like this

`
{
    "error": false,
    "model" : [
    {
        "key1": "value1",
        "key2": "value2",
        "key3": "value3",
        "key4": "value4",
        "key5": "value5",
        "key6": "value6",
        "key7": "value7",
        "key8": "value8"
    },
    {
        "key1": "value1",
        "key2": "value2",
        "key3": "value3",
        "key4": "value4",
        "key5": "value5",
        "key6": "value6",
        "key7": "value7",
        "key8": "value8"
    }
]
}`

Function looks like this

`
var _t = this;
var modelUrl = "/searchModel";
(api key is already passed)



this.searchModelEvent = function (e) {

    e.preventDefault();
    var $m = $(this);

    var _serial = $m.find(".serialNum").val();

    var modelData = { apikey: apikey,id: _serial };
    modelData = JSON.stringify(modelData);

    console.log(modelData);
    $.ajax({
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        data: modelData,
        url: modelUrl,
        success: function(data) {
        if (data.error) {
        _t.errorState();                    
        } else {
        console.log("SUCCESS!!@#! \n");
        _t.loginModelState(data);
    }   

},

}); 

};

this.loginModelState = function (data) {
        var _model = data;

        for (var _i in _model) {
        var _output="";
        if(_model[_i] instanceof Object){

        for(var _x in _model[_i]){

        console.log(_model[_i][_x]);

        _output+=""+_x+"
"+_model[_i][_x];

        } 
    }   
        _output+="";
        $('div').html(_output);
    }
};//end`

what is _t, where did it come from? you're using it without even declaring let alone assigning it to anything — Jaromanda X
Sorry its a global variable which i've assigned 'this' to. (this is not all my code, just the functions that are relevant). cheers — roshambo
don't be sorry - I was a bit short with my comment - if _t is "correct", then that is not the problem :p — Jaromanda X

Kamal Kamal · Accepted Answer · 2015-07-28T13:36:16

try this:

loginModelState = function (data, searchKey) {
  var output = "";
  for(var i in data) { // i = error; model
    var submodel = data[i];
    if(typeof submodel === "object") { //submodel == "model"
      for(var j in submodel) { // Array
        var hash = submodel[j];
        for(var h in hash) { // example : (h = key1): (hash[h] = value1) ...
          if(searchKey) { // only if you give searchKey as parameter
            if(searchKey == h) {// searchkey match               
              output += hash[h] + "<br>";
            }
          } else {
            output += h + " " + hash[h] + "<br>";
          }
        }
      }
    }
  }
  $("body").html(output);
}
loginModelState(m); // output all
loginModelState(m, "key1") // output only if "key1" match

AJAX call display api key and values in html div

2 Answers