CODEWITHSUNDEEP
javascriptarraysecmascript-6
kim nicole sabordo
kim nicole sabordo

Reputation: 35

Two arrays in a loop with JavaScript

I have a problem in my script. I have two arrays, which is the data and also a month.

What I want is that to append two merge the month in data, but then only 1 value shows in month, here is my code:

const months = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'];

ali_fcr.get().then((d) => {
  let store = '';

  let getTotal = d.reduce(function(x, y) {
    return (x * 1) + (1 * y);
  });

  let new_array = d.map((data) => {
    for (let i = 0; i < data.length; i++) {
      return '<td class="ta"><center><a class="ta" href="' + months[i] + '/ali">' + data + '</a></center></td>';
    }
  });

  new_array.unshift('<td>Case Receive</td>');
  new_array.push('<td style="color:red; text-align:center;">' + getTotal + '</td>');
  new_array.forEach((data) => {
    store += data;
  });

  _doc.querySelector('tr[data-alicase-category="cr"]').innerHTML = store;

});

but the result in my html is only january value of month.

Upvotes: 0

Views: 484

Answers (2)

Jhinel Arcaya
Jhinel Arcaya

Reputation: 121

I think this return is avoiding make a loop of data, it's just taking the first one:

let new_array = d.map((data) => {
        for(let i = 0; i < data.length; i++) {
            return '<td class="ta"><center><a class="ta" href="' + months[i] + '/ali">' + data + '</a></center></td>';   
        }
    });

I suggest you to keep with array functions like:

let new_array = d.map(data => data.map(
  (d_data, i) => '<td class="ta"><center><a class="ta" href="' + months[i] + '/ali">' + data + '</a></center></td>'));

Also, I don't know how data is structured, so I have no idea if you want to push inside <td> the value of d_data instead of data.

Anyway, I hope it helps. Happy coding! :)

Upvotes: 0

Ben Steward
Ben Steward

Reputation: 2408

Jaromanda X said it in the comments, but it’s your for loop inside a function making use of the return keyword. Non-function blocks (ex: if, while, for) do not return anything, so calling return will “bubble up” to the function scope, in this case causing your map function to return after only one iteration.

Solution: consider pushing that html string into an array, then returning htmlarray.join(‘’) out of the map function. Now your loop can complete and the data will be returned together.

Upvotes: 1

Related Questions