2017-09-22 6 views
0

.net 코어 및 각도 4가있는 새 프로젝트에서 - 실제 데이터베이스가 설치 될 때까지 기다려야했습니다.계단식 드롭 다운을위한 하드 코딩 된 데이터에서 웹 API 호출로 복잡한 객체 가져 오기

DBA는 백엔드 개발자와 함께 웹 API를 끝내기 때문에 배열에서 훨씬 단순한 데이터로 중첩 된 객체를 호출하고 가져와야합니다.

현재 데이터는 당신이 아래로 스크롤 경우 3 계단식에 대한 나의 단일 통화를 볼 수 있습니다

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'), 
    ]; 
} 

모든 범주를 검색하는 메서드를 호출 곳 여기

가 호출 드롭 다운은 모두 1 개의 큰 복합 개체에 있습니다. Angular4/typescript로 유지해야하는이 데이터를 호출하려면 어떻게해야합니까? 아이디어/예가 있습니까? (자신감의 UI)를 반환합니다

새 데이터는 내가 원하는대로 당신은 여러 가지 방법으로 배열 map(), reduce()를 사용할 수있는 웹 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

웃기는 소리. 유능한 안경을 오래하고 멜빵을 매일 착용하는 우리 팀의 개발자는 "은행가"라고 일컬으며 그는 똑똑하고 재미 있습니다. 웹 API 및 기타 백엔드를 만든이 원격 개발자와 함께 전화를 통해 ... 우리의 "은행가"녀석은 "안녕하세요, 존, MIT가 전화를 걸어서 로켓 과학에 도움을 청했습니다."... "이것은 너무 과장되어 있습니다 ..." –

+0

나는 그 방법을 수정해야한다고 생각합니다. 부모 ID를 전달하고 데이터를 반복하여 해당 데이터를 반환하십시오. 예를 들어 getCategory 메서드를 사용하면 모든 범주 이름을 함께 묶어야합니다. 그렇게하는 가장 좋은 방법은 무엇입니까? –

답변

0

를 호출하는 데 사용. 그것도보기 좋은 filter().

여기서도 destruction in parameters의 사용이 있습니다.

Angular 4에서는 작성하지 않은 경우 이미 서비스가 제공되기를 바랍니다. 서비스에서 API를 호출하고 결과를 변환하고 구성 요소에서 해결하거나 구독 할 수있는 약속 또는 관찰자를 반환 할 수 있습니다.

let result = data.map(item => item["childCategories"]) 
    .reduce((a, item) => a.concat(item), []) 
    .map(({ 
    categoryId, 
    categoryName, 
    customerTypeID 
    }) => ({ 
    categoryId, 
    categoryName, 
    customerTypeID 
    })); 

마지막지도

class 거기에이 변경 될 수 있습니다

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