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>

Not related to you question: IDs should be unique. Use classes instead. — Gerardo Furtado
– Gerardo Furtado, Commented Nov 4, 2017 at 22:20
Repeating an id is never a good idea (should be a unique identifier) — Damiano
– Damiano, Commented Nov 4, 2017 at 22:20
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. — NewToJS
– NewToJS, Commented Nov 4, 2017 at 22:20

Ori Drori · Accepted Answer · 2017-11-04 22:21:23Z

4

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

This is what you need to fix:

Include jQuery
Use class instead of id - there can be only one id in a document, so you'll get only one result
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>

answered Nov 4, 2017 at 22:21

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

Comments

Geeky · Accepted Answer · 2017-11-04 22:21:28Z

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>

answered Nov 4, 2017 at 22:21

Geeky

7,5142 gold badges28 silver badges52 bronze badges

Comments

Martin Homola · Accepted Answer · 2017-11-04 22:30:42Z

0

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>

answered Nov 4, 2017 at 22:30

Martin Homola

2451 silver badge14 bronze badges

1 Comment

Muhammad Usman Over a year ago

you're doing nothing other than replacing id with class

Collectives™ on Stack Overflow

Push multiple values into an array in Javascript not working

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related