how to run javascript object from string without using eval()

Question

i have a json object that has item type and id, i need to create new object

var data = { 
            "items":[
                    {"type":"generator","id":"item_1","x":200,"y":200},
                    {"type":"battery","id":"item_2","x":50,"y":300},
                    {"type":"generator","id":"item_3","x":200,"y":280},
                    {"type":"battery","id":"item_4","x":100,"y":400}
                ]
        };

and i need to run for each item in items

jQuery.each(data.items, function(index,value) {
    eval("var " + value.id + " = new " + value.type + "(" + (index + 1) + ");");
    eval(value.id + ".id = '" + value.id + "';");
    eval(value.id + ".draw(" + value.x + "," + value.y + ");")
});

this is not a good practice, but what else can i do?

i need then to have the control on the items

something like

    item_1.moveto(300,700);

but i always get item_1 is undefind

plalx · Accepted Answer · 2014-12-03 00:10:12Z

2

You can create a factory method which allows to generate concrete types out of an abstract data structure:

var createItem = (function () {
    var types = {};

    function createItem(index, data) {
        data = data || {};

        var ctor = types[data.type], item;

        if (!ctor) throw new Error("'" + data.type + "' is not a registered item type.");

        item = new ctor(index);

        item.id = data.id;

        return item;
    }

    createItem.registerType = function (type, ctor) {
        types[type] = ctor;
    };

    return createItem;

})();

Then register item types to the factory:

function Generator(index) {/*...*/}

createItem.registerType('generator', Generator);

And finally create an object map to lookup your items by id (you could use a specialized object like ItemsMap instead of a plain object), loop through your items and add them to the map.

var itemsMap = {};

data.items.forEach(function (itemData, i) {
    var item = itemsMap[itemData.id] = createItem(i + 1, itemData);

    //you can also draw them at this point
    item.draw(itemData.x, itemData.y);
});

You can now lookup objects by id like:

var item1 = itemsMap['item_1'];

edited Dec 3, 2014 at 0:10

answered Dec 2, 2014 at 22:08

plalx

43.8k7 gold badges77 silver badges94 bronze badges

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

3 Comments

Sampath Liyanage Over a year ago

This is a very good pattern. Is it not better removing the registerType function and moving the type functions (ie. Generator,etc) directly into the anonymous function? (If they are not used outside)

Sampath Liyanage Over a year ago

Also if you use "this[itemData.id] = createItem(i+1, itemData)" inside the forEach, you can remove itemsMap object and directly call "item_1".

plalx Over a year ago

@plbsam Using the module pattern can be considered yes, but using this within forEach would pollute the global namespace so it's not an option. You do not want to create a global variable for every item.

SLaks · Accepted Answer · 2014-12-02 21:41:16Z

2

var objects = {};

objects[value.id] = new window[value.type](index + 1);

answered Dec 2, 2014 at 21:41

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

6 Comments

Mark Reed Over a year ago

What's going on here: a global variable like generator is really a property of the global object, which in a browser is window. So plain generator means the same thing as window.generator. The dot syntax is just a shortcut for the bracket syntax that you can use when the field name fits the pattern for an identifier (variable name), so window.generator is exactly the same as window['generator']. That means that if value.type contains the string 'generator', window[value.type] is automatically the same function as the literal generator. No eval required.

eyalb Over a year ago

how then i call to the object? i try item_1

Sampath Liyanage Over a year ago

What if the functions are not defined at window but inside another function? Shouldn't it be this[value.type] ? @SLaks

plalx Over a year ago

@eyalb An object in JS is just like a map. You can lookup your objects by id using objects['item_1'].

plalx Over a year ago

@plbsam It's probably better to use a factory like I describe below. You can then register new types independently of where they live and it free's the client from knowing these details.

|

Collectives™ on Stack Overflow

how to run javascript object from string without using eval()

2 Answers 2

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related