2017-09-22 9 views
0

.netコアと角度4の新しいプロジェクトでは、実際のデータベースが整うまで待たなければなりませんでした。カスケードドロップダウンのハードコーディングされたデータからウェブAPI呼び出しから複雑なオブジェクトを取得するまで012Wを変更する

DBAがあり、バックエンドの開発者がWebアプリケーションを終了したので、配列ではるかに単純だったデータでネストしたオブジェクトを呼び出してフェッチする必要があります。

現在のデータは

ここ

を呼び出して、私はすべてのカテゴリ

getCategory() { 
    return [ 
     new Category(1, 1, 'VAMC-Cat-1'), 
     new Category(2, 1, 'VAMC-Cat-2'), 
     new Category(3, 1, 'VAMC-Cat-3'), 
     new Category(4, 2, 'Vet-Cat-1'), 
     new Category(5, 2, 'Vet-Cat-2'), 
     new Category(6, 2, 'Vet-Cat-3'), 
     new Category(7, 3, 'Provider-Cat-1'), 
     new Category(8, 3, 'Provider-Cat-2'), 
     new Category(9, 3, 'Provider-Cat-3'), 
     new Category(10, 4, 'Other-Cat-1'), 
     new Category(11, 4, 'Other-Cat-2'), 
     new Category(12, 4, 'Other-Cat-3'), 
     new Category(13, 5, 'None-Cat-1'), 
     new Category(14, 5, 'None-Cat-3'), 
     new Category(15, 5, 'None-Cat-2'), 
    ]; 
} 

を取得するためのメソッドを呼び出し場所を下にスクロールする場合は、3カスケードのための私の単一の呼び出しそれを見ることができていますドロップダウンはすべて1つの大きな複合オブジェクト内にあります。このデータをAngular4/typescriptで永続化する必要がある場合、どのようにコールすることができますか? アイデア/サンプルはありますか? (闊歩UIを)返します

新しいデータに私はあなたが好むようあなたはさまざまな方法で配列map()reduce()を使用できるWeb APIを呼び出すために

