Rendering out a JSON reponse to HTML page

Question

JSON object:

{"id":75,"year":2011,"make":"Aston Martin","model":"V12 Vanquish"}

jQuery:

function post() {
  $("form").on("ajax:success", function(e, data, status, xhr) {
    var json = JSON.parse(xhr.responseText);
    $.each(json, function(k, v) {
      $("#vehicle_record").append('<li class="'+k+'">'+v+'</li>');
    });
  });
}

HTML page output:

75
2011
Aston Martin
V12 Vanquish
75
2011
Aston Martin
V12 Vanquish

Questions:

Why is the output rendered twice? (I only expect it once)
Is there a better way to render JSON to the page? (please advise)

--UPDATE--

The following a walk through of the UX:
FORM ONE: name > click next > post > FORM TWO > Choose Vehicle > click next > post > see vehicle picked: add another vehicle? Y (BACK to FORM TWO) / N (continue...)

I need to be able to use post for each model independently without interference. So how do I get for example all of the JSON objects submitted to the vehicle model? (I need this post function to be modular)

Perhaps I can do something like this?:

function post() {
  $("form").on("ajax:success", function(e, data, status, xhr) {
    var json = JSON.parse(xhr.responseText);
    var model = e.currentTarget.action;
    renderOnPage(json, model);
  });
}
function renderOnPage(data, model) {
  if ( model.match(/vehicles/) ) {
  $.each(data, function(k, v) {
    $("#vehicle_record").append('<li class="'+k+'">'+v+'</li>');
  });
  }
}

What's the ajax:success event? That's not a standard jQuery event, AFAIK. — Barmar
– Barmar, Commented Mar 1, 2014 at 0:54
can you add a console logging in the post method as the first line and see how many times it is called — Arun P Johny
– Arun P Johny, Commented Mar 1, 2014 at 0:54
Also put it in the callback function, to see if something is triggering the event twice. — Barmar
– Barmar, Commented Mar 1, 2014 at 0:55
re rendering json ( client side templating ) if you don't want to make something, I like ejs ( simple ) and linkedins fork of dust ( if you need logic templating ) — Rob Sedgwick
– Rob Sedgwick, Commented Mar 1, 2014 at 0:58

TechMaze · Accepted Answer · 2014-03-01 01:26:49Z

1

Better or maybe best way to render JSON on HTML (without using third party libraries) is to come up with something like this:

<html>
<body>
<span>ID</span>: <span json-path="id"></span>
<span>Year</span>: <span json-path="year"></span>
<span>Make</span>: <span json-path="make"></span>
<span>Model</span>: <span json-path="model"></span>
</body>
</html>

where json-path is just any attribute name that you want to come up with. Now on success of AJAX you should do something like this:

function refreshPage(data) {
   $("[json-path]", $(document)).each(function() {
    $(this).text(data[$(this).attr("json-path")]);
   });
}

Now if you need more complex features like to display an array of items ins JSON in a table or LIST then just add a switch case statement in above refreshPage

 switch((this).prop('tagName')) {
        case "INPUT":
           $(this).val(data[$(this).attr("json-path")])

Using this approach you can even map your json-path to an array on JSON path for a TABLE or SELECT tag and then use switch case to identify and render each type of elements differently.

answered Mar 1, 2014 at 1:26

TechMaze

4872 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MrPizzaFace Over a year ago

Hey thanks for your suggestion could you perhaps share a link with a thorough example of your suggested implementation. Thanks again.

code-jaff · Accepted Answer · 2014-03-01 03:58:10Z

0

Your post function actually binds a handler twice to success event, therefore its obvious it's been executed twice. You don't actually need to call function explicitly I suppose. Simply

$("form").on("ajax:success", function(e, data, status, xhr) {
    var json = JSON.parse(xhr.responseText);
    $.each(json, function(k, v) {
      $("#vehicle_record").append('<li class="'+k+'">'+v+'</li>');
    });
});

would work. Don't call post on clicks

answered Mar 1, 2014 at 3:58

code-jaff

9,3284 gold badges38 silver badges56 bronze badges

Collectives™ on Stack Overflow

Rendering out a JSON reponse to HTML page

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related