Declaring array of objects

JavascriptArraysObjectDeclare

Javascript Problem Overview


I have a variable which is an array and I want every element of the array to act as an object by default. To achieve this, I can do something like this in my code.

var sample = new Array();
sample[0] = new Object();
sample[1] = new Object();

This works fine, but I don't want to mention any index number. I want all elements of my array to be an object. How do I declare or initialize it?

var sample = new Array();
sample[] = new Object();

I tried the above code but it doesn't work. How do I initialize an array of objects without using an index number?

Javascript Solutions


Solution 1 - Javascript

Use array.push() to add an item to the end of the array.

var sample = new Array();
sample.push(new Object());

To do this n times use a for loop.

var n = 100;
var sample = new Array();
for (var i = 0; i < n; i++)
    sample.push(new Object());

Note that you can also substitute new Array() with [] and new Object() with {} so it becomes:

var n = 100;
var sample = [];
for (var i = 0; i < n; i++)
    sample.push({});

Solution 2 - Javascript

Depending on what you mean by declaring, you can try using object literals in an array literal:

var sample = [{}, {}, {} /*, ... */];

EDIT: If your goal is an array whose undefined items are empty object literals by default, you can write a small utility function:

function getDefaultObjectAt(array, index)
{
    return array[index] = array[index] || {};
}

Then use it like this:

var sample = [];
var obj = getDefaultObjectAt(sample, 0);     // {} returned and stored at index 0.

Or even:

getDefaultObjectAt(sample, 1).prop = "val";  // { prop: "val" } stored at index 1.

Of course, direct assignment to the return value of getDefaultObjectAt() will not work, so you cannot write:

getDefaultObjectAt(sample, 2) = { prop: "val" };

Solution 3 - Javascript

You can use fill().

let arr = new Array(5).fill('lol');

let arr2 = new Array(5).fill({ test: 'a' });
// or if you want different objects
let arr3 = new Array(5).fill().map((_, i) => ({ id: i }));

Will create an array of 5 items. Then you can use forEach for example.

arr.forEach(str => console.log(str));

Note that when doing new Array(5) it's just an object with length 5 and the array is empty. When you use fill() you fill each individual spot with whatever you want.

Solution 4 - Javascript

After seeing how you responded in the comments. It seems like it would be best to use push as others have suggested. This way you don't need to know the indices, but you can still add to the array.

var arr = [];
function funcInJsFile() {
    // Do Stuff
    var obj = {x: 54, y: 10};
    arr.push(obj);
}

In this case, every time you use that function, it will push a new object into the array.

Solution 5 - Javascript

You don't really need to create blank Objects ever. You can't do anything with them. Just add your working objects to the sample as needed. Use push as Daniel Imms suggested, and use literals as Frédéric Hamidi suggested. You seem to want to program Javascript like C.

var samples = []; /* If you have no data to put in yet. */
/* Later, probably in a callback method with computed data */
/* replacing the constants. */
samples.push(new Sample(1, 2, 3)); /* Assuming Sample is an object. */
/* or */
samples.push({id: 23, chemical: "NO2", ppm: 1.4}); /* Object literal. */

I believe using new Array(10) creates an array with 10 undefined elements.

Solution 6 - Javascript

You can instantiate an array of "object type" in one line like this (just replace new Object() with your object):

var elements = 1000;
var MyArray = Array.apply(null, Array(elements)).map(function () { return new Object(); });

Solution 7 - Javascript

Well array.length should do the trick or not? something like, i mean you don't need to know the index range if you just read it..

var arrayContainingObjects = [];
for (var i = 0; i < arrayContainingYourItems.length; i++){
    arrayContainingObjects.push {(property: arrayContainingYourItems[i])};
}

Maybe i didn't understand your Question correctly, but you should be able to get the length of your Array this way and transforming them into objects. Daniel kind of gave the same answer to be honest. You could just save your array-length in to his variable and it would be done.

IF and this should not happen in my opinion you can't get your Array-length. As you said w/o getting the index number you could do it like this:

var arrayContainingObjects = [];
for (;;){
    try{
        arrayContainingObjects.push {(property: arrayContainingYourItems[i])};
    }
}
catch(err){
    break;
}

It is the not-nice version of the one above but the loop would execute until you "run" out of the index range.

Solution 8 - Javascript

//making array of book object
var books = [];
    var new_book = {id: "book1", name: "twilight", category: "Movies", price: 10};
    books.push(new_book);
    new_book = {id: "book2", name: "The_call", category: "Movies", price: 17};
    books.push(new_book);
    console.log(books[0].id);
    console.log(books[0].name);
    console.log(books[0].category);
    console.log(books[0].price);

