JSON 형식 배열 VALUE와 KEY를 비교하여 새 배열을 만드는 방법은 무엇입니까? Angular 5에서

10

첫 번째 JSON 배열 형식은 다음과 같습니다.

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

첫 번째 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"},
];

여기서 첫 번째에 존재하는 VALUE array(columnNames)와 두 번째 배열에 존재하는 KEY 를 비교하고 싶습니다 . 같으면 일치하는 데이터를 두 번째 array(rowData)에서 새 배열로 푸시하려고합니다 .

그리고 나는 다음과 같은 최종 결과를 원합니다.

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"},
];
arrays  angular  comparison 
— 프라 빈 시바 나디야 르
소스
당신은 이것을 직접 시도 했습니까?
— TylerH

답변:

10

를 columnNames사용 하여 배열의 각 객체에서 필드를 가져 옵니다 .map(). 그런 다음 각 객체 rowData를를 사용하여 만든 새 객체에 매핑 .reduce()합니다. 여기에는 fields배열 의 키만 포함 됩니다.

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 */
스 니펫 확장

지원 할 수 있다면 Object.fromEntries()(중첩 [key, value]쌍 의 배열을 가져 와서 객체를 빌드 할 수 있음) 다음을 사용할 필요가 없습니다 .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 */
스 니펫 확장

— 닉 파슨스
소스
안녕하세요, 문제가 있습니다. 내 문제를 해결할 수 있습니까? :) 여기 링크 [ stackoverflow.com/questions/60089217/…
— Sakkeer A
5

당신은 할 수 있습니다 filter개체 속성에 따라 columnNames배열 한 후 바로 사용하여 객체를 생성 Object.fromEntries:

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

예를 들면 :

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);
스 니펫 확장

또는 더 디버깅 가능한 버전 :

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

예를 들면 :

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 는 키-값 쌍의 목록을 객체로 변환하는 방법입니다.

다음 행은 배열을 기준으로 배열을 filter () 함을 의미합니다 .allProperiescolumnNames

의 일부true 속성이 columnNames존재하는 경우 some () 메서드가 반환 합니다 allProperties.

let filteredProperties = allProperties.filter(([k, v]) => 
     columnNames.some(cl => cl.field == k));
— 스텝 업
소스
답변 해 주셔서 감사합니다. 나는 angular 8의 초보자입니다. 정확히 "Object.fromEntries"가 무엇인지 모르고, 또한이 하나를 설명 할 수 있습니까? => columnNames.some (cl => cl.field == k)); ". adavnce에 감사합니다!
— Praveen Sivanadiyar
제발 @PraveenSivanadiyar, 내 업데이트 된 대답을 참조
— 스텝 업
@StepUp 안녕하세요, 문제가 있습니다. 내 문제를 해결할 수 있습니까? :) 여기 링크 [ stackoverflow.com/questions/60089217/…
— Sakkeer A
3

.map을keys 사용하여 모든 필드 이름을 변수에 저장하십시오 . 그런 다음 원래 배열을 반복하고 속성이있는 객체를 만듭니다.keys

이렇게 해보십시오 :

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

실무 데모

— 아드리 타 샤르마
소스
여기서 무슨 일이 일어날 지 설명해 주시겠습니까? keys.forEach (key => {obj [key] = item [key]});
— Praveen Sivanadiyar
물론, 저는 설명을 추가하겠습니다
— Adrita Sharma
@PraveenSivanadiyar 설명을 추가했습니다. 이 정보가 도움이되었는지 알려주십시오
— Adrita Sharma
1
obj새로운 빈 객체입니다. obj[key] = item[key] 수단, 첫 번째 루프를 가지고, 키 때문에, "이름"입니다 obj[key]될 것입니다 {Name: }및 item.Name인 Praveen결과가있을 것입니다, 그래서 {Name: "Praveen" }
— Adrita 샤르마
예, 이제 이해하고 코드에서 잘 작동합니다. @Adrita Sharma에게 감사드립니다.
— Praveen Sivanadiyar
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.