Two nested for each loops with objects and div selectors

Question

I am struggling with two each loops. What I want to achieve is match corresponding object to correct each iteration.

There's my fiddle. In each div there's the same output, it should be 1,2,3 instead of 3,3,3.

jQuery('.get-total-numbers').each(function(i, e) {
  var $el = jQuery(e);

  var json = '["1","2","3"]';
  var arr = $.parseJSON(json);

  myjson = json;
  json2 = JSON.parse(json);
  jQuery.each(json2, function(index, e) {
    console.log(e);
    $el.text(e);


  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="get-total-numbers">

</div>

<div class="get-total-numbers">

</div>

<div class="get-total-numbers">

</div>

You're not doing anything to match corresponding elements. The inner loop is just going through the whole array, replacing the current DIV with every item in the array. So when it's done, the DIV contains the last element of the array. — Barmar
– Barmar, Commented Nov 22, 2016 at 1:31
Well thought it was a good start. I want my output to be 1 for first div, 2 for second div etc. — Matt
– Matt, Commented Nov 22, 2016 at 1:32

Elias Soares · Accepted Answer · 2016-11-22 01:31:23Z

2

Try this:

jQuery('.get-total-numbers').each(function(i, e) {
  var $el = jQuery(e);

  var json = '["1","2","3"]';
  var arr = $.parseJSON(json);

  myjson = json;
  json2 = JSON.parse(json);
  $el.text(json2[i]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="get-total-numbers">

</div>

<div class="get-total-numbers">

</div>

<div class="get-total-numbers">

</div>

answered Nov 22, 2016 at 1:31

Elias Soares

10.4k4 gold badges36 silver badges62 bronze badges

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

2 Comments

Felix Kling Over a year ago

Why should the OP try this? Can you explain your solution and why changed what you changed?

Matt Over a year ago

What if I am dealing with more complex json and this json can be accessed by .each only? I mean, it's graph facebook where I am fetching data from multiple URLs. I cannot (or I don't know how) to fetch corresponding data from complex JSON.

Barmar · Accepted Answer · 2016-11-22 01:34:05Z

1

Your code is just overwriting each DIV with every element of the array, not just putting the matching element in each DIV.

You don't need the inner jQuery.each loop. If you want the corresponding element of the array, just use arr[i].

var json = '["1","2","3"]';
var arr = $.parseJSON(json);

jQuery('.get-total-numbers').each(function(i, e) {
  var $el = jQuery(e);
  $el.text(arr[i]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="get-total-numbers">

</div>

<div class="get-total-numbers">

</div>

<div class="get-total-numbers">

</div>

answered Nov 22, 2016 at 1:34

Barmar

789k57 gold badges555 silver badges669 bronze badges

Collectives™ on Stack Overflow

Two nested for each loops with objects and div selectors

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related