[ 
    { 
    "customerTypeId": 1, 
    "customerTypeName": "VAMC", 
    "childCategories": [ 
     { 
     "categoryId": 1, 
     "categoryName": "VAMC-Cat-1", 
     "customerTypeID": 1, 
     "childSubCategories": [ 
      { 
      "subCategoryId": 1, 
      "subCategoryName": "VAMC-SubCat-1-1", 
      "categoryID": 1 
      }, 
      { 
      "subCategoryId": 2, 
      "subCategoryName": "VAMC-SubCat-1-2", 
      "categoryID": 1 
      } 
     ] 
     }, 
     { 
     "categoryId": 2, 
     "categoryName": "VAMC-Cat-2", 
     "customerTypeID": 1, 
     "childSubCategories": [ 
      { 
      "subCategoryId": 3, 
      "subCategoryName": "VAMC-SubCat-2-1", 
      "categoryID": 2 
      }, 
      { 
      "subCategoryId": 4, 
      "subCategoryName": "VAMC-SubCat-2-2", 
      "categoryID": 2 
      } 
     ] 
     } 
    ] 
    }, 
    { 
    "customerTypeId": 2, 
    "customerTypeName": "Vet", 
    "childCategories": [ 
     { 
     "categoryId": 3, 
     "categoryName": "Vet-Cat-1", 
     "customerTypeID": 2, 
     "childSubCategories": [ 
      { 
      "subCategoryId": 5, 
      "subCategoryName": "Vet-SubCat-1-1", 
      "categoryID": 3 
      }, 
      { 
      "subCategoryId": 6, 
      "subCategoryName": "Vet-SubCat-1-2", 
      "categoryID": 3 
      } 
     ] 
     }, 
     { 
     "categoryId": 4, 
     "categoryName": "Vet-Cat-2", 
     "customerTypeID": 2, 
     "childSubCategories": [ 
      { 
      "subCategoryId": 7, 
      "subCategoryName": "Vet-SubCat-2-1", 
      "categoryID": 4 
      }, 
      { 
      "subCategoryId": 8, 
      "subCategoryName": "Vet-SubCat-2-2", 
      "categoryID": 4 
      } 
     ] 
     } 
    ] 
    }, 
    { 
    "customerTypeId": 3, 
    "customerTypeName": "Provider", 
    "childCategories": [ 
     { 
     "categoryId": 5, 
     "categoryName": "Provider-Cat-1", 
     "customerTypeID": 3, 
     "childSubCategories": [ 
      { 
      "subCategoryId": 9, 
      "subCategoryName": "Provider-SubCat-1-1", 
      "categoryID": 5 
      }, 
      { 
      "subCategoryId": 10, 
      "subCategoryName": "Provider-SubCat-1-2", 
      "categoryID": 5 
      } 
     ] 
     }, 
     { 
     "categoryId": 6, 
     "categoryName": "Provider-Cat-2", 
     "customerTypeID": 3, 
     "childSubCategories": [ 
      { 
      "subCategoryId": 11, 
      "subCategoryName": "Provider-SubCat-2-1", 
      "categoryID": 6 
      }, 
      { 
      "subCategoryId": 12, 
      "subCategoryName": "Provider-SubCat-2-2", 
      "categoryID": 6 
      } 
     ] 
     } 
    ] 
    }, 
    { 
    "customerTypeId": 4, 
    "customerTypeName": "Other", 
    "childCategories": [ 
     { 
     "categoryId": 7, 
     "categoryName": "Other-Cat-1", 
     "customerTypeID": 4, 
     "childSubCategories": [ 
      { 
      "subCategoryId": 13, 
      "subCategoryName": "Other-SubCat-1-1", 
      "categoryID": 7 
      }, 
      { 
      "subCategoryId": 14, 
      "subCategoryName": "Other-SubCat-1-2", 
      "categoryID": 7 
      } 
     ] 
     }, 
     { 
     "categoryId": 8, 
     "categoryName": "Other-Cat-2", 
     "customerTypeID": 4, 
     "childSubCategories": [ 
      { 
      "subCategoryId": 15, 
      "subCategoryName": "Other-SubCat-2-1", 
      "categoryID": 8 
      }, 
      { 
      "subCategoryId": 16, 
      "subCategoryName": "Other-SubCat-2-2", 
      "categoryID": 8 
      } 
     ] 
     } 
    ] 
    }, 
    { 
    "customerTypeId": 5, 
    "customerTypeName": "None", 
    "childCategories": [ 
     { 
     "categoryId": 9, 
     "categoryName": "None-Cat-1", 
     "customerTypeID": 5, 
     "childSubCategories": [ 
      { 
      "subCategoryId": 17, 
      "subCategoryName": "None-SubCat-1-1", 
      "categoryID": 9 
      }, 
      { 
      "subCategoryId": 18, 
      "subCategoryName": "None-SubCat-1-2", 
      "categoryID": 9 
      } 
     ] 
     }, 
     { 
     "categoryId": 10, 
     "categoryName": "None-Cat-2", 
     "customerTypeID": 5, 
     "childSubCategories": [ 
      { 
      "subCategoryId": 19, 
      "subCategoryName": "None-SubCat-2-1", 
      "categoryID": 10 
      }, 
      { 
      "subCategoryId": 20, 
      "subCategoryName": "None-SubCat-2-2", 
      "categoryID": 10 
      } 
     ] 
     } 
    ] 
    } 
] 
+0

バックエンドDEVに平手打ちを与えますか?冗談で。完成したアレイはどのように見える必要がありますか?データをループして必要なものを構築する必要があります。 –

+0

