Javascript - Pass html string containing variables as parameter

Question

I want to execute a function that appends (jQuery) a li to an ul. Now I want to pass a string as a parameter that looks like:

v.name + " by " + v.artist

The problem is that the v.name and v.artist don't exist outside the function, because the function contains an .each loop:

function showAllItems (data, displayText) {
    $("ul.result-list").empty();
    $.each(data.results, function (k, v) {
        var name = eval(displayText);
        if ($("ul.chosen-list input#" + v.name).length == 0) {
            $("ul.result-list")
                .append($("<li>")
                    .append($("<input>", {id: v.name, value: v.name, type: "checkbox"}))
                    .append($("<label>", {html: name, for: v.name, class: "clickable"})));
        }
    });
}

What I am using now is eval(displayText) to convert a string into a real variable. But now I can't pass something like I said earlier (v.name + " by " + v.artist).

In short, I want to print a string containing variables that don't exist until the .each loop.

I hope someone can help me!

Thanks in advance,

Ian Wensink

Why wouldn't it exist, and what do you mean when you claim you're converting a string into a "real variable" ? — adeneo
– adeneo, Commented Mar 26, 2015 at 21:21
Well, I want to print v.name, but v doesn't exist outside the each loop, because that's the value. So I want to pass into the function that it needs to print v.name, but v.name doesn't have a value yet. That's why it has to be a string, which needs to be converted into a variable. — Ian
– Ian, Commented Mar 26, 2015 at 21:29

Guffa · Accepted Answer · 2015-03-26 21:34:55Z

1

Use a callback function to create the value:

function showAllItems (data, getDisplayText) {
  $("ul.result-list").empty();
  $.each(data.results, function (k, v) {
    if ($("ul.chosen-list input#" + v.name).length == 0) {
      var name = getDisplayText(v);
      $("ul.result-list")
        .append($("<li>")
          .append($("<input>", {id: v.name, value: v.name, type: "checkbox"}))
          .append($("<label>", {html: name, for: v.name, class: "clickable"}))
        );
    }
  });
}

Usage:

showAllItems(data, function(v){ return v.name + " by " + v.artist; });

edited Mar 26, 2015 at 21:34

answered Mar 26, 2015 at 21:32

Guffa

703k111 gold badges760 silver badges1k bronze badges

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

9 Comments

Mottie Over a year ago

The .append functions need to be fixed too... appending the input and label to the ul and not the li

Ian Over a year ago

But they should be appended to the li, don't they?

Guffa Over a year ago

@Mottie: They should be inside the list item. You can't have them in the list outside a list item.

Mottie Over a year ago

Look at the source of this demo in Chrome... the lis, inputs and labels are all direct children of the ul.

Ian Over a year ago

Well, besides that discussion, your callback idea worked! I am so thankful!

|

Collectives™ on Stack Overflow

Javascript - Pass html string containing variables as parameter

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related