Merge an Object with an ES6 Javascript Object Array!

Question

Staff I have the following variables!

let content = {
  cd_empresa: 200,
  cd_produto: 13287,
  cd_status: 604,
  dt_validade: '2019-05-09T12:34:00',
  dv_possui_subvencao: 1,
  dv_regra: 1,
  fl_possui_item: 1,
  id_parceiro_portal: 0,
  id_proposta: 10003,
  id_proposta_itens: null,
  nm_fase: 'Nova Cotação',
  nm_origem: 'Liderança',
  nm_pessoa_cliente: 'André Flores Vivas',
  nm_produto: 'AGRÍCOLA',
  nm_ramo: '1-AGRÍCOLA',
  nm_status: 'Recusada',
  nr_fase: 4,
  nr_grp_produto: null,
  produto_vip: 0
};

let headers = [
  { text: 'Nr° Cotação', value: 'id_proposta' },
  { text: 'Origem', value: 'nm_origem' },
  { text: 'Status', value: 'nm_status' },
  { text: 'Fase', value: 'nm_fase' }
];

I need to transform the generate a new variable that merges this information where only those that exist in the headers.value more taking the value of the same let content follows an example of how accurate:

let result = {
  'Nr° Cotação': 10003,
  Origem: 'Liderança',
  Status: 'Recusada',
  Fase: 'Nova Cotação'
};

or:

let result = [{ 'Nr° Cotação': 10003 }, { Origem: 'Liderança' }, { Status: 'Recusada' }, { Fase: 'Nova Cotação' }];

Thank you!

Answer 1

It is preferable to use reduce, as in the accepted answer. But if you prefer a more imperative method:

let content = {
  cd_empresa: 200,
  cd_produto: 13287,
  cd_status: 604,
  dt_validade: '2019-05-09T12:34:00',
  dv_possui_subvencao: 1,
  dv_regra: 1,
  fl_possui_item: 1,
  id_parceiro_portal: 0,
  id_proposta: 10003,
  id_proposta_itens: null,
  nm_fase: 'Nova Cotação',
  nm_origem: 'Liderança',
  nm_pessoa_cliente: 'André Flores Vivas',
  nm_produto: 'AGRÍCOLA',
  nm_ramo: '1-AGRÍCOLA',
  nm_status: 'Recusada',
  nr_fase: 4,
  nr_grp_produto: null,
  produto_vip: 0
};

let headers = [
  { text: 'Nr° Cotação', value: 'id_proposta' },
  { text: 'Origem', value: 'nm_origem' },
  { text: 'Status', value: 'nm_status' },
  { text: 'Fase', value: 'nm_fase' }
];

function populate(headers, content) {
  const result = {}

  headers.forEach(item => {
    const { text, value} = item
    const contentKey = content[value]
    
    result[text] = contentKey
  })
  
  return result
}

console.log(populate(headers, content))

Answer 2

You can use the reduce to map the properties:

const converter = (origem, mapa) => {
  return mapa.reduce((acumulador, { text, value }) => {
    return {
      ...acumulador,
      [text]: origem[value],
    };
  }, {});
};

const converter2 = (origem, mapa) => {
  return mapa.reduce((acumulador, { text, value }) => {
    return [
      ...acumulador,
      { [text]: origem[value] },
    ];
  }, []);
};

// Execução

let content = {
  cd_empresa: 200,
  cd_produto: 13287,
  cd_status: 604,
  dt_validade: '2019-05-09T12:34:00',
  dv_possui_subvencao: 1,
  dv_regra: 1,
  fl_possui_item: 1,
  id_parceiro_portal: 0,
  id_proposta: 10003,
  id_proposta_itens: null,
  nm_fase: 'Nova Cotação',
  nm_origem: 'Liderança',
  nm_pessoa_cliente: 'André Flores Vivas',
  nm_produto: 'AGRÍCOLA',
  nm_ramo: '1-AGRÍCOLA',
  nm_status: 'Recusada',
  nr_fase: 4,
  nr_grp_produto: null,
  produto_vip: 0
};

let headers = [
  { text: 'Nr° Cotação', value: 'id_proposta' },
  { text: 'Origem', value: 'nm_origem' },
  { text: 'Status', value: 'nm_status' },
  { text: 'Fase', value: 'nm_fase' }
];

console.log(converter(content, headers));
console.log(converter2(content, headers));

---

reduce

The method reduce() performs a function reducer (provided by you) for each member of the array, resulting in a single return value.

Example:

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15