Best practice for creating new objects within objects in Javascript

Question

I have some data that is in an array that contains url's for images. Here the thing, within the img object of the data object, I want to make as many imgs as the length of the array (Make sense hopefully?). In other words, I just want to create a new object over and over again. What would you recommend as the best approach to solving this problem. I know this seems simple.

  var data = [{
                title: "asdfadf",
                thumb: "images/asdf.jpg",
                imgs: [{
                        title: "asdfasdf ",
                        thumb: "images/asdff.jpg",
                        img: "images/asdf.jpg",
                    },
                    {
                        title: "asdf",
                        thumb: "images/asdf.jpg",
                        img: "images/asdf.jpg",
                    },
                    {
                        title: "Gasdfafafasfasfasfasf. ",
                        thumb: "images/asdf.jpg",
                        img: "images/asdf.jpg",
                    },
                    {
                        title: "aswdf",
                        thumb: "images/asdfD.jpg",
                        img: "images/asdf.jpg",
                    },

                ]
            }];

This is I think is the best practice

Uday Hiwarale
– Uday Hiwarale

2013-11-07 18:09:53 +00:00
Commented Nov 7, 2013 at 18:09 — Uday Hiwarale
– Uday Hiwarale, Commented Nov 7, 2013 at 18:09
You have extra commas all over the place

Roko C. Buljan
– Roko C. Buljan

2013-11-07 18:18:21 +00:00
Commented Nov 7, 2013 at 18:18 — Roko C. Buljan
– Roko C. Buljan, Commented Nov 7, 2013 at 18:18

vladzam · Accepted Answer · 2013-11-07 18:20:13Z

2

Instead of declaring data as an array, declare it as an object, while keeping the declaration of the imgs property as an array:

  var data = {
                title: "asdfadf",
                thumb: "images/asdf.jpg",
                imgs: [{
                        title: "asdfasdf ",
                        thumb: "images/asdff.jpg",
                        img: "images/asdf.jpg"
                    },
                    {
                        title: "asdf",
                        thumb: "images/asdf.jpg",
                        img: "images/asdf.jpg"
                    },
                    {
                        title: "Gasdfafafasfasfasfasf. ",
                        thumb: "images/asdf.jpg",
                        img: "images/asdf.jpg"
                    },
                    {
                        title: "aswdf",
                        thumb: "images/asdfD.jpg",
                        img: "images/asdf.jpg"
                    }

                ]
            };

Then, you could simply get the value of the imgs array property on the data object, loop over it and build up the images, for example:

var html = '';
for (var i = 0; i < data.imgs.length; i++) {

    html += 'Image title: ' + data.imgs[i].title;
    html += 'Image thumb: ' + data.imgs[i].thumb;
    html += 'Image img: ' + data.imgs[i].img + '<br>';
}

// Set the innerHtml only once, when you have built up your whole html
document.getElementById('myDiv').innerHtml = html;

As for returning an object each time, I believe that it would be much simpler if you would return the elements of the imgs array instead of creating new objects. Your imgs array already contains the objects!

for (var i = 0; i < data.imgs.length; i++) {
    // This will return each object contained within the imgs array
    console.log(data.imgs[i]);
}

edited Nov 7, 2013 at 18:20

answered Nov 7, 2013 at 18:14

vladzam

5,9586 gold badges33 silver badges36 bronze badges

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

2 Comments

Roko C. Buljan Over a year ago

Like otherwise it's impossible? data[0].imgs[i]

vladzam Over a year ago

I didn't say it was not possible :) I just wanted to offer him my own version. I believe that it is a lot better to declare an object, instead of declaring it as he did. Just my two cents! :)

Collectives™ on Stack Overflow

Best practice for creating new objects within objects in Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related