Вывод вложенного массива на динамически страницу

@apofeouz · Регистрация: 01.07.2020

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

Приветствую! Прошу помощи. Пятую ночь не сплю немогу ни как победить, Гугл не гуглится, нахожу, что то кусками но не работает так как я хочу. Есть файл json с вложенными элементами, то есть страничка с товаром, на каждой страничке должен быть только тот товар, который вложен, а у меня получается, что весь товар сразу вываливается на одной страничке, делал по другому, и тогда получается что на страничке отображается ровно столько товара сколько я создал id то есть во вложенном может быть три товара а страничку я создаю одну, то и товар будет отображаться один если две странички то два товара но каждый на своей странице, как положено, но это тоже не вариант так как надо все элементы вложеные отобразить. Вообщем очень прошу помочь. Код прилагаю

Файл JSON

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
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
let data = {
products: [
        {
            "id": 1,
            "title": "Информационные стенды",
            product: [
                {
                "id": 1,
                "name": "Информационный стенд",
                "imgUrl": "http://asan-pro.ru/bas_pro/admin/foto/1411129045.gif",
                "text": "Основа: белый ПВХ 5мм 6 плоских карманов(акрил прозрачный 2мм) формата А4. Надпись: аппликация, плоттерная резка плёнки Oracal. Размер: 750x750",
                "price": "1500 руб."
            },
            {
                "id": 2,
                "name": "Информационный стенд",
                "imgUrl": "http://asan-pro.ru/bas_pro/admin/foto/1411129082.gif",
                "text": "Основа: белый ПВХ 5мм 3 плоских кармана(акрил прозрачный 2мм) формата А4 ;3 объёмных кармана А4( акрил прозрачный 2мм,глубина кармана 28мм) Надпись: аппликация, плоттерная резка плёнки Oracal Размер: 750*750",
                "price": "1600 руб."
            },
            {
                "id": 3,
                "name": "Информационный стенд",
                "imgUrl": "http://asan-pro.ru/bas_pro/admin/foto/1411129119.gif",
                "text": "Основа: белый ПВХ 5мм 6 объёмных карманов(акрил прозрачный 2мм, глубина кармана 28мм) формата А4 Надпись: аппликация, плоттерная резка плёнки Oracal Размер: 750*750",
                "price": "1400 руб."
            }
                      ]       
        
         },
         {
            "id": 2,
            "title": "Свадебная атрибутика",
            product: [
                {
                "id": 1,
                "name": "Информационный стенд",
                "imgUrl": "http://asan-pro.ru/bas_pro/admin/foto/1425655828.png",
                "text": "Основа: белый ПВХ 5мм 6 плоских карманов(акрил прозрачный 2мм) формата А4. Надпись: аппликация, плоттерная резка плёнки Oracal. Размер: 750x750",
                "price": "1500 руб."
            },
            {
                "id": 2,
                "name": "Информационный стенд",
                "imgUrl": "http://asan-pro.ru/bas_pro/admin/foto/1425656099.png",
                "text": "Основа: белый ПВХ 5мм 6 плоских карманов(акрил прозрачный 2мм) формата А4. Надпись: аппликация, плоттерная резка плёнки Oracal. Размер: 750x750",
                "price": "1500 руб."
            },
            {
                "id": 3,
                "name": "Cвадебные приглашения",
                "imgUrl": "http://asan-pro.ru/bas_pro/admin/foto/1425656141.png",
                "text": "Резка бумаги, дизайнерская бумага.",
                "price": "200 руб."
            }
                      ]
        
           
            }
        
    ]}

Код страницы с выводом

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
import React from 'react';
import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBCardImage, MDBCol, MDBRow } from 'mdb-react-ui-kit';
import { Container, Col, Row } from 'react-bootstrap';
import { Card, ListGroup, Alert } from 'react-bootstrap';
import ProductsBlock from '../Componets/ProductsBlock';
import { BrowserRouter as Route, Link } from "react-router-dom";
import { List, ListItem, } from '@mui/material';
import data from '../Componets/data';
 
