CODEWITHSUNDEEP
javascriptjqueryjson
raduken
raduken

Reputation: 2119

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 not get. As well will be simple for me get these values from a url?

jquery: 

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

        $.getJSON('real-data.json', function (data) {
            console.log(data);
            alert(data);

            showData.empty();

        });

        showData.text('Loading the JSON file.');
    });
});

json:

{
  "test": 0,
  "howmuch": 0,
  "day": 22,
  "calls": [

  ]
}

html:

<!DOCTYPE html>
<html>
  <head>
    <script data-require="[email protected]" data-semver="1.9.1" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>

        <script src="real-data.js"></script>
    <style>body{ background: #F9F9FA; }</style>
  </head>

  <body>
    <a href="#" id="get-data">Get JSON data</a>
    <div id="show-data"></div>
  </body>
</html>

Upvotes: 0

Views: 8187

Answers (4)

Jorge Hess
Jorge Hess

Reputation: 550

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

  ]
};
$('#get-data').on('click', function() {
  $('#show-data').html(JSON.stringify(json));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="get-data">Get JSON data</a>
<div id="show-data"></div>

Upvotes: 1

Rob
Rob

Reputation: 152

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 in data) {
    $('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

Upvotes: 1

brk
brk

Reputation: 50291

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

Upvotes: 3

dyagmin
dyagmin

Reputation: 304

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

Upvotes: 1

Related Questions