CODEWITHSUNDEEP
jqueryjsondust.js
Delmon Young
Delmon Young

Reputation: 2053

Dust - Looping through json data

I’m extremely stuck here. I’m using dust as a template compiler but for whatever reason I’m only returning one value from my json it’s not looping through and returning everything. So all I’m getting is “DWade” any ideas on what’s going on? Dust newbie so code samples are really really helpful.

JSON:

{
 "locations": [
 {
  "userName": "MKelly",
  "hours":"9-5"
 },
 {
  "userName": "MReynolds",
  "hours":"10-2"
 },
 {
  "userName": "DWade",
  "hours":"9-9"
 }
 ]
}

Here’s my jQuery:

var compiled = dust.compile($('.dust-info').html(), "tmp_skill");
dust.loadSource(compiled);

    $.getJSON("/services/userInfo?" + userTypes, function(data) {      
      $.each( data.locations, function( key, val ) {
      dust.render("tmp_skill", val, function(err, out) {
      //HTML output
      $('.dust-info').html(out);
      });
    });

TEMPLATE:

<div class="dust-info">
   {userName}
   {hours}
 </div>

Upvotes: 0

Views: 276

Answers (2)

kate
kate

Reputation: 179

As your comments with andyw above, you got 1 result because in javascript code, you used this : $('.dust-info').html(out); with .html(out): js will find tag with class 'dust-info', then loop with data.locations and still replace html of this tag, not append - or display as a list, so that's why you just see 1 result. andyw's answer is the best way for looping data and display data list in dust template.

Upvotes: 0

andyw_
andyw_

Reputation: 500

I've never really used dust before, but hopefully I can help a bit.

Firstly, you are clearing everything within .dust-info by changing the innerHTML of .dust-info every time you pass through $.each

try this as a template

{#locations}
    <div class="dust-info">
        {userName} {hours}
    </div>
{:else}
    No Location
{/locations}

Try it out here http://akdubya.github.io/dustjs/ - paste the template in 1 and your template data into 3.

Don't forget that you need to compile your template first before using it.

You should be able to do this afterwards

dust.render("tmp_skill", data.locations, function(err, out) {
    //append generated output to body
    $(body).append(out);
})

This example simply appends the output to the body

Upvotes: 1

Related Questions