あなたはそれをおかしいと言います。私たちのチームの開発者で、老眼鏡を着て、サスペンダーを毎日着ています。私たちは彼を「銀行家」と呼ぶのが好きです。彼はスマートで面白いです...そして、Web APIやその他のバックエンドを構築したこのリモート開発者...私たちの "銀行家"の男は、 "こんにちはJohn、MITが電話をかけて、ロケット科学の助けを求めていました" ... "これはちょっと大きすぎます..." –

+0

私は、親のIDを渡してデータをループして適切なデータを返すようにしましょう。あなたの質問では、ループする必要があるgetCategoryメソッドの例があります。それをする最善の方法は何ですか? –

答えて

0

を使用。それはまたfilter()に見ていいです。

ここでもdestruction in parametersの使用があります。

Angular 4では、作成していない場合は、すでにこのサービスをご利用いただきたいと思います。サービスから、APIを呼び出して結果を変換し、コンポーネントから解決/サブスクライブできるプロミスまたはオブザーバーを返します。

最後のマップは、あなたの classそこにを持つように変更することができます
let result = data.map(item => item["childCategories"]) 
    .reduce((a, item) => a.concat(item), []) 
    .map(({ 
    categoryId, 
    categoryName, 
    customerTypeID 
    }) => ({ 
    categoryId, 
    categoryName, 
    customerTypeID 
    })); 

.map(({ 
    categoryId, 
    categoryName, 
    customerTypeID 
    }) => new Category(
    categoryId, 
    categoryName, 
    customerTypeID 
)); 

