Структурирование данных для отображения

@Alex562035 · Регистрация: 04.01.2018

Студворк — интернет-сервис помощи студентам

Приветствую формучане, запутался в написании правильной структуры JSON файла с данными, которые я хотел бы отобразить, а возможно он даже и не нужен, но пока не могу прикинуть как правильно исправить.

Структура вывода данных у меня должна быть такой:

Рекомендуемая книга
2015
- Книга А
- Книга Б
2018
- Книга И
- Книга К
- Книга Л
2020
- Книга Е
Книга без указания года
- Книга Ж
- Книга З

Формат данных, которые я сейчас получаю на выходе

{"Name": "Javascript", "Author": "Den", "Year": "2015", "raiting": 5, "ISBN": 67556-5656},
{"Name": "Python", "Author": "Tom", "Year": "2016", "raiting": 4, "ISBN": 67556-5656},
{"Name": "Java", "Author": "David", "Year": "2018", "raiting": 4, "ISBN": 67556-5656},

Я хотел в дальнейшем прописать логику и разбить массив-объекта в формат JSON, но для начала зрительно пробовать структурировать данные, но я что-то путаюсь по разбивке на несколько разных объектов с годами и книгами. Изначало у меня есть просто массив books1, который идет по возрастанию. Знаю что нельзя несколько раз повторять значение books и year, так как пока не знаю как все вместить правильно.

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
    "recommendation__book": "Javascript",
    "books_all":[{
    "year": 2020,
    "books": [
         {"Name": "Javascript", "Author": "Den", "Year": "2020", "raiting": 5, "ISBN": 67556-5656},
        {"Name": "Python", "Author": "Tom", "Year": "2020", "raiting": 4, "ISBN": 67556-5656},
        {"Name": "Java", "Author": "David", "Year": "2020", "raiting": 4, "ISBN": 67556-5656},
        ],
    "year": 2018,
    "books": [
         {"Name": "Javascript", "Author": "Den", "Year": "2018", "raiting": 5, "ISBN": 67556-5656},
        {"Name": "Python", "Author": "Tom", "Year": "2018", "raiting": 4, "ISBN": 67556-5656},
        {"Name": "Java", "Author": "David", "Year": "2018", "raiting": 4, "ISBN": 67556-5656},
        ],
    "year": 2016,
    "books": [
         {"Name": "Javascript", "Author": "Den", "Year": "2016", "raiting": 5, "ISBN": 67556-5656},
        {"Name": "Python", "Author": "Tom", "Year": "2016", "raiting": 4, "ISBN": 67556-5656},
        {"Name": "Java", "Author": "David", "Year": "2016", "raiting": 4, "ISBN": 67556-5656},
        ],
    "no_years_book":[
        {"Name": "Javascript", "Author": "Den", "Year": "0", "raiting": 5, "ISBN": 67556-5656},
        {"Name": "Python", "Author": "Tom", "Year": "0", "raiting": 4, "ISBN": 67556-5656}
        ]
    },
]
}

У меня есть также компонент где у меня отображается список с данными из Firebase в нем у меня есть функция sort(), которая сортирует мой список по возрастанию. Но я пока не понимаю как мне правильно отображать еще заголовки с годами чтобы этот список был как-бы вложен. Я так понял здесь возможно уже нужно как-то структурировать в формат JSON, так как нужно еще отображать книги без года и рекомендуемые, для которых я позже пропишу логику.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import React, { useEffect, useState } from 'react'
import firebase from '../../firebase';
import {Link, useHistory} from 'react-router-dom';
const MainPage = () => {
 
    const [books1, setBooks] = useState([])
    let history = useHistory();
 
    const ref = firebase.firestore().collection('books1');
 
    const getBooksList = () => {
        ref.onSnapshot((querySnapshot)=> {
            const list = [];
            querySnapshot.forEach((doc)=>{
                list.push(doc.data());
            });
            setBooks(list)
        })
    };
 
    const deleteBook = (id) => {
        ref
            .doc(id)
            .delete()
            .catch((err) =>{
                console.error(err);
            })
    }
 
    const editBook = (id) => {
        history.push('/editbook/' + id)
    }
 
 
 
    useEffect(() => {
        getBooksList();
    }, [])
 
    console.log(books1)
 
 
    function sort(){
        for(let i = 0; i < books1.length; i++){
            books1[i].Year = Number(books1[i].Year)
        }
        books1.sort((a, b) => a.Year > b.Year ? 1 : -1);
    }
    sort()
 
 
    return(
        <>
        <div>
            {books1.map((c) =>(
                <div>
                    <p>Год: </p>
                    <div key={c.id}>
                        <h5>{c.Name}</h5>
                        <p>Автор: {c.Author}</p>
                        <p>Год публикации: {c.Year}</p>
                        <p>Рейтинг: {c.Raiting}</p>
                        <p>ISBN: {c.ISBN}</p>
                        <button onClick={() => deleteBook(c.id)}>Удалить</button>
                        <button onClick={() => editBook(c.id)}>Изменить</button>
                    </div>
                </div>
            ))}
        </div>
        </>
    )
}
 
