Как получить данные отдельной записи из другого JSON по идентификатору в Angular 6?

Question

Я учусь строить угловой клиент 6 для отображения данных из данных JSON.Я могу получить данные из прямых значений JSON, но не знаю, как извлечь данные из JSON на основе id , который ссылается на другой объект JSON .Я пробовал разные способы для достижения этой цели, но только результаты в https://../users/undefined.Здесь undefined - это Id , который я передаю из одного JSON в другой JSON.

Так выглядит posts JSON,

   [
       {
           "userId": 1,
           "id": 1,
           "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
           "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
       }, ...
   ]

Это пользователь по идентификатору Данные JSON,

    [
        {
        "id": 1,
        "name": "Leanne Graham",
        "username": "Bret",
        "email": "Sincere@april.biz",
        "phone": "1-770-736-8031 x56442",
        "website": "hildegard.org",
    ]

Я хочу получить "name": "Leanne Graham" от пользователя JSON, используя "userId": 1 из сообщений JSON.

Это то, что у меня есть вmy PostsComponent

    export class PostsComponent implements OnInit {
        posts$: Object;
        user$: Object;
        userId: Number

        constructor(private data: DataService, private route: ActivatedRoute) {
            this.route.params.subscribe(
                params => this.user$ = params.id
            )
        }

        ngOnInit() {
            this.data.getPosts().subscribe(
                data => this.posts$ = data
            );

            this.data.getUser(this.userId).subscribe(
                data => this.user$ = data
            );
        }

Пользователь DetailsComponent ,

    export class DetailsComponent implements OnInit {
        user$: Object;

        constructor(private data: DataService, private route: ActivatedRoute) {
            this.route.params.subscribe(
                params => this.user$ = params.id
            )
        }

        ngOnInit() {
            this.data.getUser(this.user$).subscribe(
                data=>this.user$ = data
            )
        }

    }

Сервис,

    getUser(userId){
        return this.http.get('https://jsonplaceholder.typicode.com/users/'+userId);
    }

    getPosts(){
        return this.http.get('https://jsonplaceholder.typicode.com/posts');
    }

Что у меня есть,

Чего я хочу достичь,

Спасибо.

Answer 1

Проблема, с которой я здесь столкнулся, заключалась в том, что я использую предварительно созданный API, и этот API возвращает данные в виде объекта объектов, а не массива объектов .И именно поэтому я не мог назначить эти Объекты Array<Post>, как указано @ JB Nizet .

Использование forEach непосредственно на объекте, как показано ниже, дает ошибку Property 'forEach' does not exist on type 'Object'.

    this.posts.forEach(key => {
      this.data.getUser(this.posts[key].userId).subscribe(
        data => {
          this.user = data;
        }
      );
    });

Вы должны выполнять итерацию, используя ключи объекта, а не сам объект.Затем присвойте желаемое свойство вновь созданному свойству в том же объекте.почему я не создал новую переменную string[] для назначения списка новых свойств, JavaScript поддерживает динамическое создание свойств для объектов (Вот ссылка с подробным обсуждением) итакже, чтобы избежать ненужного использования памяти.Вот как вы можете перебирать Объект.

    Object.keys(this.posts).forEach(key => {
      this.data.getUser(this.posts[key].userId).subscribe(
        data => {
          this.posts[key].name = data["name"];
        }
      );
    }); 

Теперь вы можете перебирать Объект в шаблоне и предоставлять вновь созданное свойство.

    <li *ngFor="let post of posts">
        <h2>{{post.title}}</h2>
        <p>- {{post.name}} </p>
    </li>

Ваш результат будет выглядеть примерно так

Спасибо @EmandM и @JB Nizet за помощьрука.