отображение интерфейса для данных JSON

Question

У меня есть интерфейс INavigation, имена полей которого отличаются от полей в данных JSON. Как мне сопоставить поля из интерфейса с данными JSON?

Вот код:

INavigation.ts

export interface INavigation {
  Id: number;
  AppId: number;
  NavId: number;
  Name: string;
  ParentId: string;
  PageURL: string;
  Position: string;
  Active: string;
  Desktop: string;
  Tablet: string;
  Phone: string;
  RoleId: string;
  Target: string;
}

Данные JSON:

{
    "Id": 1,
    "NavAppId": 1,
    "NavId": "1FGP",
    "NavName": "Home",
    "NavParentId": "",
    "NavPageURL": "?p=home",
    "NavPosition": "Top",
    "NavActive": "Y",
    "NavDesktop" : "Y",
    "NavTablet" : "N",
    "NavPhone": "Y",
    "NavRoleId" : "6,17,28,43,44,49,50,59,60,63,64,77,78,79,80,81",
    "NavTarget": "_parent"
}

Вот метод в службе, который получает данные из файла JSON:

   getNavigations(appId: any): Observable<Array<INavigation>> {
      return this.httpClient.get<Array<INavigation>>('../assets/navigations.json')
                  .pipe(
                    map(data => data.filter(navigation => navigation.NavAppId === appId))
                  );

   }

Answer 1

stackblitz должен дать вам то, что вы хотите.

Операция отображения выглядит следующим образом:

map((data: any[]) => {
  return data.map((navigation: any) => {
    return <INavigation> {
      Id: navigation.Id,
      AppId: navigation.NavAppId,
      NavId: navigation.NavId,
      Name: navigation.NavName,
      ParentId: navigation.NavParentId,
      PageURL: navigation.NavPageURL,
      Position: navigation.NavPosition,
      Active: navigation.NavActive,
      Desktop: navigation.NavDesktop,
      Tablet: navigation.NavTablet,
      Phone: navigation.NavPhone,
      RoleId: navigation.NavRoleId,
      Target: navigation.NavTarget
    }
  })
})

Кроме того, вы можете использовать класс, который реализует интерфейс, который в конструкторе принимает объект JSON и выполняет сопоставление там. Это облегчило бы повторное использование. Вы можете увидеть, как это сделать в этой альтернативе stackblitz

Можно, конечно, вообще пропустить использование интерфейса и просто использовать класс.

Answer 2

Как насчет изменения атрибутов в интерфейсе INavigation? Используйте то же имя, что и данные JSON. Вот мой пример (угловой): Мой постсервисный код:

     getPosts(){
    return this.http.get('https://jsonplaceholder.typicode.com/posts').map(res =>res.json());
  }

В моем файле component.ts я импортирую службу, а затем:

pos:po[];
constructor(private postsService:PostsService) {

    // get object from url.
    this.postsService.getPosts().subscribe(posts=>{
      console.log(posts);
      this.pos=posts;
    })
   }

        interface po{
      id:number;
      title:string;
      body:string;
    }

данные JSON, которые я извлекаю из URL, имеют те же атрибуты, что и мой интерфейс po. Я думаю, именно поэтому ваш код не работает.