Javascript: Getting variable name from HTML

Question

I am attempting to create a reusable javascript / jQuery function where only the HTML will be editable. Basically, the jQuery script will look for a certain class on a form select element, and it will populate the select box. It's going to use an xml document, that will be fed into JavaScript variables.

<form>
    <select name="topliclist" class="mhs-events" data-event-xml="/xml/events.xml" data-event-text="$fullDate, at ,$startTime, - ,$location"></select>
</form>

In this example, 'fullDate', 'startTime' and 'location' are variables in the JavaScript:

//js
var fullDate = 'Monday, October 7';
var startTime = '6:30 PM';
var location = 'Office Building 1';

(don't worry about feeding the variable from xml, I can do that.)

The 'string' variable will equal the data-event-text:

//js
var string = '$fullDate, at ,$startTime, - ,$location';
$.each(string.split(","), function(index, item) {

            //remove $, only put this to specify that it is a variable
            if(item.indexOf('$') == 0) {
                item = $(item.substring(1));
                item = item.toString();
            }

            newString += item
        });

        $(this).append('<option>' + newString + '</option>');

Instead of 'Monday, October 7 at 6:30 PM - Office Building 1', it populates '[object Object] at [object Object] - [object Object];

What is the best way to get the variable name from the data-event-text attribute and actually use it to get the variable value in JavaScript?

do a console.log and check what are you getting in newString — Satpal
– Satpal, Commented Oct 7, 2013 at 18:29
try console.dir() in Chrome... you can expand the object to see its properties, this will tell you which property to use. — adam
– adam, Commented Oct 7, 2013 at 18:31

Kiran · Accepted Answer · 2013-10-07 18:48:00Z

1

Change

item = $(item.substring(1)); // this converts your string to object
item = item.toString();

to

item = item.substring(1);
item = eval(item).toString();

And you dont need to add every item into newString which will return all items as one option.

Try:

$.each(string.split(","), function(index, item) {
            //remove $, only put this to specify that it is a variable
            if(item.indexOf('$') == 0) {
                item = item.substring(1);
                item = eval(item).toString();
            }
           newString += item;
});
$('.mhs-events').append('<option>' + newString + '</option>');

DEMO FIDDLE

edited Oct 7, 2013 at 18:48

answered Oct 7, 2013 at 18:32

Kiran

20.3k11 gold badges72 silver badges101 bronze badges

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

3 Comments

nitsuj Over a year ago

I converted it because without, it will return 'fullDate' instead of the value of the fullDate variable. Thoughts?

nitsuj Over a year ago

Also, I do not want to create a new option for every word in the string.

nitsuj Over a year ago

Please see my comment. I do not want to add a new <option></option> for each word. That's why I put it outside of my $.each statement.

S4beR · Accepted Answer · 2013-10-07 18:38:38Z

You can write a method as below

    function readString(el1, el2, el3, x) {

        var newStr = '';
        var temp = x.split(' ');
        for (var i = 0; i < temp.length; i++) {
            var str = temp[i];
            if (str.indexOf('$') == 0) {
                newStr += eval(str.substring(1, str.length));
            } else {
                newStr += str;
            }

            newStr += ' ';
        }

        return newStr;
    }

To call

readString("I", "am" ,"saying", "$el1 $el2 $el3 hello!!!")

Collectives™ on Stack Overflow

Javascript: Getting variable name from HTML

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related