How do I write json results to a div using jquery?

Question

This is probably a really easy question, but I can't find anything that works.

I'm trying to take a json result and just write it into the inner html of a div to see what it looks like.

I have something like this:

$.getJSON("someurlthatgivesmejson",
    function(data){         
        $("#jsonmodel").html(data);  // what should this be??
    });
  });

UPDATE

I was able to get it to display some text by using

$("#jsonmodel").html($.param(data));

However, it's not formatted like how the browser displays a json result, like the structure of the javascript object.

@crescentfresh I'm doing that as a point of reference, but I wanted to get that type of output inside a div. — Joseph, Sep 04 '09 at 17:12

score 5 · Accepted Answer · answered Sep 04 '09 at 17:17

5

You can use jquery-json library

`$('#jsonmodel').html($.toJSON(data));`

answered Sep 04 '09 at 17:17

Jirapong

24,074
10
54
72

Is the library hosted by google by any chance? I'm trying to get this working on their API Playground – Joseph Sep 04 '09 at 17:21
No, I don't think so. may be you re-use code directly from http://code.google.com/p/jquery-json/source/browse/trunk/jquery.json.js – Jirapong Sep 04 '09 at 17:46
This plugin was helpful. Thanks for the link. – txyoji Oct 01 '09 at 19:27

score 2 · Answer 2 · answered Sep 04 '09 at 17:08

2

depends on what the data is. if you want to write it as a string, then you should use the $.get method to get it, that way its not converted into a js hash for you

answered Sep 04 '09 at 17:08

mkoryak

57,086
61
201
257

Thanks, so I should do something like $("#jsonmodel").html($.get(data));? – Joseph Sep 04 '09 at 17:10
That's not working for me. I'm trying serialize as well but it doesn't work either. – Joseph Sep 04 '09 at 17:15
@Joseph: No, mkoryak meant `$.get("someurlthatgivesmejson")` – Crescent Fresh Sep 04 '09 at 18:17
@crescentfresh I thought he might have meant that as well and I tried that too. Still no dice. I'm starting to think what I'm trying to do is impossible. – Joseph Sep 04 '09 at 18:29

score 2 · Answer 3 · answered Dec 14 '17 at 15:18

You can use JSON.stringify natively within browsers and just pass in spacer arguments like this:

JSON.stringify(data, null, 2)

Demo in jsFiddle & Stack Snippets

// listener
$(":input").on("keyup change", WriteFormDataToDiv);

// call on load
WriteFormDataToDiv()

function WriteFormDataToDiv() {
  var data = $(":input").serializeArray()
  var html = JSON.stringify(data, null, 2)
  $("#formdata").html(html)
}

pre {
  padding: 15px;
  background: lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<input type="text" name="cat"     value="frida" />
<input type="text" name="dog"     value="buddy" /><br/>
<input type="text" name="food"    value="pizza" />
<input type="text" name="dessert" value="ice cream" />

<pre id="formdata"></pre>

How do I write json results to a div using jquery?

5 Answers5

Demo in jsFiddle & Stack Snippets

Further Reading