How to display data by category?

Question

Angular

Hello. I started learning AngularJS, came up with an impossible task for myself) Imagine that we get JSON with a list of various books, each has a genre. To begin with, I simply brought all the books into one heap - no problem. And now I want all these books to be divided by genre, that is:
Genre name 1:
Books included in the second genre
Name of the genre 2:
Books included in the second genre
Here is the json that we get.

[{
    "bookID": "1",
    "img": "img/TriumphArch.jpg",
    "author": "Эрих Мария Ремарк",
    "genre": "Роман",
    "year": "1945",
    "bookname": "Триумфальная Арка"
}, {
    "bookID": "2",
    "img": "img/MartinEden.jpg",
    "author": "Джек Лондон",
    "genre": "Роман",
    "year": "1909",
    "bookname": "Мартин Иден"
}, {
    "bookID": "3",
    "img": "img/Process.jpg",
    "author": "Франц Кафка",
    "genre": "Роман",
    "year": "1914",
    "bookname": "Процесс"
}, {
    "bookID": "4",
    "img": "img/finalDay.jpg",
    "author": "Виктор Гюго",
    "genre": "Роман",
    "year": "1892",
    "bookname": "Последний день приговорённого к смерти"
}, {
    "bookID": "5",
    "img": "img/Island.jpg",
    "author": "Олдос Хаксли",
    "genre": "Роман",
    "year": "1962",
    "bookname": "Остров"
}, {
    "bookID": "6",
    "img": "img/DrunkShip.jpg",
    "author": "Артюр Рембо",
    "genre": "Другое",
    "year": "1871",
    "bookname": "Пьяный корабль"
}, {
    "bookID": "7",
    "img": "img/Chevengur.jpg",
    "author": "Андрей Платонов ",
    "genre": "Роман",
    "year": "1926",
    "bookname": "Чевенгур"
}, {
    "bookID": "8",
    "img": "img/Gadfly.jpg",
    "author": "Этель Лилиан Войнич",
    "genre": "Роман",
    "year": "1897",
    "bookname": "Овод"
}]

Tell me which direction to dig. Happy Monday everyone :)

Answer 1

https://jsfiddle.net/yarkov_aleksei/m62akmts/1/

Answer 2

I write in java + jquery and then rewrite it in angular
https://jsfiddle.net/grhntnhd/