print json values into html

Question

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="jquery@2.1.1" 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>

Well, how do you want to display it? You'd need to write it into the content of some element in your HTML (presumably the #show-data div) displaying which ever fields you want. — Matt Burland, May 31 '16 at 14:40
You don't have a json string, you have a javascript object. If you want to get the string back again you'd need to use `JSON.stringify`. But presumably you'd prefer to format it to look better than that. But you need to decide how you want it to appear and then append html elements to achieve that. — Matt Burland, May 31 '16 at 14:54

score 3 · Answer 1 · answered May 31 '16 at 14:54

3

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

answered May 31 '16 at 14:54

brk

48,835
10
56
78

thanks very much, but I need get the json what comes from the file : real-data.json I can't turn it in a variable because the json will be changing day by day. – raduken May 31 '16 at 14:58
instead of x use the response of $.getJSON – brk May 31 '16 at 15:02
I tried use $.getJSON('real-data.json', function (data) { alert(data); }); but I got load of errors :( – raduken May 31 '16 at 15:07
what you see in alert? – brk May 31 '16 at 15:08

score 1 · Answer 2 · answered May 31 '16 at 14:40

1

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

answered May 31 '16 at 14:40

dyagmin

304
3
6

I did change but I still not getting – raduken May 31 '16 at 14:49
1

Which won't actually show the data in the object which is presumably not what the OP wants. – Matt Burland May 31 '16 at 14:49
1

Sorry, `showData.html(JSON.stringify(data))` would've been better. – dyagmin May 31 '16 at 15:01
thanks works perfect, now i am getting this error: XMLHttpRequest cannot load testapinow.com=0. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '0.0.0.0:8000'; is therefore not allowed access. The response had HTTP status code 400 – raduken May 31 '16 at 15:24
You may want to use JSONP or something else. There are options for that discussed [here](http://stackoverflow.com/questions/6396623/jquery-getjson-access-control-allow-origin-issue). – dyagmin May 31 '16 at 17:01

score 1 · Answer 3 · edited May 23 '17 at 11:58

1

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

edited May 23 '17 at 11:58

Community

1
1

answered May 31 '16 at 14:54

Rob

152
9

can you provide a jsfiddle? I could not make it work. thanks – raduken May 31 '16 at 15:01
1

Be sure to put the loop in the getJSON callback function: https://jsfiddle.net/tecfy4fL/ – Rob May 31 '16 at 15:13
thanks, i am getting this error: XMLHttpRequest cannot load https://testapinow.com=0. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://0.0.0.0:8000' is therefore not allowed access. The response had HTTP status code 400. – raduken May 31 '16 at 15:23
That error is beyond the scope of this question. See this SO post for possible CORS solutions: http://stackoverflow.com/questions/3595515/xmlhttprequest-error-origin-null-is-not-allowed-by-access-control-allow-origin – Rob May 31 '16 at 16:28

score 1 · Answer 4 · answered May 31 '16 at 14:59

1

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>

answered May 31 '16 at 14:59

Jorge Hess

550
2
9

thanks, but the problem I need get these values from a json file so I can't convert ir in a js var. – raduken May 31 '16 at 15:01
just change the var for your real json file – Jorge Hess May 31 '16 at 15:04
I tried this but did not work :( : $.getJSON('real-data.json', function (data) { alert(data); }); $('#get-data').on('click', function() { $('#show-data').html(JSON.stringify(json)); }); – raduken May 31 '16 at 15:09
data is your variable json, try var json; $.getJSON('real-data.json', function (data) { json = data; }); $('#get-data').on('click', function() { $('#show-data').html(JSON.stringify(json)); }); – Jorge Hess May 31 '16 at 16:50

print json values into html

4 Answers4

Linked