Как перебрать несколько массивов - Jquery

Question

У меня есть два массива в моем коде, как показано ниже

names = ['Kelvin', 'James'];
age = ['9','10'];

При переборе массивов я добавляю данные в таблицу. Вот как я хочу, чтобы моя таблица выглядела после итерации

Name    Age

Kelvin   9

James    10

Но моя таблица выглядит следующим образом

Name    Age

Kelvin   9

Kelvin   10

James    9

James    10

Файл. Js

  age = localStorage.getItem('age').split(',');
  name = localStorage.getItem('name').split(',');
  if(name != '')
        {
            if(age != '')
            {
                $.each(name, function(index,name_value){
                $.each(age, function(index, age_value){


                $('#myTableID2 #user-id2').append('<tr><td >'+name_value+'</td><td >'+age_value+'</td></tr>');
                });
            });
            }


        }

Как мне этого добиться?

Answer 1

Вы должны использовать одну итерацию вместо вложенной итерации:

$.each(name, function(index,name_value) {
   $('#myTableID2 #user-id2').append('<tr><td >'+ name_value +'</td><td >' + age[index] + '</td></tr>');
});

Answer 2

Если у вас всегда одинаковое количество элементов в обоих массивах, возможно, вы можете попробовать использовать индекс и выполнять итерации только один раз, как показано ниже:

$.each(name, function(index,name_value) {
    $('#myTableID2 #user-id2').append('<tr><td >'+ name[index] +'</td><td >' + age[index] + '</td></tr>');
});

Надеюсь, это поможет!

Answer 3

Вы выполняете итерацию дважды (один для переменной name и один для переменной age).

Если вы уверены, что массивы, хранящиеся в name и age, имеют одинаковые значения размер, вы можете просто перебрать один из них и использовать индекс итерации для доступа к другому элементу:

$.each(name, function(index, name_value){
    var age_value = age[index];

    $('#myTableID2 #user-id2').append('<tr><td >'+name_value+'</td><td >'+age_value+'</td></tr>');
});

Кроме того, ваш код представляет некоторые неконтролируемые вещи:

1. Вы извлекаете данные из localStorage, но не проверяете, нет ли данных:

age = localStorage.getItem('age')

может вернуть ноль, если в localStorage нет данных. В этом случае ваш код сломается, так как вы будете вызывать метод split с нуля.

То, как вы проверяете, являются ли age и name пустыми, немного сбивает с толку. Вам бы лучше проверить его длину:

if (name.length > 0)

Если вы храните данные в localStorage, я бы порекомендовал вам хранить age и name вместе под одним ключом:

localStorage.setItem('users', JSON.stringify([
    { name: 'Kelvin', age: 9 },
    { name: 'James', age: 10 }
]));

, чтобы вы были уверены что при получении информации у вас будет одинаковое количество элементов для name и age:

var data = localStorage.getItem('users') || '[]';
var users = JSON.parse(data);
if (users.length > 0) {
    $('#myTableID2 #user-id2').append(users.map(function(user) {
        return '<tr><td >'+ user.name+'</td><td >'+user.age+'</td></tr>';
    });
}

Answer 4

Вам просто нужно перебрать один массив и получить значение из второго массива, используя индекс. В вашем текущем сценарии вы используете вложенный l oop, что означает, что он будет повторяться n x n раз, что совершенно не нужно.

age = localStorage.getItem('age').split(',');
name = localStorage.getItem('name').split(',');

if(name.length && age.length){
   $.each(name, function(index,name_value){
       $('#myTableID2 #user-id2').append('<tr><td >'+name_value+'</td><td >'+age[index]+'</td></tr>');
   });
}

---

Вместо добавления в каждую итерацию вы можете добавлять после создания всего html строка.

age = localStorage.getItem('age').split(',');
name = localStorage.getItem('name').split(',');

if(name.length && age.length){
   $('#myTableID2 #user-id2').append(name.reduce(function(html, name_value, i){
       return html + '<tr><td >'+name_value+'</td><td >'+age[i]+'</td></tr>';
   }, ''));
}