// also we have array of albums
var albums = []    
    var new_album = {id: "album1", name: "Ahla w Ahla", category: "Music", price: 15};
    albums.push(new_album);
    new_album = {id: "album2", name: "El-leila", category: "Music", price: 29};
    albums.push(new_album);
//Now, content [0] contains all books & content[1] contains all albums
var content = [];
content.push(books);
content.push(albums);
var my_books = content[0];
var my_albums = content[1];
console.log(my_books[0].name);
console.log(my_books[1].name); 

console.log(my_albums[0].name);
console.log(my_albums[1].name); 

This Example Works with me. Snapshot for the Output on Browser Console

Solution 9 - Javascript

Try this-

var arr = [];
arr.push({});

Solution 10 - Javascript

const sample = [];
    list.forEach(element => {
      const item = {} as { name: string, description: string };
      item.name= element.name;
      item.description= element.description;
      sample.push(item);
    });
    return sample;

Anyone try this.. and suggest something.

Solution 11 - Javascript

Use array.push() to add an item to the end of the array.

var sample = new Array();
sample.push(new Object());

you can use it

var x = 100;
var sample = [];
for(let i=0; i<x ;i++){
  sample.push({}) 
  OR
  sample.push(new Object())
}    

Solution 12 - Javascript

Using forEach we can store data in case we have already data we want to do some business login on data.

var sample = new Array();
var x = 10;
var sample = [1,2,3,4,5,6,7,8,9];
var data = [];

sample.forEach(function(item){
    data.push(item);
})

document.write(data);

Example by using simple for loop

var data = [];
for(var i = 0 ; i < 10 ; i++){
   data.push(i);
}
document.write(data);

Solution 13 - Javascript

If you want all elements inside an array to be objects, you can use of JavaScript Proxy to apply a validation on objects before you insert them in an array. It's quite simple,

const arr = new Proxy(new Array(), {
  set(target, key, value) {
    if ((value !== null && typeof value === 'object') || key === 'length') {
      return Reflect.set(...arguments);
    } else {
      throw new Error('Only objects are allowed');
    }
  }
});

Now if you try to do something like this:

arr[0] = 'Hello World'; // Error

It will throw an error. However if you insert an object, it will be allowed:

arr[0] = {}; // Allowed

For more details on Proxies please refer to this link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

If you are looking for a polyfill implementation you can checkout this link: https://github.com/GoogleChrome/proxy-polyfill

Solution 14 - Javascript

The below code from my project maybe it good for you

  reCalculateDetailSummary(updateMode: boolean) {

    var summaryList: any = [];
    var list: any;
    if (updateMode) { list = this.state.pageParams.data.chargeDefinitionList }
    else {
        list = this.state.chargeDefinitionList;
    }

    list.forEach((item: any) => {
        if (summaryList == null || summaryList.length == 0) {
            var obj = {
                chargeClassification: item.classfication,
                totalChargeAmount: item.chargeAmount
            };
            summaryList.push(obj);

        } else {
            if (summaryList.find((x: any) => x.chargeClassification == item.classfication)) {
                summaryList.find((x: any) => x.chargeClassification == item.classfication)
                    .totalChargeAmount += item.chargeAmount;
            }
        }
    });

    if (summaryList != null && summaryList.length != 0) {
        summaryList.push({
            chargeClassification: 'Total',
            totalChargeAmount: summaryList.reduce((a: any, b: any) => a + b).totalChargeAmount
        })
    }

    this.setState({ detailSummaryList: summaryList });
}

Solution 15 - Javascript

var ArrayofObjects = [{}]; //An empty array of objects.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPrasath KView Question on Stackoverflow
Solution 1 - JavascriptDaniel ImmsView Answer on Stackoverflow
Solution 2 - JavascriptFrédéric HamidiView Answer on Stackoverflow
Solution 3 - JavascriptCedView Answer on Stackoverflow
Solution 4 - JavascriptJeff ShaverView Answer on Stackoverflow
Solution 5 - JavascriptEric JablowView Answer on Stackoverflow
Solution 6 - JavascriptMarzSocksView Answer on Stackoverflow
Solution 7 - JavascriptspitterflyView Answer on Stackoverflow
Solution 8 - JavascriptAbdallah OkashaView Answer on Stackoverflow
Solution 9 - JavascriptShuklaSannidhyaView Answer on Stackoverflow
Solution 10 - JavascriptCegoneView Answer on Stackoverflow
Solution 11 - JavascriptashishdudhatView Answer on Stackoverflow
Solution 12 - JavascriptSachin ShahView Answer on Stackoverflow
Solution 13 - JavascriptSachin SinghView Answer on Stackoverflow
Solution 14 - JavascriptMetin AtalayView Answer on Stackoverflow
Solution 15 - JavascriptMattView Answer on Stackoverflow