Failing to enumerate over sections in object with JSONP and Mustache JavaScript templating
-
28-10-2019 - |
Question
I am trying to enumerate and build the following fiddle with Mustache.js:
$(function () {
var choices = { "users": [
{ "first_name": "Ryan",
"last_name": "Pays",
"pic_square": "/Global/profile/thumb/placeholder.jpg",
"product_name": "Merlin - the complete box set",
"product_picture": "/Global/products/full/box-set.jpg"
},
{ "first_name": "Eric",
"last_name": "Li Koo",
"pic_square": "/Global/profile/thumb/placeholder.jpg",
"product_name": "Merlin - Series 4 volume 1",
"product_picture": "/Global/products/full/box-set.jpg"
},
{ "first_name": "Abdul",
"last_name": "Raouf",
"pic_square": "/Global/profile/thumb/placeholder.jpg",
"product_name": "Merlin - the complete box set",
"product_picture": "/Global/products/full/box-set.jpg"
}]
};
$.getJSON("http://jsfiddle.net/echo/jsonp/?callback=?", choices, function (data) {
console.log(data);
var template = "<ul>{{#users}}" +
"<li>" +
"<p><strong>{{first_name}} {{last_name}}</strong> likes {{product_name}}</p>" +
"</li>" +
"{{/users}}</ul>",
html = Mustache.to_html(template, data);
$('.wrapper').html(html);
});
});
Example here -> http://jsfiddle.net/mhMJA/3/
It correctly logs the JSON response to the console but then seems to be failing to build the template. If i just pass a single user to the JSONP callback it works fine.
Thanks in advance.
Solution
It's not your fault. It's jsfiddle helps you convert your JSON object to the following format.
{"users[0][first_name]":"Ryan","users[1][first_name]":"Eric","users[2][first_name]":"Abdul","users[2][product_picture]":"/Global/products/full/box-set.jpg","users[1][product_picture]":"/Global/products/full/box-set.jpg","users[1][pic_square]":"/Global/profile/thumb/placeholder.jpg","users[1][product_name]":"Merlin - Series 4 volume 1","users[0][last_name]":"Pays","users[0][product_picture]":"/Global/products/full/box-set.jpg","users[1][last_name]":"Li Koo","users[0][product_name]":"Merlin - the complete box set","users[0][pic_square]":"/Global/profile/thumb/placeholder.jpg","users[2][last_name]":"Raouf","users[2][pic_square]":"/Global/profile/thumb/placeholder.jpg","users[2][product_name]":"Merlin - the complete box set","_":"1326530878282"}
I suggest you write your own JSONP app to avoid this issue. Here is I used JSON2 to get the JSON object out.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow