Creating named javascript objects in loop

Question

I am looking for an explanation how this type of javascript object:

var regions = {
        'Belgium': { tooltip: 'Test', attr: { fill: '#ff0000' } },
        'Netherlands': { tooltip: 'Test', attr: { fill: '#ff0000' } },
        'USA': { tooltip: 'Test', attr: { fill: '#ff0000' } },
        'United_Kingdom': { tooltip: 'Test', attr: { fill: '#ff0000' } },
        'Tanzania': { tooltip: 'Test', attr: { fill: '#ff0000' } },
        'Germany': { tooltip: 'Test', attr: { fill: '#ff0000' } },
        'France': { tooltip: 'Test', attr: { fill: '#ff0000' } },
        'Spain': { tooltip: 'Test', attr: { fill: '#ff0000' } }           
    };

can result into this in the browser and how I can programatically create such object:

  Netherlands: Object, 
  United_Kingdom: Object, 
> Tanzania: Object…
  > attr: Object
     fill: "#00ff11"         
  tooltip: "Test"     
> Australia: Object...
  > attr: Object
     fill: "#00ff11"         
  tooltip: "Test"

What I'm trying to achieve here is to have the same result in the browser but with a dynamic list of objects (so no declarative code as opposed to the regions object above).

For the moment I use this method but the result is a string, which is not what I need. Besides, it's really ugly code which I'd like to get rid of:

function getRegions(data) {
        var arr = new Array();
        $.each(data, function (i, country) {

            var row = "'" + data[i].Country + "': { tooltip: 'Test', attr: { fill: '" + data[i].Color + "'} }";
            var parsedJson = JSON.parse(JSON.stringify(row));
            arr.push(parsedJson);
        });

        var result = JSON.parse(JSON.stringify('{ ' + arr + '}'));
        return result;
    }

I'm having problems to understand how the named objects are being instantiated and how I can do this programmatically in a loop without knowing the actual names upfront. I'd need some constructions like this but I doubt that this will actually work:

var data[i].Country = { tooltip: 'Test', attr: { fill: '#ff0000' } };

Any ideas how to solve this?

Could you explain what you are trying to achieve? Your so-called 'output' in the browser is inconsistent with your regions object. And your code seems to try to create completely differently formatted output. — wintvelt, Oct 03 '15 at 10:05
Nevermind the output, it's just a way of showing how data is declared and how data is rendered in the browser. The question was how I can create the same kind of output programatically and not declaratively. — hbulens, Oct 03 '15 at 12:03

score 3 · Accepted Answer · answered Oct 03 '15 at 09:55

3

You are way over complicating this. You can just use object literal notation and bracket notation.

function getRegions(data) {
    var result = {};
    $.each(data, function (i, country) {
        result[data[i].Country] = {
            tooltip: 'Test',
            attr: {
                fill: data[i].Color
            }
        };
    });
    return result;
}

answered Oct 03 '15 at 09:55

Lenny

5,663
2
19
27

Great, that's it! So my suggested solution wasn't so stupid as I thought. – hbulens Oct 03 '15 at 09:57
1

Yup, you were pretty close. You just have to use the brackets `result[data[i].Country]` when using a variable as a key name. – Lenny Oct 03 '15 at 10:00

Creating named javascript objects in loop

1 Answers1

Linked