Блог

Главная - Вопросы по программированию - Динамическая итерация по массиву объектов json в React

Динамическая итерация по массиву объектов json в React

#javascript #arrays #json #reactjs

#javascript #массивы #json #reactjs

Вопрос:

Я выполняю вызов api, который возвращает массив объектов json. Вот пример того, что я могу ожидать от возврата:

 [
  {"id": 1, "name": "Pete", "age": 22},
  {"id": 2, "name": "Sarah", "age": 32},
  {"id": 3, "name": "Marshall", "age": 33}
]

Я пытаюсь выполнить цикл по этому объекту, чтобы создать строки таблицы, при этом динамически назначая каждый ключ в каждом объекте json в качестве атрибута, без необходимости явно указывать ключ. Например, я хотел бы отобразить этот объект в следующей структуре:

 <tr key=1>
  <td>Pete</td>
  <td>22</td>
</tr>
<tr key=2>
  <td>Sarah</td>
  <td>32</td>
</tr>
<tr key=3>
  <td>Marshall</td>
  <td>33</td>
</tr>

Мой устаревший код выглядит следующим образом:

 var MyMembers= this.props.Members.map((Member) => {
  return (
    <tr key={Member.id}>
      <td>{Member.name}</td>
      <td>{Member.age}</td>
    </tr>
  )
});

Однако в этом фрагменте устаревшего кода я явно вызываю атрибуты ‘name’ и ‘age’ для создания тегов ‘td’. Есть ли способ, которым я мог бы перебирать каждый объект и создавать значение ‘td’ для каждого ключа в указанном объекте без явного вызова имени ключа?

Ответ №1:

Это должно сработать:

  var MyMembers= this.props.Members.map((Member) => {
  var keys = Object.keys(Member)
  var index = keys.indexOf("id");
  if (index > -1) {
     // removes the "id" element from the keys.
     keys.splice(index, 1);
  }
  var divs = keys.map(k => <td>{Member[k]}</td>)
  return (
   <tr key={Member.id}>
   divs
   </tr>
  )
 });

Комментарии:

1. Спасибо за это @ryan. Я думаю, что ваша логика, похоже, делает именно то, что я хочу. Когда я только что попробовал это, он выдает ошибку, в которой говорится, что «Член» не является функцией. Я предполагаю, что это результат этого раздела: ‘Member (k)’. Я все еще новичок в react / js, поэтому я не уверен, что это проблема.

2. это должно быть Member[k] вместо Member(k) . Отредактировано.

Ответ №2:

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

 var list = this.state.data.map(p => {
    return (
    <tr key={p.id}>
      {Object.keys(p).filter(k => k !== 'id').map(k => {
        return (<td key={p.id   ''   k}>{p[k]}</td>);
      })}
    </tr>
  );
})

Или для понимания прочитанного разделите элементы из окончательного возврата:

 var list = this.state.data.map(p => {
    var items = Object.keys(p)
       .filter(k => k !== 'id')
       .map(k => {
         return (
            <td key={p.id   k}>{p[k]}</td>
         )
       });

    return (
      <tr key={p.id}>
        {items}
      </tr>
    );
});

JSFiddle