How to push an array of values and keys to a JavaScript Object?

Question

I have a very large Javascript Object, with a section that is blank, ready for me to dynamically add data to it. For the purpose of this question, I have removed unnecessary parts of my object.

This is my object:

var simplemaps_worldmap_mapdata = {
    locations:{ 

    }
}

This is my attempt to insert data into the object:

var mainObj = simplemaps_worldmap_mapdata;
var newObj = [];

newObj.push({
    name: 'newName',
    lat: 'newLat',
    lng: 'newLong',
    color: 'newColor',
    description: 'newDesc',
    url: 'newUrl',
    size: 'newSize',
    type: 'newType',
    opacity: 'newOpacity'
});

mainObj.locations.push(newObj);

DEMO HERE

Why can't I dynamically add data to my object?

EDIT:

This is an example of how locations should look with one entry:

locations:{ 
        0: { 
            name: 'newName',
            lat: 'newLat',
            lng: 'newLong',
            color: 'newColor',
            description: 'newDesc',
            url: 'newUrl',
            size: 'newSize',
            type: 'newType',
            opacity: 'newOpacity'
        },
    },

push is a method in array, not in object

Diode
– Diode

2014-06-18 05:51:59 +00:00
Commented Jun 18, 2014 at 5:51 — Diode
– Diode, Commented Jun 18, 2014 at 5:51

Dalorzo · Accepted Answer · 2014-06-18 06:08:58Z

5

The location property is being initialized as object not as an array. Try this:

var simplemaps_worldmap_mapdata = {
    locations:[]
}

From your Edited Version you could also try something like:

Array.prototype.push.call(mainObj.locations, newObj);

edited Jun 18, 2014 at 6:08

answered Jun 18, 2014 at 5:51

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

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

1 Comment

Fizzix Over a year ago

I believe that it needs to be an object though.. I will update my question now with a sample entry of what the data needs to look like upon adding.

Okky · Accepted Answer · 2014-06-18 06:09:34Z

2

If its possible to alter your JSON its better to change location attribute to an array

JSON structure

var simplemaps_worldmap_mapdata = {
    locations: []
};

Code

var mainObj = simplemaps_worldmap_mapdata;
var newObj = {
    name: 'newName',
    lat: 'newLat',
    lng: 'newLong',
    color: 'newColor',
    description: 'newDesc',
    url: 'newUrl',
    size: 'newSize',
    type: 'newType',
    opacity: 'newOpacity'
};

mainObj.locations.push(newObj);

JSFiddle

Update

Hope this fixes your issue

JSON structure

var simplemaps_worldmap_mapdata = {
    locations: {}
};

Code

var mainObj = simplemaps_worldmap_mapdata;
var newObj = {
    name: 'newName',
    lat: 'newLat',
    lng: 'newLong',
    color: 'newColor',
    description: 'newDesc',
    url: 'newUrl',
    size: 'newSize',
    type: 'newType',
    opacity: 'newOpacity'
};

//Code to find no of keys
if (!Object.keys) {
    Object.keys = function (obj) {
        var keys = [],
            k;
        for (k in obj) {
            if (Object.prototype.hasOwnProperty.call(obj, k)) {
                keys.push(k);
            }
        }
        return keys;
    };
}

var len = Object.keys(mainObj.locations).length;

mainObj.locations[len]= newObj;

Result

{
    "locations": {
        "0": {
            "name": "newName",
            "lat": "newLat",
            "lng": "newLong",
            "color": "newColor",
            "description": "newDesc",
            "url": "newUrl",
            "size": "newSize",
            "type": "newType",
            "opacity": "newOpacity"
        }
    }
}

JSFiddle

edited Jun 18, 2014 at 6:09

answered Jun 18, 2014 at 5:59

Okky

10.5k16 gold badges78 silver badges123 bronze badges

3 Comments

Fizzix Over a year ago

Unfortunately, I cannot change the location attribute to an array since I am using a plugin, and I cannot manipulate the object in any way.

Fizzix Over a year ago

Yes, that is completely right. Although, in my production code, this is within a loop, and I need to be able to add many, not just one.

Fizzix Over a year ago

The new code fixed it up perfectly, thanks a ton for your help!

nhaa123 · Accepted Answer · 2014-06-18 05:56:32Z

1

For multiple locations:

var simplemaps_worldmap_mapdata = {
    locations: []
}

var newObj = {
    name: 'newName',
    lat: 'newLat',
    lng: 'newLong',
    color: 'newColor',
    description: 'newDesc',
    url: 'newUrl',
    size: 'newSize',
    type: 'newType',
    opacity: 'newOpacity'
};

var mainObj = simplemaps_worldmap_mapdata;

mainObj.locations.push(newObj);

console.log(mainObj);

answered Jun 18, 2014 at 5:56

nhaa123

9,83811 gold badges46 silver badges63 bronze badges

2 Comments

Fizzix Over a year ago

Works very well. Although, I cannot change the location attribute to an array since I am using a plugin, and I cannot manipulate the object in any way.

nhaa123 Over a year ago

Well, then you shouldn't use 'locations' :) If it's an object, you cannot have multiple entries there.

Collectives™ on Stack Overflow

How to push an array of values and keys to a JavaScript Object?

3 Answers 3

1 Comment

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related