Push multiple values into an array in Javascript not working

Question

I'm trying to push multiple values into an array based on the elements ID.

I expect the outcome to be 3 and 4 but instead I get 1 2 3 4. Why is that the case in the following example?

var myArray = [];
$( '#bla' ).each( function() {
 myArray.push( {
 test: $( this ).text(),
 });
});
console.log( myArray );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 <div>1</div>
 <div>2</div>
 <div id="bla">3</div>
 <div id="bla">4</div>
</div>

• Gerardo Furtado: Not related to you question: IDs should be unique. Use classes instead.
• Damiano: Repeating an id is never a good idea (should be a unique identifier)
• Amit: @GerardoFurtado - why is that not related?
• NewToJS: Well this is using jQuery which you haven't tagged in your question so be sure to check you have included the jQuery library and you shouldn't duplicate ID's. ID's are supposed to be unique. I would recommend you swap from using id's to using a class name. While testing things in javascript / jQuery I would also recommend you open the browser console so you can see any errors that might be reported/given. This will also tell you the cause of error and which line this error has occurred on.
• Sanchit Patiyal: No way you are getting 1 2 3 4 from that code

Answer 1

You are seeing the content of the your HTML, and not the console.log.

This is what you need to fix:

1. Include jQuery
2. Use class instead of id - there can be only one id in a document, so you'll get only one result
3. Look at the console

var myArray = [];
$( '.bla' ).each( function() {
 myArray.push( {
 test: $( this ).text(),
 });
});
console.log( myArray );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 <div>1</div>
 <div>2</div>
 <div class="bla">3</div>
 <div class="bla">4</div>
</div>

Answer 2

First id has to be unique replace id with class and use your snippet

var myArray = [];
$( '.bla' ).each( function() {
 myArray.push( {
 test: $( this ).text(),
 });
});
console.log( myArray );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 <div>1</div>
 <div>2</div>
 <div class="bla">3</div>
 <div class="bla">4</div>
</div>

Answer 3

First of all, you can't have two HTML elements with same id attribute. It is unique indeficator, it should be only one on page.

And second, if you are using your js script from external (not inluded between <scritp></script>) you should use (document.ready or in jQuery $(docuemnt).ready(function(){}) [in my case it is short way to do this]), because you don't want to read HTML values before your is not loaded.

(function () {
 var myArray = [];
 $( '.bla' ).each( function() {
 myArray.push( {
 test: $( this ).text(),
 });
 });
 
 console.log( myArray );
}());

<div>
 <div>1</div>
 <div>2</div>
 <div class="bla">3</div>
 <div class="bla">4</div>
</div>

• Muhammad Usman: you're doing nothing other than replacing id with class