Print Json Values Into Html

I am getting these values from my json in my console: Object {test: 0, howmuch: 0, day: 22, calls: Array[0]} But how can I print this on my html? I tried doing jquery but I could n

Solution 1:

Not sure if you are looking for something like this. Not able to use $.getJSON so assuming var x has the required value.

var x ={
  "test": 0,
  "howmuch": 0,
  "day": 22,
  "calls": [
  ]
}

$(document).ready(function () {
    $('#get-data').click(function () {
      var _jsonString = "";

for(var key in x){
  _jsonString +="key "+key+" value "+x[key]+ '</br>';
}

$("#show-data").append(_jsonString)
});
});

Jsfiddle

Solution 2:

showData.empty() should be showData.html(data)

Solution 3:

You will need an iterator to display your json object data in html. In jQuery you can use $.each or in plain javascript you can use a for-in loop.

$.each(data, function(i, val){
    $('div').append(val.test);
});

Or:

for (var i indata) {
    $('div').append(data[i].test);
    $('div').append(data[i].howmuch);
    $('div').append(data[i].day);
}

See this post for more examples: jquery loop on Json data using $.each

Solution 4:

var json = {
  "test": 0,
  "howmuch": 0,
  "day": 22,
  "calls": [

  ]
};
$('#get-data').on('click', function() {
  $('#show-data').html(JSON.stringify(json));
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ahref="#"id="get-data">Get JSON data</a><divid="show-data"></div>