Binding data to html using jQuery

Question

I have a html template and a json object which I am trying to bind to this template.

var template="<li class=\"ui-menu-item\">\r\n\t<div class=\"container\">\r\n\t\t
              <div class=\"content\">\r\n\t\t\t<img src=\"\" alt=\"\" data-field=\"field2\">
              \r\n\t\t</div>\r\n\t\t<p data-field=\"field1\"></p>\r\n\t\t<p> 
              <span data-field=\"field3\"></span><span data-field=\"field4\"></span> 
              </p>\r\n\t</div>\r\n</li>";

var source=[{
                field1: "value1",
                field2: "value2",
                field3: "value3",
                field4: "value4",
                extrafieldn: "valuen"
           }];

I don't want to use a binding library. Is there some way to iterate over the data-field in the template and read it from the source to finally fill the relevant field in the template. For example, find that field2 is required from the data-field for image, read its value from source and insert this value in the src.

I'd suggest you to try mustache.js, otherwise, you'd just be reinventing. Let me know if you need some help with that for kick start. — Aragorn
– Aragorn, Commented Nov 6, 2015 at 16:28

Zakaria Acharki · Accepted Answer · 2015-11-06 17:16:24Z

1

Working Fiddle

You can loop through your object and replace the key (field1, field2 ...) in your template by the related value to this key (value1, value2 ...) :

var template="<li class=\"ui-menu-item\">\r\n\t<div class=\"container\">\r\n\t\t<div class=\"content\">\r\n\t\t\t<img src=\"\" alt=\"\" data-field=\"field2\">\r\n\t\t</div>\r\n\t\t<p data-field=\"field1\"></p>\r\n\t\t<p> <span data-field=\"field3\"></span><span data-field=\"field4\"></span> </p>\r\n\t</div>\r\n</li>";

var source=[{
    field1: "value1",
    field2: "value2",
    field3: "value3",
    field4: "value4",
    extrafieldn: "valuen"
}];

$.each(source[0] , function(key, val){
    template = template.split('{'+key+'}').join(val);
});

Hope this helps;

edited Nov 6, 2015 at 17:16

answered Nov 6, 2015 at 16:36

Zakaria Acharki

67.5k15 gold badges78 silver badges106 bronze badges

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

2 Comments

Nihar Sarangi Over a year ago

Thanks for the answer. This replaces the value of data-field once. I made slight changes in my template to make it work (by doing away with data-fields and using a structure like <img src="{field1}" /> and template.replace('{'+key+'}',val) However, it replaces the field only once. So, if there are multiple fields in the template that want the same data, they don't get replaced.

Zakaria Acharki Over a year ago

You're welcome and good job, to replace all occurence try to use template = template.split('{'+key+'}').join(val); instead, see my updated answer.

Alex · Accepted Answer · 2015-11-06 17:01:31Z

You can iterate over your data-field for each array element in source

var template = "<li class=\"ui-menu-item\">\r\n\t<div class=\"container\">\r\n\t\t<div class=\"content\">\r\n\t\t\t<img src=\"\" alt=\"\" data-field=\"field2\">\r\n\t\t</div>\r\n\t\t<p data-field=\"field1\"></p>\r\n\t\t<p> <span data-field=\"field3\"></span><span data-field=\"field4\"></span> </p>\r\n\t</div>\r\n</li>";

var source=[{
              field1: "value1",
              field2: "value2",
              field3: "value3",
              field4: "value4",
              extrafieldn: "valuen"
              }];


data = source[0]

for (var key in data) {
    if (data.hasOwnProperty(key)) { // this will check if key is owned by data object and not by any of it's ancestors
        //document.write(key+': '+data[key]); // this will show each key with it's value
        template = template.replace(key,data[key])
    }
}

console.log(template)

guest271314 · Accepted Answer · 2015-11-06 17:04:39Z

0

Try using .map() , .attr()

template = $(template);

template.find("[data-field]").map(function() {
  var field = $(this).attr("data-field");
  $(this).attr("data-field", source[0][field]);
});

jsfiddle https://jsfiddle.net/zg82ftuc/1/

answered Nov 6, 2015 at 17:04

guest271314

1

Collectives™ on Stack Overflow

Binding data to html using jQuery

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related