Как в JSON добавить теги html или svg?

@Alex3928 · Регистрация: 18.05.2021

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

Подскажие как можно в JSON файл указать html элемент или svg?
Я указал так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    "id": "1YQ159", 
    "buttons": {
      "add": "<div>&#10133</div>",
      "favorites": "<div>&#10084</div>"
    },
    "img": {
      "url": "../../img/sweater-1.webp",
      "alt": "Худі чоловічий з написом DEVOPS"
    },
    "title": "Худі чоловічий з написом DEVOPS",
    "price": {
      "title": "Ціна",
      "price": 781
    }
  },

и получил гадость в виде строки.(Картинка ниже)

Как это можно исправить?

@atanov · 18.09.2022, 14:23

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

Подскажие как можно в JSON

Можно.

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

и получил гадость в виде строки

Вывод как сделан?

@Alex3928 · 18.09.2022, 14:35 **[ТС]**

atanov,

https://6326dc055731f3db994e50c7.mockapi.io/items куда fetch запрос отправляет

Компонент. В верху запрос в return отрисовка

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
export const WrapperContainer = () => {
  const [items, setItems] = React.useState([]);
 
  React.useEffect(() => {
    fetch('https://6326dc055731f3db994e50c7.mockapi.io/items').then(response => {
      return response.json();
    }).then(json => {
      setItems(json);
    });
  }, []);
 
  return (
    <div className={styles.WrapperContainer}>
      <div className={styles.coloms}>
        {items.map((object) => (
          <Card
            key={ object.id }
            id={ object.id }
            buttons={ object.buttons }
            img={ object.img }
            title={ object.title }
            price={ object.price }
            onClickAdd={() => alert('Добавили в корзину') }
            onClickFavorite={() => alert('Добавили в закладки') }
          />
        ))}
      </div>
    </div>
  );
};

@Eva Rosalene · 18.09.2022, 15:01

Alex3928, покажите код элемента Card.
Скорее всего вам надо будет использовать там условное

JavaScript
1
<button dangerouslySetInnerHTML={{ __html: data }} />

вместо

JavaScript
1
<button>{data}</button>

@atanov · 18.09.2022, 15:03

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

buttons

похоже textContent забирает, а Вы хотите innerHTML получить, поэтому и выводит содержимое разметки вместо html'ля. Честно говоря не помню, как в react.js подменить в компоненте одно другим, может и вообще нельзя.

@Alex3928 · 18.09.2022, 15:12 **[ТС]**

Eva Rosalene,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export const Card = (props) => {
  return (
    <div className={styles.itemCard} id={ props.id }>
      <div className={ styles.box }>
        <button className={ styles.add } onClick={ props.onClickAdd }>{ props.buttons.add }</button>
        <button className={ styles.favorites } onClick={ props.onClickFavorite }>{ props.buttons.favorites }</button>
      </div>
      <img className={styles.image} src={ props.img.url } alt={ props.img.alt } />
      <div className={styles.wrapperContainer}>
        <span className={styles.title}>{ props.title }</span>
        <div className={styles.container}>
          <span className={styles.lead}>{ props.price.title }</span>
          <b className={styles.price}>{ props.price.price } грн</b>
        </div>
      </div>
    </div>
  );
};

@Eva Rosalene · 18.09.2022, 16:39

Alex3928,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export const Card = (props) => {
  return (
    <div className={styles.itemCard} id={ props.id }>
      <div className={ styles.box }>
        <button className={ styles.add } onClick={ props.onClickAdd } dangerouslySetInnerHTML={{ __html: props.buttons.add }} />
        <button className={ styles.favorites } onClick={ props.onClickFavorite} dangerouslySetInnerHTML={{ __html: props.buttons.favorites }} />
      </div>
      <img className={styles.image} src={ props.img.url } alt={ props.img.alt } />
      <div className={styles.wrapperContainer}>
        <span className={styles.title}>{ props.title }</span>
        <div className={styles.container}>
          <span className={styles.lead}>{ props.price.title }</span>
          <b className={styles.price}>{ props.price.price } грн</b>
        </div>
      </div>
    </div>
  );
};

Добавлено через 2 минуты
Демо: https://codesandbox.io/s/kind-... src/App.js

@Alex3928 · 18.09.2022, 16:49 **[ТС]**

Eva Rosalene, твой вариант даже лучше. Я как переменую указывал

@MaksimkaI · 19.09.2022, 00:29

Alex3928,

JavaScript
1
export const Card = ({id, img, title, price}) = {}

сразу делай

либо

JavaScript
1
const {id, img, title, price} = props

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера 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. Пошагово создадим проект для загрузки изображения. . .

@Alex3928 2 / 2 / 0 Регистрация: 18.05.2021 Сообщений: 61
	18.09.2022, 16:49 [ТС]
	Eva Rosalene, твой вариант даже лучше. Я как переменую указывал 0

Как в JSON добавить теги html или svg?

Решение