запрашивая JSON в угловой

Question

У меня есть Json с двумя разными объектами: читателями и книгами, что-то вроде этого:

{
"users": [{
        "id": 1,
        "username": "peterB",
    },
    {
        "id": 2,
        "username": "MaryC"
    }
],

"books": [{
        "id": 10,
        "user": 1,
        "title": "test1"
    },
    {
        "id": 33,
        "user": 1,
        "title": "test2"
    }
]
}

В моем html я хочу отобразить каждую книгу с именем пользователя, связанным с ним.используя ngFor = "let book of books"> {{book.title}}, принадлежащий {{book.username}} ....

Я не могу найти способ получить это в моем компоненте,Я только получаю список книг

 books: any;
getBooks() {
this.http.get("assets/data.json")
.subscribe((success) => {
  this.books = success.json().books;});}

У кого-нибудь есть идеи, как это сделать?Спасибо!

Answer 1

Вы можете просматривать книги и искать каждого пользователя, связанного с ним:

const data = {
  users: [
    {
      id: 1,
      username: "peterB"
    },
    {
      id: 2,
      username: "MaryC",
      real_name: "Conan O'Brien",
      verified: true
    }
  ],
  books: [
    {
      id: 10,
      user: 1,
      title: "test1"
    },
    {
      id: 33,
      user: 1,
      title: "test2"
    }
  ]
};

const booksWithUsers = data.books.map(book => ({
  ...book,
  user: data.users.find(({ id }) => id === book.user)
}));

console.log(booksWithUsers);

Answer 2

Я думаю, вы можете решить эту проблему, вложив пользовательский объект в объект книги ...

Вот так

{
"books": [{
        "id": 10,
        "user": {
            "id": 1,
            "username": "peterB"
         },
        "title": "test1"
    },
    {
        "id": 33,
        "user": {
            "id": 2,
            "username": "MaryC",
            "real_name": "Conan O'Brien",
            "verified": true
        },
        "title": "test2"
    }
]
}