JSON形式の配列の値とキーを比較して新しい配列を作成するにはどうすればよいですか？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"},
];

ここで、最初のarray(columnNames)配列にあるVALUEと2番目の配列にあるKEYS を比較します。等しい場合は、2番目の一致するデータを2番目の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（） allProperies配列に基づいてcolumnNames配列ます。

some（）メソッドはtrue、にいくつかのプロパティがcolumnNames存在する場合に戻りますallProperties。

let filteredProperties = allProperties.filter(([k, v]) => 
     columnNames.some(cl => cl.field == k));
— ステップアップ
ソース
ご返信ありがとうございます。私はそれを疑っています、私は角度8の初心者ですが、「Object.fromEntries」が何であるかを正確に知りません。 => columnNames.some（cl => cl.field == k））; "。よろしくお願いします！
— Praveen Sivanadiyar
@PraveenSivanadiyar、私の最新の回答をご覧ください
— StepUp
@StepUpこんにちは、問題があります。私の問題を解決してくれませんか？:)ここでのリンクである[ stackoverflow.com/questions/60089217/...
— Sakkeer A
3

.mapkeysを使用して、すべてのフィールド名を変数に格納します。次に、元の配列をループして、プロパティが存在するオブジェクトを作成します。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)
});

作業デモ

— Adrita Sharma
ソース
ここで何が起こるか説明していただけますか？keys.forEach（key => {obj [key] = item [key]}）;
— Praveen Sivanadiyar
— はい
@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.