const Products = (props) => {
 
  return (
    <Container>
      <Row className="mt-5">
        <Col md="3" className="mt-2">
          <Card>
            <Card.Header className="text-center">Продукция</Card.Header>
            <ListGroup variant="flush" striped bordered hover>
              <List component="nav" aria-label="mailbox folders">
 
                {/* Подключаю динамические страницы */}
 
                {data.products.map((product, id) => (
                  <ListItem button divider component={Link} to={`/products/${id + 1}`}>{product.title}
                  </ListItem>
                ))}
              </List>
            </ListGroup>
          </Card>
        </Col>
        <Col md="9">
          {/* титл страницы */}
          {data.products.map(({title, product }) => (
            <MDBCard>
              <MDBCardBody>
 
                <h3 className="font-weight-bold mb-3 p-0 text-center">
                  <strong>{title}</strong>
                </h3>
                {/* Вывод вложения */}
                {product.map(({ name, price, text, imgUrl }) => (
                  <><hr className="my-3" /><MDBRow className='g-0'>
                    <MDBCol md='4'>
                      <MDBCardImage src={imgUrl} alt='...' fluid />
                    </MDBCol>
                    <MDBCol md='8'>
                      <MDBCardBody>
                        <MDBCardTitle>{name}</MDBCardTitle>
                        <MDBCardText>
                          {text}
                        </MDBCardText>
                        <hr className="my-3" />
                        <Alert variant='info'>Цена: {price}</Alert>
                      </MDBCardBody>
                    </MDBCol>
                  </MDBRow></>
                ))}
 
              </MDBCardBody>
            </MDBCard>
          ))}
        </Col>
      </Row>
    </Container>
 
  )
}
 
export default Products;

Роутер

JavaScript
1
2
<Route exact path="/products/" component={Products} />
                        <Route exact path="/products/:title" component={Products} />

@MaksimkaI · 10.01.2022, 08:18

apofeouz, нарисуй что ты хочешь сделать. Вопрос перечитал несколько раз и не могу понять что тебе надо

@apofeouz · 10.01.2022, 20:04 **[ТС]**

Приветствую! Загрузил изображение. Дело в том что я создаю динамическую страницу и разные группы товаров должны отображаться на своих страницах, а у меня получается что всё что есть во вложенности json отображается. а если не делать map то отображает только один товар но в правильной вкладке. то есть стенды в стендах а атрибутика в атрибутике.

@apofeouz · 10.01.2022, 20:11 **[ТС]**

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

apofeouz, нарисуй что ты хочешь сделать. Вопрос перечитал несколько раз и не могу понять что тебе надо

Есть например модули готовые например react-image-gallery для фото галерея там всё у меня получилось просто и без затей с вложенностью json так как мне нужно каждый товар на своей странице.

@MaksimkaI · 11.01.2022, 08:14

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

...

если ты нажимаешь на информационные стенды и тебе надо, чтобы отобразились записи с титулом информационные стенды так? то тут нужно фильтровать данные, т.е. отобразить записи где титул - "title": "Информационные стенды".
Но опять же для таких целей я, думаю, в объектах твоего массива (json) нужно добавить отдельное свойство: category. Например

Code
1
2
3
4
5
6
{
            "id": 1,
            "title": "Информационные стенды",
            "category": "стенды",
            product: 
}

@apofeouz · 18.01.2022, 20:59 **[ТС]**

Получается нужно будет сделать условия например если титл имеет надпись информационные стенды, то показать все блоки имеющие категорию с названием информационные стенды?

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 31.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 30.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@MaksimkaI 130 / 68 / 31 Регистрация: 24.07.2018 Сообщений: 787
	10.01.2022, 08:18
	apofeouz, нарисуй что ты хочешь сделать. Вопрос перечитал несколько раз и не могу понять что тебе надо 2

@apofeouz 1 / 1 / 0 Регистрация: 01.07.2020 Сообщений: 25
	10.01.2022, 20:04 [ТС]
	Приветствую! Загрузил изображение. Дело в том что я создаю динамическую страницу и разные группы товаров должны отображаться на своих страницах, а у меня получается что всё что есть во вложенности json отображается. а если не делать map то отображает только один товар но в правильной вкладке. то есть стенды в стендах а атрибутика в атрибутике. Миниатюры 0

@apofeouz 1 / 1 / 0 Регистрация: 01.07.2020 Сообщений: 25
	18.01.2022, 20:59 [ТС]
	Получается нужно будет сделать условия например если титл имеет надпись информационные стенды, то показать все блоки имеющие категорию с названием информационные стенды? 0