const data = [{ 
 
    "customerTypeId": 1, 
 
    "customerTypeName": "VAMC", 
 
    "childCategories": [{ 
 
     "categoryId": 1, 
 
     "categoryName": "VAMC-Cat-1", 
 
     "customerTypeID": 1, 
 
     "childSubCategories": [{ 
 
      "subCategoryId": 1, 
 
      "subCategoryName": "VAMC-SubCat-1-1", 
 
      "categoryID": 1 
 
      }, 
 
      { 
 
      "subCategoryId": 2, 
 
      "subCategoryName": "VAMC-SubCat-1-2", 
 
      "categoryID": 1 
 
      } 
 
     ] 
 
     }, 
 
     { 
 
     "categoryId": 2, 
 
     "categoryName": "VAMC-Cat-2", 
 
     "customerTypeID": 1, 
 
     "childSubCategories": [{ 
 
      "subCategoryId": 3, 
 
      "subCategoryName": "VAMC-SubCat-2-1", 
 
      "categoryID": 2 
 
      }, 
 
      { 
 
      "subCategoryId": 4, 
 
      "subCategoryName": "VAMC-SubCat-2-2", 
 
      "categoryID": 2 
 
      } 
 
     ] 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "customerTypeId": 2, 
 
    "customerTypeName": "Vet", 
 
    "childCategories": [{ 
 
     "categoryId": 3, 
 
     "categoryName": "Vet-Cat-1", 
 
     "customerTypeID": 2, 
 
     "childSubCategories": [{ 
 
      "subCategoryId": 5, 
 
      "subCategoryName": "Vet-SubCat-1-1", 
 
      "categoryID": 3 
 
      }, 
 
      { 
 
      "subCategoryId": 6, 
 
      "subCategoryName": "Vet-SubCat-1-2", 
 
      "categoryID": 3 
 
      } 
 
     ] 
 
     }, 
 
     { 
 
     "categoryId": 4, 
 
     "categoryName": "Vet-Cat-2", 
 
     "customerTypeID": 2, 
 
     "childSubCategories": [{ 
 
      "subCategoryId": 7, 
 
      "subCategoryName": "Vet-SubCat-2-1", 
 
      "categoryID": 4 
 
      }, 
 
      { 
 
      "subCategoryId": 8, 
 
      "subCategoryName": "Vet-SubCat-2-2", 
 
      "categoryID": 4 
 
      } 
 
     ] 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "customerTypeId": 3, 
 
    "customerTypeName": "Provider", 
 
    "childCategories": [{ 
 
     "categoryId": 5, 
 
     "categoryName": "Provider-Cat-1", 
 
     "customerTypeID": 3, 
 
     "childSubCategories": [{ 
 
      "subCategoryId": 9, 
 
      "subCategoryName": "Provider-SubCat-1-1", 
 
      "categoryID": 5 
 
      }, 
 
      { 
 
      "subCategoryId": 10, 
 
      "subCategoryName": "Provider-SubCat-1-2", 
 
      "categoryID": 5 
 
      } 
 
     ] 
 
     }, 
 
     { 
 
     "categoryId": 6, 
 
     "categoryName": "Provider-Cat-2", 
 
     "customerTypeID": 3, 
 
     "childSubCategories": [{ 
 
      "subCategoryId": 11, 
 
      "subCategoryName": "Provider-SubCat-2-1", 
 
      "categoryID": 6 
 
      }, 
 
      { 
 
      "subCategoryId": 12, 
 
      "subCategoryName": "Provider-SubCat-2-2", 
 
      "categoryID": 6 
 
      } 
 
     ] 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "customerTypeId": 4, 
 
    "customerTypeName": "Other", 
 
    "childCategories": [{ 
 
     "categoryId": 7, 
 
     "categoryName": "Other-Cat-1", 
 
     "customerTypeID": 4, 
 
     "childSubCategories": [{ 
 
      "subCategoryId": 13, 
 
      "subCategoryName": "Other-SubCat-1-1", 
 
      "categoryID": 7 
 
      }, 
 
      { 
 
      "subCategoryId": 14, 
 
      "subCategoryName": "Other-SubCat-1-2", 
 
      "categoryID": 7 
 
      } 
 
     ] 
 
     }, 
 
     { 
 
     "categoryId": 8, 
 
     "categoryName": "Other-Cat-2", 
 
     "customerTypeID": 4, 
 
     "childSubCategories": [{ 
 
      "subCategoryId": 15, 
 
      "subCategoryName": "Other-SubCat-2-1", 
 
      "categoryID": 8 
 
      }, 
 
      { 
 
      "subCategoryId": 16, 
 
      "subCategoryName": "Other-SubCat-2-2", 
 
      "categoryID": 8 
 
      } 
 
     ] 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "customerTypeId": 5, 
 
    "customerTypeName": "None", 
 
    "childCategories": [{ 
 
     "categoryId": 9, 
 
     "categoryName": "None-Cat-1", 
 
     "customerTypeID": 5, 
 
     "childSubCategories": [{ 
 
      "subCategoryId": 17, 
 
      "subCategoryName": "None-SubCat-1-1", 
 
      "categoryID": 9 
 
      }, 
 
      { 
 
      "subCategoryId": 18, 
 
      "subCategoryName": "None-SubCat-1-2", 
 
      "categoryID": 9 
 
      } 
 
     ] 
 
     }, 
 
     { 
 
     "categoryId": 10, 
 
     "categoryName": "None-Cat-2", 
 
     "customerTypeID": 5, 
 
     "childSubCategories": [{ 
 
      "subCategoryId": 19, 
 
      "subCategoryName": "None-SubCat-2-1", 
 
      "categoryID": 10 
 
      }, 
 
      { 
 
      "subCategoryId": 20, 
 
      "subCategoryName": "None-SubCat-2-2", 
 
      "categoryID": 10 
 
      } 
 
     ] 
 
     } 
 
    ] 
 
    } 
 
]; 
 
let result = data.map(item => item["childCategories"]) 
 
    .reduce((a, item) => a.concat(item), []) 
 
    .map(({ 
 
    categoryId, 
 
    categoryName, 
 
    customerTypeID 
 
    }) => ({ 
 
    categoryId, 
 
    categoryName, 
 
    customerTypeID 
 
    })); 
 
console.log(result);

関連する問題