Javascript/Jquery object.array.push()

Question

I am new in js programming and i have some problem. This example is trivialization of my problem. Here's function:

function sendOrder(){

    var someObject = {items:[]}; 

    $(document).ready(function(){               
        // pushing some item to array in object
        someObject.items.push({Name: "Orange", Quantity: 2, OrderUnit: "kg"});  
    });  

    // pushing second item to array in object
    someObject.items.push({Name: "Lemon", Quantity: 3, OrderUnit: "kg"});    

    console.log(JSON.stringify(someObject)); //print object
}

Result from console is:

{"items":[{"Name":"Lemon","Quantity":3,"OrderUnit":"kg"}]}

My question is: why Lemon is pushed to array in object and Orange is not?

the console.log() is being executed as soon as the JS is loaded, which means (likely) before the DOM has been loaded. $(document).ready() is available when the DOM has been loaded, so the log has been called before the ready function. — Snowmonkey
– Snowmonkey, Commented Apr 5, 2017 at 15:07
Thanks to all of you guys for comprehensive and quick answers. — deepblue
– deepblue, Commented Apr 5, 2017 at 15:27

trincot · Accepted Answer · 2017-04-05 15:10:12Z

2

If you call sendOrder immediately from your script element, then it will execute before the DOM notifies that the document is ready. This is also when your console.log call is executed.

On the other hand, the function that you pass to $(document).ready( ... ) will only be executed later, when the DOM notifies that the document has loaded. Then also that item will be added to your array, but this comes too late for being displayed by the console.log that was already executed.

Either move the console.log at the end of the callback function passed to $(document).ready, or move the push out of there, so that both push calls have happened before you display the result. In the first case the order will be opposite to what you might expect.

answered Apr 5, 2017 at 15:10

trincot

357k38 gold badges282 silver badges338 bronze badges

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

Comments

kind user · Accepted Answer · 2017-04-05 15:23:03Z

2

console.log shows the actual state of the array, but since the document is not ready and the Orange object is not pushed yet, it shows up only the Lemon object.

You can e.g. add a setTimeout function with 1ms delay to let the console.log wait until the page loads and both assigments are executed.

Note: The best option anyways would be just to get rid of that function, because it's just unnecessary.

function sendOrder() {

  var someObject = {
    items: []
  };

  $(document).ready(function() {
    someObject.items.push({
      Name: "Orange",
      Quantity: 2,
      OrderUnit: "kg"
    }); //pushing some item to array in object
  });

  someObject.items.push({
    Name: "Lemon",
    Quantity: 3,
    OrderUnit: "kg"
  }); //pushing second item to array in object 

  setTimeout(() => {
    console.log(someObject); //print object
  }, 1);

}


sendOrder();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Apr 5, 2017 at 15:23

answered Apr 5, 2017 at 15:06

kind user

42k8 gold badges69 silver badges78 bronze badges

2 Comments

dfsq Over a year ago

Yea, sorry to hear it. When I left a comment the answer was incomplete. Screw all downvoters, you have +3 anyway and one from me. Cheerz!

kind user Over a year ago

@dfsq Huh, I hold no grudges anymore, it's all good. Cheers up!

Jeff Swearingen · Accepted Answer · 2017-04-05 15:06:48Z

1

I'm assuming that the console.log is running before the Orange push command executes. When you use $document.ready.function, it will wait until the entire page loads before executing the code in the function. So your code outside of the document.ready.function will run BEFORE the code in the document.ready.function executes.

answered Apr 5, 2017 at 15:06

Jeff Swearingen

661 silver badge9 bronze badges

Comments

Ecstabis · Accepted Answer · 2017-04-05 15:11:33Z

The Orange is also in the array, the problem is that the console.log is executed before it was added. If you add an other console.log after the orange, you can see this.

function sendOrder(){

var someObject = {items:[]}; 

$(document).ready(function(){               
    someObject.items.push({Name: "Orange", Quantity: 2, OrderUnit: "kg"});  //pushing some item to array in object
    console.log(JSON.stringify(someObject)); 
});  

someObject.items.push({Name: "Lemon", Quantity: 3, OrderUnit: "kg"});   //pushing second item to array in object 

console.log(JSON.stringify(someObject)); //print object
}

sendOrder();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

ibrahim mahrir · Accepted Answer · 2017-04-05 15:26:26Z

1

The document.ready's callback is not called right away. It's called when the document is loaded, that after the log has happened. Here is an example of what is happening:

var arr = [];

setTimeout(function() {
  arr.push("orange");   // will be pushed but after a second
}, 1000);

arr.push("apple");      // pushed right away (as a matter of fact pushed firstly because the above one is not evaluated so "orange" is not yet pushed

console.log("First Log: ", arr); // logged right away (before "orange" is pushed)

// Wait 2 second then log the array again
setTimeout(function() {
  console.log("Delayed Log: ", arr); // enough time has passed (both "apple" and "orange" are pushed)
}, 2000);

answered Apr 5, 2017 at 15:26

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

Comments

Snowmonkey · Accepted Answer · 2017-04-05 15:08:27Z

0

Keep the document.ready function, better to wait until your page is in a stable state before you code anyway. Instead, move the console.log INTO the document.ready, by which point you'll see both objects.

function sendOrder(){

var someObject = {items:[]}; 

$(document).ready(function(){               
    someObject.items.push({Name: "Orange", Quantity: 2, OrderUnit: "kg"});  //pushing some item to array in object
    
    console.log(JSON.stringify(someObject)); //print object
});  

someObject.items.push({Name: "Lemon", Quantity: 3, OrderUnit: "kg"});   //pushing second item to array in object 


}

answered Apr 5, 2017 at 15:08

Snowmonkey

3,7611 gold badge18 silver badges16 bronze badges

Comments

Franco Bianconi · Accepted Answer · 2017-04-05 15:18:50Z

0

this

$(document).ready(function() {...})

is just setting a function to be executed once the document is ready, It doesn't execute right away. You can use a similar form to respond to clicks on elements, like this:

$("#some-element").click(function() {...})

and you should only expect to execute when the event happens.

answered Apr 5, 2017 at 15:18

Franco Bianconi

1977 bronze badges

Collectives™ on Stack Overflow

Javascript/Jquery object.array.push()

7 Answers 7

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related