CODEWITHSUNDEEP
javascriptjqueryarraysjavascript-objects
Mohammad
Mohammad

Reputation: 3547

How to make array of objects in JS

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?

Upvotes: -1

Views: 210

Answers (5)

Rory McCrossan
Rory McCrossan

Reputation: 337560

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();

Upvotes: 2

Nina Scholz
Nina Scholz

Reputation: 386604

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);

Upvotes: 4

T.J. Crowder
T.J. Crowder

Reputation: 1074355

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.

Upvotes: 3

Prasanth-Ramanathan
Prasanth-Ramanathan

Reputation: 74

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"]}}

Upvotes: 1

Suresh Atta
Suresh Atta

Reputation: 121998

info.pickup.contact = {};

That is an object declaration, not array.

An array should be 

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

Upvotes: 3

Related Questions