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

Profile picture for Joseph
Joseph

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.

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

<!-- language: lang-js --> 
JSON.stringify(data, null, 2)

Demo in jsFiddle & Stack Snippets

<!-- begin snippet: js hide: true console: true babel: false --> <!-- language: lang-js --> 
// 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)
}
<!-- language: lang-css --> 
pre {
  padding: 15px;
  background: lightgrey;
}
<!-- language: lang-html --> 
<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>
<!-- end snippet -->

Further Reading