¿Cómo comparar el valor de matriz de formato JSON y la CLAVE para crear una nueva matriz? en angular 5

10

Aquí está mi primer formato de matriz JSON:

this.columnNames = [
  {field : "Name"},
  {field : "Address"},
  {field : "Age"}
];

Aquí está mi primer formato de matriz JSON:

this.rowData = [
  {Name : "Praveen",Address : "aiff",Age : "12",w :  "1",e :  "8"},
  {Name : "Akashay",Address : "xvn",Age : "15",w :  "2",e :  "7"},
  {Name : "Bala",Address : "hjk",Age : "16",w :  "3",e :  "6"}, 
  {Name : "Charu",Address : "sss",Age : "17",w :  "4",e :  "5"},
];  

Aquí quiero comparar el VALOR que está presente en la primera array(columnNames)y KEYS que está presente en la segunda matriz. Si es igual, entonces quiero insertar esos datos coincidentes del segundo array(rowData)en la nueva matriz.

Y quiero mi resultado final así:

public rowData: any =[
  {Name : "Praveen",Address : "aiff",Age : "12"},
  {Name : "Akashay",Address : "xvn",Age : "15"},
  {Name : "Bala",Address : "hjk",Age : "16"}, 
  {Name : "Charu",Address : "sss",Age : "17"},
];
Praveen Sivanadiyar
fuente
¿Intentaste esto tú mismo?
TylerH

Respuestas:

10

Agarra los campos de cada objeto en tu columnNamesmatriz usando .map(). Luego, asigne cada objeto rowDataa un nuevo objeto creado usando .reduce(), que solo incluye las claves de su fieldsmatriz:

const columnNames = [
  {field : "Name"},
  {field : "Address"},
  {field : "Age"}
];

const rowData = [
  {Name : "Praveen",Address : "aiff",Age : "12",w :  "1",e :  "8"},
  {Name : "Akashay",Address : "xvn",Age : "15",w :  "2",e :  "7"},
  {Name : "Bala",Address : "hjk",Age : "16",w :  "3",e :  "6"}, 
  {Name : "Charu",Address : "sss",Age : "17",w :  "4",e :  "5"},
];  

const fields = columnNames.map(({field}) => field); // get array ["Name", "Address", "Age"]
const result = rowData.map( // map each object in rowData to a new object
  o => fields.reduce((obj, k) => ({...obj, [k]: o[k]}), {})
  //    ^^ construct the new object, using reduce, spread syntax and computed property names
);

console.log(result);
.as-console-wrapper { max-height: 100% !important;} /* ignore */

Si puede soportar Object.fromEntries()(que toma una matriz de [key, value]pares anidados y construye un objeto a partir de ellos), entonces no hay necesidad de usar .reduce():

const columnNames = [
  {field : "Name"},
  {field : "Address"},
  {field : "Age"}
];

const rowData = [
  {Name : "Praveen",Address : "aiff",Age : "12",w :  "1",e :  "8"},
  {Name : "Akashay",Address : "xvn",Age : "15",w :  "2",e :  "7"},
  {Name : "Bala",Address : "hjk",Age : "16",w :  "3",e :  "6"}, 
  {Name : "Charu",Address : "sss",Age : "17",w :  "4",e :  "5"},
];  

const fields = columnNames.map(({field}) => field);
const result = rowData.map( 
  o => Object.fromEntries(fields.map(k => [k, o[k]]))
);

console.log(result);
.as-console-wrapper { max-height: 100% !important;} /* ignore */

