Merge 2 objects with Javascript ES6!

Question

I have the following javascript objects..

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'
  }
]

However I need to format the items according to the headers.. and in the items will only remain the items where the key is equal to some value of the headers! And the same must be replaced by the text of the same item!

Here is an example of how items should look..

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'
  }
]

I accept suggestions;

I need to do this because in a table should only display the items that are in the headers.. and I get from the back-end.. the following objects.. cannot be changed, I need to treat this at the front!

I’m working on a project Vue.js I don’t know if it influences something!

Answer 1

I leave a suggestion:

• maps the array items
• uses the array of headers and the .reduce to generate an object with the text to headers and the key value of the item named value of the header.

Example:

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);