How to make array of objects in JS

Question

I want to send a multi level array via AJAX. so I tried to make an object of objects as follow:

var info = {};

info.pickup = {};
info.pickup.contact = {};
info.pickup.items_quantity = {};
info.pickup.items = {};

info.delivery = {};
info.delivery.contact = {};
info.delivery.level = {};

then I started filling the objects, for example:

$('.operation-create .pickup .contact-details').each(function () {
    var arr = {};
    arr['contact_name'] = $(this).find('input[name="pickup-contact-name"]').val();
    arr['contact_phone'] = $(this).find('input[name="pickup-contact-phone"]').val();
    arr['pickup-suburb'] = $(this).find('select[name="pickup-suburb"]').val();
    arr['single-pickup-address'] = $(this).find('input[name="single-pickup-address"]').val();
    info.pickup.contact.push(arr);
});
info.pickup.push(info.pickup.contact);

etc...

However unfortunately it didn't work. I get this error:

info.pickup.contact.push is not a function

What I should do here? What is the right way to send this array via AJAX?

your data structure is a bit unclear, because you use info.pickup as array with pushing objects, like info.pickup.contact and at the same time, you use it as plain object with custom properties. — Nina Scholz
– Nina Scholz, Commented Feb 28, 2017 at 8:04
@NinaScholz I am really not good with js objects, that's why I am confused about declaring these arrays — Mohammad
– Mohammad, Commented Feb 28, 2017 at 8:05

Nina Scholz · Accepted Answer · 2017-02-28 08:16:02Z

4

You need an array as value

info.delivery.contact = [];
//                      ^^

The last line

info.pickup.push(info.pickup.contact);

makes no sense, because you have properties in this object. For pushing some values, you need an array

info.pickup = [];
//            ^^

An while you already have an array for info.pickup.contact, you could skip the line

~~info.pickup.push(info.pickup.contact);~~

edited Feb 28, 2017 at 8:16

answered Feb 28, 2017 at 7:54

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

Comments

T.J. Crowder · Accepted Answer · 2017-02-28 08:07:00Z

It's important to understand the difference between an object and an array.

{} creates a plain object, which doesn't have a push method.

[] creates an array, which is an object with additional features, including a push method.

Looking at your code, at the least, you want info.pickup.contact and probably info.delivery.contact to be arrays (I'm guessing probably items_quantity and items as well, but it's hard to be sure). (The thing you call arr in your looping function isn't an array and doesn't need to be.)

So at a minimum:

info.pickup.contact = [];
// -------------------^^

and

info.delivery.contact = [];
// ---------------------^^

You also want to remove the info.pickup.push(info.pickup.contact); at the end; info.pickup isn't an array, and you've already put the contacts in info.pickup.contact.

Side note: Your code might also benefit from using object initializers:

var info = {
    pickup: {
        contact: [],
        items_quantity: {},    // This might also want to be an array
        items: {}              // This might also want to be an array
    },
    delivery: {
        contact: [],
        level: {}              // No idea what you're doing with this, so...
    }
};

$('.operation-create .pickup .contact-details').each(function () {
    info.pickup.contact.push({
        contact_name: $(this).find('input[name="pickup-contact-name"]').val(),
        contact_phone: $(this).find('input[name="pickup-contact-phone"]').val(),
        pickup-suburb: $(this).find('select[name="pickup-suburb"]').val(),
        single-pickup-address: $(this).find('input[name="single-pickup-address"]').val()
    });
});

...but it's a matter of style.

Suresh Atta · Accepted Answer · 2017-02-28 07:56:23Z

3

info.pickup.contact = {};

That is an object declaration, not array.

An array should be

info.pickup.contact = [];  // `[]`

answered Feb 28, 2017 at 7:56

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

Comments

Rory McCrossan · Accepted Answer · 2017-02-28 08:44:22Z

2

As the other answers have stated you need to change the contact from an object (ie. {}) to an array ([]).

Also note that you can use jQuery's map() to build the array and make the code a little more succinct:

info.pickup.contact = $('.operation-create .pickup .contact-details').map(function () {
  return {
    contact_name: $(this).find('input[name="pickup-contact-name"]').val(),
    contact_phone: $(this).find('input[name="pickup-contact-phone"]').val(),
    pickup-suburb: $(this).find('select[name="pickup-suburb"]').val(),
    single-pickup-address: $(this).find('input[name="single-pickup-address"]').val()
  }
}).get();

edited Feb 28, 2017 at 8:44

answered Feb 28, 2017 at 8:00

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Comments

Prasanth-Ramanathan · Accepted Answer · 2017-02-28 08:06:44Z

1

You need an array in order to push a element into it. Here it is object so obviously it is not possible for you to add.

if you want to add then make it as array like

info.pickup.contact = [];

now if you add then it will accept. After adding, your array will be like follows..

info.pickup.contact = [];
info.pickup.contact.push("Sample");

{"pickup":{"contact":["Sample"]}}

answered Feb 28, 2017 at 8:06

Prasanth-Ramanathan

744 bronze badges

Collectives™ on Stack Overflow

How to make array of objects in JS

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related