export default MainPage;

@Ovederax · 11.06.2021, 07:37

Сообщение от Alex562035

запутался в написании правильной структуры JSON файла с данными

Не знаком с возможностями firebase.

1 убрать эти year снаружи и оставить только список книг (как при построении обчной бд на sql), и группировать его на фронтенд по году.
Плюсы:
- нужно если у тебя список большой будет то потребуется серверная сортировка и пагинация.
- нужно если ты будешь потом делать сортировки по имени либо по другому полю
-> в таком виде как ты представил нужно будет на сервере потом как-то ломать голову с этим
Вид ответа который дает сервер сейчас - нормально, просто сделай серверную сортировку и фронтендную группировку

2 Ну можно и сделать Map по ключу year как ты это сделал с "no_years_book":, например
Year в книге в таком случае избыточен
Мне такой вид хранения не нравится, не удобен

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
const list = {
  recommendation: 'Javascript',
  books: {
    '2020': [
      {
        Name: 'Javascript',
        Author: 'Den',
        Year: '2020',
        raiting: 5,
        ISBN: 67556 - 5656
      },
      {
        Name: 'Python',
        Author: 'Tom',
        Year: '2020',
        raiting: 4,
        ISBN: 67556 - 5656
      },
      {
        Name: 'Java',
        Author: 'David',
        Year: '2020',
        raiting: 4,
        ISBN: 67556 - 5656
      }
    ],
    '2018': [
      {
        Name: 'Javascript',
        Author: 'Den',
        Year: '2018',
        raiting: 5,
        ISBN: 67556 - 5656
      },
      {
        Name: 'Python',
        Author: 'Tom',
        Year: '2018',
        raiting: 4,
        ISBN: 67556 - 5656
      },
      {
        Name: 'Java',
        Author: 'David',
        Year: '2018',
        raiting: 4,
        ISBN: 67556 - 5656
      }
    ],
    '2016': [
      {
        Name: 'Javascript',
        Author: 'Den',
        Year: '2016',
        raiting: 5,
        ISBN: 67556 - 5656
      },
      {
        Name: 'Python',
        Author: 'Tom',
        Year: '2016',
        raiting: 4,
        ISBN: 67556 - 5656
      },
      {
        Name: 'Java',
        Author: 'David',
        Year: '2016',
        raiting: 4,
        ISBN: 67556 - 5656
      }
    ],
    'no_years_book': [
      {
        Name: 'Javascript',
        Author: 'Den',
        Year: '0',
        raiting: 5,
        ISBN: 67556 - 5656
      },
      {
        Name: 'Python',
        Author: 'Tom',
        Year: '0',
        raiting: 4,
        ISBN: 67556 - 5656
      }
    ]
  }
};
for (it in list.books) {
  console.log(it, list.books[it]);
}

Сообщение от Alex562035

{books1.map((c) =>(
<div>
<p>Год: </p>
<div key={c.id}>

Откуда c.id? c.id должен быть в первом div.

да и еще, поправь Name -> name и т.д.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

Структурирование данных для отображения

Решение