creating array object on each loop

Question

I'm trying to create an ddData object for each element with id #user, but for some reason it is just displaying the last object.

This is my js:

var count = $('*#user').length;
ddData = [];
i = 1;
$.each($('*#user'), function () {
    for (i = 1; i <= count; i++) {
        $names = $(this).html();
        ddData = [{
            text: $names,
            value: i++,
            imageSrc: "images/usuari.png"
        }];

        console.log($names);
    }
});

$('#usuarisLlista').ddslick({
    data: ddData,
    width: "200px",
    imagePosition: "left",
    selectText: "Selecciona un usuari"

});

So the console.log(names) output the 3 elements there are (the number of elements can be increased so it can't be a fixed number):

But, it is only displaying the last one:

Can anyone tell me why I am not doing the loop properly? I've tried to find the solution, and I've found in older posts I can use push(), but I can not understand where to add it in my code :S

Thank you!

be careful creating global variables in loops .... should be var $names = $(this).html() — charlietfl
– charlietfl, Commented Oct 20, 2015 at 15:10

Tushar · Accepted Answer · 2015-10-20 15:44:04Z

1

Use push to add new elements in the array

ddData.push({
    text: $names,
    value: i++,
    imageSrc: "images/usuari.png"
});

When

ddData = [{
    text: $names,
    value: i++,
    imageSrc: "images/usuari.png"
}];

is used, the variable will be reinitialized with the value assigned. So, after loop, only the last element will be present in the array.

One more thing is that the selector to select the element with id user is incorrect.

var count = $('*#user').length; // Remove * from this

The code contains duplicate ids. ID should be unique, use class instead of id.

Demo

$(document).ready(function() {

  var ddData = [];
  var i = 0;
  $.each($('.user'), function() {
    var names = $(this).html();
    ddData.push({
      text: names,
      value: i++,
      imageSrc: "images/usuari.png"
    });
    console.log(names);
  });

  $('#userList').ddslick({
    data: ddData,
    width: "200px",
    imagePosition: "left",
    selectText: "Select a user"
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/ddslick/2.0/jquery.ddslick.js"></script>
<table>
  <tr>
    <td class="user">Evelia Molina</td>
    <td class="user">Andy Gon</td>
    <td class="user">Berta Belgrat</td>
  </tr>
</table>
<div id="userList"></div>

edited Oct 20, 2015 at 15:44

answered Oct 20, 2015 at 15:07

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

7 Comments

eve_mf Over a year ago

aaah!!! I didn't know I didn't need the equal! I was trying to add push before the equal like ddData.push() and I was just having errors and more errors! Well, now, it seems it wants to display multiple values, but instead, it's empty :S

Tushar Over a year ago

@eve_mf Check the update in the answer, remove * from the selector and check if this works

eve_mf Over a year ago

but if I remove this * from the selector it only selects the first element with #user id :S and in the console.log now only appears the first one :S I'm ussing ddSlick (jquery plugin), I am trying to add it in a jsfiddle, give me a second that I'm quiet bad....

Tushar Over a year ago

@eve_mf but if I remove this * from the selector it only selects the first element with #user id, that means there are multiple elements with same id, ID should be unique. If this is the case, use a class on all the same elements and class selector in JS, $('.className')

eve_mf Over a year ago

I have added it here: jsfiddle.net/q9o7q6pc You can check, if I delete * from the selector, it only selects the first one :S (I know, it must mean I've done it wrong but I don't understand why only selects the first one otherwise. Mention that the real table is generated through the database, so I've just made a sample table.

|

Collectives™ on Stack Overflow

creating array object on each loop

This is my js:

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

This is my js:

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related