Nick Parsons
fuente
Hola tengo un problema. ¿Podrías resolver mi problema? :) Aquí está el enlace [ stackoverflow.com/questions/60089217/…
Sakkeer A
5

Puede establecer las filterpropiedades de sus objetos en función de la columnNamesmatriz y luego simplemente crear un objeto usando Object.fromEntries:

const result = rowData.map(s => Object.fromEntries(
    Object.entries(s).filter(([k, v]) => columnNames.some(cl => cl.field == k))));

Un ejemplo:

let columnNames = [
  {field : "Name"},
  {field : "Address"},
  {field : "Age"}
];

let rowData = [
  {Name : "Praveen",Address : "aiff",Age : "12",w :  "1",e :  "8"},
  {Name : "Akashay",Address : "xvn",Age : "15",w :  "2",e :  "7"},
  {Name : "Bala",Address : "hjk",Age : "16",w :  "3",e :  "6"},
  {Name : "Charu",Address : "sss",Age : "17",w :  "4",e :  "5"},
];

const result = rowData.map(s => Object.fromEntries(
    Object.entries(s).filter(([k, v]) => columnNames.some(cl => cl.field == k))));
console.log(result);

O una versión más depurable:

const result = rowData.map(s => {
  let allProperties = Object.entries(s);
  let filteredProperties = allProperties.filter(([k, v]) => 
      columnNames.some(cl => cl.field == k));
  let result = Object.fromEntries(filteredProperties);
  return result;
})

Un ejemplo:

let columnNames = [
  {field : "Name"},
  {field : "Address"},
  {field : "Age"}
];

let rowData = [
  {Name : "Praveen",Address : "aiff",Age : "12",w :  "1",e :  "8"},
  {Name : "Akashay",Address : "xvn",Age : "15",w :  "2",e :  "7"},
  {Name : "Bala",Address : "hjk",Age : "16",w :  "3",e :  "6"},
  {Name : "Charu",Address : "sss",Age : "17",w :  "4",e :  "5"},
];

const result = rowData.map(s => {
  let allProperties = Object.entries(s);
  let filteredProperties = allProperties.filter(([k, v]) => 
      columnNames.some(cl => cl.field == k));
  let result = Object.fromEntries(filteredProperties);
  return result;
})

Object.fromEntries es el método que transforma una lista de pares clave-valor en un objeto.

La siguiente fila significa que filtramos () allProperies matriz según la columnNamesmatriz.

el método some () devuelve truesi columnNamesexiste alguna propiedad de en allProperties:

let filteredProperties = allProperties.filter(([k, v]) => 
     columnNames.some(cl => cl.field == k)); 
Aumentar
fuente
Muchas gracias por tu respuesta. Tengo dudas en eso, soy un principiante de angular 8 exactamente, no sé lo que es "Object.fromEntries", y también puedes explicar esto "let filterProperties = allProperties.filter (([k, v]) => columnNames.some (cl => cl.field == k)); ". Gracias de antemano!
Praveen Sivanadiyar
@PraveenSivanadiyar por favor, vea mi respuesta actualizada
StepUp
@StepUp Hola, tengo un problema. ¿Podrías resolver mi problema? :) Aquí está el enlace [ stackoverflow.com/questions/60089217/…
Sakkeer A
3

Almacene todos los nombres de campo en una variable keysusando .map . Luego recorra la matriz original y cree un objeto que tenga las propiedades presentes enkeys

Intenta así:

let keys = this.columnNames.map(x => x.field);

this.rowData.forEach(item => {
  let obj = {}
  keys.forEach(key => {
    obj[key] = item[key]
  });
  this.result.push(obj)
});

Demo de trabajo

Adrita Sharma
fuente
¿Puedes explicar qué va a pasar aquí? keys.forEach (clave => {obj [clave] = elemento [clave]});
Praveen Sivanadiyar
Claro, estoy agregando la descripción
Adrita Sharma
@PraveenSivanadiyar Se agregó la descripción. déjame saber si esto fue útil
Adrita Sharma
1
objEs un nuevo objeto vacío. obj[key] = item[key] significa, tomando el primer bucle, la clave es "Nombre", así obj[key]será {Name: }y item.Namees Praveen, entonces el resultado será {Name: "Praveen" }
Adrita Sharma
Sí, ahora entiendo y también funciona bien con mi código. Muchas gracias @Adrita Sharma.
Praveen Sivanadiyar