CODEWITHSUNDEEP
javascriptjqueryhtmlreplacemap-function
John M
John M

Reputation: 201

jQuery - replace in map function

I'm using the following map function to create HTML

 createHtml: function (data) {
        var values = data.map(function(val) {
            return this.li.replace("{{TEXT}}", val.name);
        },{li:this.values });
        this.$ele.html(this.lis.replace("{{NAME}}","cd-view").replace("
                              {{ITEMS}}", values.join("")));
    }

which works fine by displaying the user name on my HTML but when I modify the above code to the following to add id attribute to these usernames, my html renders id attribute as {{ID}} instead 1 or any id value

 createHtml: function (data) {
        var values = data.map(function(val) {
                   **this.li.replace("{{ID}}", item.id);**   -- added newly
            return this.li.replace("{{USER}}", val.name);
        },{li:this.values });
        this.$ele.html(this.lis.replace("{{NAME}}","cd-view").replace("
                              {{ITEMS}}", values.join("")));
    }

can anyone point me where the issue is?

Upvotes: 2

Views: 978

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337626

The issue is because replace() returns a string, it does not affect the original this.li value.

To fix this you need to call replace() to change the {{ID}}and store the result. Then you can call replace() again on this result to change the {{USER}}, something like this:

createHtml: function(data) {
  var values = data.map(function(val) {
    var str = this.li.replace("{{ID}}", item.id);
    return str.replace("{{USER}}", val.name);
  }, {
    li: this.values
  });
  this.$ele.html(this.lis.replace("{{NAME}}", "cd-view").replace("{{ITEMS}}", values.join("")));
}

Upvotes: 1

Related Questions