0

I am trying to create an object of locations for placing points on a map.

My code is:

    var Locs = [{}];
    var title = '', content = '';

    for (i = 0; i < locations.length; i++) {


      content = '<div id="bodyContent">' +
                '<p><b>' + locations[i][0] + '</b><br />' +
                locations[i][4] +
                '</div>';

         Locs[i]['lat']   = locations[i][1];
         Locs[i]['lon']   = locations[i][2];
         Locs[i]['zoom']  = zoom;
         Locs[i]['title'] = locations[i][0];
         Locs[i]['html']  = content;

    }

I keep getting an error: TypeError: Locs[i] is undefined If I replace i with 0 it works for displaying one point on the map.

What I need to output is:

var Locs = [
    {
        lat: 45.9,
        lon: 10.9,
        zoom: 3,
        title: 'Title A1',
        html: '<h3>Content A1</h3>'
    },
    {
        lat: 44.8,
        lon: 1.7,
        zoom: 3,
        title: 'Title B1'
        html: '<h3>Content B1</h3>'
    },
    {
        lat: 51.5,
        lon: -1.1,
        zoom: 3,
        title: 'Title C1',
        html: '<h3>Content C1</h3>'
    }
];

So I am wondering if someone can explain to me what I don't understand about creating an object dynamically?

Improve this question
4
  • Is Locs already defined as a method or something, what happens if you change the name to location_array Commented Mar 29, 2016 at 17:27
  • 1
    I'm not clear on what the problem is. Locs = [] then later Locs.push({ lat: 1, lon: 2, etc }) Commented Mar 29, 2016 at 17:27
  • You're currently initializing Locs as an array containing a single object. You should initialize it as an empty array : var Locs = []; and then initialize each object, on each iteration : Locs[i] = {}; Commented Mar 29, 2016 at 17:30
  • For each iteration you need: Locs[i] = {}; to define a new object. var Locs = [] also, Commented Mar 29, 2016 at 17:30

3 Answers 3

Reset to default
3

You have to create a new object first before accessing that,

Locs[i] = {};
Locs[i]['lat']   = locations[i][1];
Locs[i]['lon']   = locations[i][2];
Locs[i]['zoom']  = zoom;
Locs[i]['title'] = locations[i][0];
Locs[i]['html']  = content;

If you do not create it then your code would be evaluated like,

Locs[i]['lat']
undefined['lat'] //will throw error here.
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

As the error states, you are trying to create new keys to an object that is undefined. Before assigning values to an object, you need to create it.

When you do var Locs = [{}];, it creates an array with one empty object, that's why it works when you replace i by 0. You can either add Locs[i] = {}; before assigning the latitude to create an empty object, or directly something like: Locs.push({lat: locations[i][1], long: locations[i][2], ...etc});

Improve this answer

Comments

-1

Initiate arrays for each loop. This code will help you:

var Locs = [];
Locs[1] = [];
Locs[1]['lat'] = 123;
Locs[1]['long'] = 123;
Locs[2] = [];
Locs[2]['lat'] = 123;
Locs[2]['long'] = 123;
Improve this answer

2 Comments

At the very least it should be Locs[1] = {}
Don't use arrays as associative arrays. That's what objects are for.