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`

Answer 1

hello plz try this and any confusion or question then tell me.

<script type="text/javascript">
    $( document ).ready(function() {


          $.getJSON("http://Your .Php", function(data) {

            $.each(data.model, function(index, item) {
              for (var a = 0; a < item.0.length; a++) {

                  alert(item.0[a]);

              };

            })


    });
});
  </script> 

if you can get this alert in your web-services with right element then tell me other wise send me your web-services i will get your exactly output.

Answer 2

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