5

Estou trabalhando no desenvolvimento de uma table dinâmica e estou enfrentando problemas para criar as linhas dessa table conforme as colunas que eu tenho e a informação que recebo da API.

Considerando o seguinte código:

let data = [];
let line = {};

const columns = [{
  name: "Code",
  dataIndex: "id"
}, {
  name: "Name",
  dataIndex: "name"
}];

const arrFromApi = [{
  id: 1,
  name: "Marcus",
  age: "32"
}, {
  id: 2,
  name: "John",
  age: "30"
}, {
  id: 3,
  name: "Emily",
  age: "25"
}];

arrFromApi.forEach(item => {
  columns.forEach(column => {
    line[column.dataIndex] = item[column.dataIndex];
  })
  data.push(line)
});

console.log(data)

Eu tenho o seguinte resultado:

[{id: 3, name: "Emily"}, {id: 3, name: "Emily"}, {id: 3, name: "Emily"}]

Porém, se eu substituir meu data.push(line) por console.log(line) é impresso no console corretamente cada um dos nomes da forma que preciso:

[{id: 1, name: "Marcus"}, {id: 2, name: "John"}, {id: 3, name: "Emily"}]

Alguém saberia dizer o que há de errado neste cenário? Pois entendo que se no console está imprimindo nessa sequência, logo o resultado final do meu array deveria ser o mesmo.

2 Respostas 2

5

O que acontece é que a cada iteração você está sobrescrevendo o id e name do objeto line.

O correto seria criar um novo objeto a cada iteração:

let data = [];

const columns = [{
  name: "Code",
  dataIndex: "id"
}, {
  name: "Name",
  dataIndex: "name"
}];

const arrFromApi = [{
  id: 1,
  name: "Marcus",
  age: "32"
}, {
  id: 2,
  name: "John",
  age: "30"
}, {
  id: 3,
  name: "Emily",
  age: "25"
}];

arrFromApi.forEach(item => {
  let line = {}; // <--- Aqui
  columns.forEach(column => {
    line[column.dataIndex] = item[column.dataIndex];
  })
  data.push(line)
});

console.log(data)

O console.log só "funciona" porque ele mostra os dados que você acabou de setar no line. Mas como ele é o mesmo objeto em todas as iterações, no final você acaba com 3 cópias dele no array data. Ao criar um objeto novo a cada iteração, você elimina esse problema.

1

Outra forma é convertendo o objeto line em string a cada iteração do forEach usando JSON.stringify() e parseando com JSON.parse():

data.push(JSON.parse(JSON.stringify(line)));

Com isso você não estará adicionando o mesmo objeto na array data, mas um objeto com valor independente do objeto line.

O que você está fazendo é basicamente isso:

data[line, line, line]

Onde a variável line é um objeto que ao final do forEach terá como valor o último objeto da array arrFromApi, ou seja {"id":3,"name":"Emily"}, conforme dito na resposta do hkotsubo.

Neste caso, você pode manter seu código como está, apenas alterando a linha do push como mencionado acima:

let data = [];
let line = {};

const columns = [{
  name: "Code",
  dataIndex: "id"
}, {
  name: "Name",
  dataIndex: "name"
}];

const arrFromApi = [{
  id: 1,
  name: "Marcus",
  age: "32"
}, {
  id: 2,
  name: "John",
  age: "30"
}, {
  id: 3,
  name: "Emily",
  age: "25"
}];

arrFromApi.forEach(item => {
  columns.forEach(column => {
    line[column.dataIndex] = item[column.dataIndex];
  })
  data.push(JSON.parse(JSON.stringify(line)));
});

console.log(data)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .