1

Tenho os seguintes objetos javascript..

headers: [
  {
    text: 'Nome',
    value: 'nm_propriedade'
  },
  {
    text: 'Área Segurada',
    value: 'nr_area_risco'
  },
  {
    text: 'Início de plantio',
    value: 'dt_inicio_plantacao'
  },
  {
    text: 'Fim de plantio',
    value: 'dt_fim_plantacao'
  }
],

items: [
  {
    id_proposta_talhao: 2,
    id_proposta_itens: 10004,
    nm_propriedade: 'talhão 1',
    nr_area_risco: 1,
    dt_inicio_plantacao: '2019-05-14T00:00:00',
    dt_fim_plantacao: '2019-12-11T00:00:00'
  },
  {
    id_proposta_talhao: 1,
    id_proposta_itens: 10005,
    nm_propriedade: 'Teste',
    nr_area_risco: 100,
    dt_inicio_plantacao: '2019-05-01T00:00:00',
    dt_fim_plantacao: '2019-05-08T00:00:00'
  }
]

Porem preciso formatar os items de acordo com os headers.. sendo que nos items só vai permanecer os items onde a key for igual a algum value dos headers! E o mesmo deve ser substituído pelo text do mesmo item!

Segue um exemplo de como deve ficar os items..

items: [
  {
    "Nome": 'talhão 1',
    'Área Segurada': 1,
    'Início de plantio': '2019-05-14T00:00:00',
    'Fim de plantio': '2019-12-11T00:00:00'
  },
  {
    "Nome": 'Teste',
    'Área Segurada': 100,
    'Início de plantio': '2019-05-14T00:00:00',
    'Fim de plantio': '2019-12-11T00:00:00'
  }
]

Aceito sugestões;

Preciso fazer isso pois em uma tabela só deve exibir os items que estão nos headers.. e recebo do back-end.. os seguintes objetos.. não podem ser alterados, preciso tratar isso no front!

Estou trabalhando em um projeto Vue.js não sei se influencia em algo!

1 Resposta 1

3

Deixo uma sugestão:

  • mapeia a array items
  • usa a array dos headers e o .reduce para gerar um objeto com a chave do text to headers e o valor da chave do item que tem o nome do value do header.

Exemplo:

const data = {
  headers: [{
      text: 'Nome',
      value: 'nm_propriedade'
    },
    {
      text: 'Área Segurada',
      value: 'nr_area_risco'
    },
    {
      text: 'Início de plantio',
      value: 'dt_inicio_plantacao'
    },
    {
      text: 'Fim de plantio',
      value: 'dt_fim_plantacao'
    }
  ],

  items: [{
      id_proposta_talhao: 2,
      id_proposta_itens: 10004,
      nm_propriedade: 'talhão 1',
      nr_area_risco: 1,
      dt_inicio_plantacao: '2019-05-14T00:00:00',
      dt_fim_plantacao: '2019-12-11T00:00:00'
    },
    {
      id_proposta_talhao: 1,
      id_proposta_itens: 10005,
      nm_propriedade: 'Teste',
      nr_area_risco: 100,
      dt_inicio_plantacao: '2019-05-01T00:00:00',
      dt_fim_plantacao: '2019-05-08T00:00:00'
    }
  ]
};

const items = data.items.map(item => {

  return data.headers.reduce((obj, {text, value}) => {
    return {
      ...obj,
      [text]: item[value]
    }
  }, {});
});

console.log(items);

1
  • Opa Vlw Sergio! deu certo aqui man resolveu meu problema! muito Obrigado!
    – wDrik
    21/06/2019 às 19:08

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 .