Данные из json в модальное окно html

Мне нужно отобразить информацию из json в модальном окне HTML. У меня есть 12 кнопок, и когда пользователь нажимает на них, я хочу показать данные за этот месяц из файла json.

let myJson;

$(`button`).on(`click`, function() {
  let id_popup = this.attributes[`data-id`].value;
  $.getJSON(`content/js/monthjson.json`, function(months) {
    let month = Object.values(months).filter(function(data) {
      return data.id === id_popup;
    });
    $(`.modal-title`).text(month.georgiamonth);
    $(`.modal-body`).html(month.description);
  });
});

myJson = {
  "months": [{
      "id": 1,
      "georgiamonth": "Jan",
      "description": "description Jan month",
      "suggestmonths": ""
    },
    {
      "id": 2,
      "georgiamonth": "Feb",
      "description": "description Feb month",
      "suggestmonths": ""
    },
    {
      "id": 3,
      "georgiamonth": "Mar",
      "description": "description mar month",
      "suggestmonths": ""
    },
    {
      "id": 4,
      "georgiamonth": "April",
      "description": "",
      "suggestmonths": "description April month"
    },
    {
      "id": 5,
      "georgiamonth": "May",
      "description": "description May month",
      "suggestmonths": ""
    },
    {
      "id": 6,
      "georgiamonth": "June",
      "description": "description June month",
      "suggestmonths": ""
    },
    {
      "id": 7,
      "georgiamonth": "July",
      "description": "description July month",
      "suggestmonths": ""
    },
    {
      "id": 8,
      "georgiamonth": "Aug",
      "description": "description Aug month",
      "suggestmonths": ""
    },
    {
      "id": 9,
      "georgiamonth": "Sept",
      "description": "description Sept month",
      "suggestmonths": ""
    },
    {
      "id": 10,
      "georgiamonth": "Oct",
      "description": "description Oct month",
      "suggestmonths": ""
    },
    {
      "id": 11,
      "georgiamonth": "Nov",
      "description": "description Nov month",
      "suggestmonths": ""
    },
    {
      "id": 12,
      "georgiamonth": "Dec",
      "description": "description Dec month",
      "suggestmonths": ""
    }
  ]
}
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">

<button type = "button" class = "get-month-data btn btn-outline-danger btn-sm btn-block get-month-id" data-toggle = "modal" data-target = "#modelId" data-id = "1">Show id 1</button>
<button type = "button" class = "get-month-data btn btn-outline-info btn-sm btn-block" data-toggle = "modal" data-target = "#modelId" data-id = "2">Show id 2</button>
<button type = "button" class = "get-month-data btn btn-outline-warning btn-sm btn-block" data-toggle = "modal" data-target = "#modelId" data-id = "3">Show id 3</button>
<button type = "button" class = "get-month-data btn btn-outline-success btn-sm btn-block" data-toggle = "modal" data-target = "#modelId" data-id = "4">Show id 4</button>
<button type = "button" class = "get-month-data btn btn-outline-danger btn-sm btn-block" data-toggle = "modal" data-target = "#modelId" data-id = "5">Show id 5</button>
<button type = "button" class = "get-month-data btn btn-outline-info btn-sm btn-block" data-toggle = "modal" data-target = "#modelId" data-id = "6">Show id 6</button>
<button type = "button" class = "get-month-data btn btn-outline-warning btn-sm btn-block" data-toggle = "modal" data-target = "#modelId" data-id = "7">Show id 7</button>
<button type = "button" class = "get-month-data btn btn-outline-success btn-sm btn-block" data-toggle = "modal" data-target = "#modelId" data-id = "8">Show id 8</button>
<button type = "button" class = "get-month-data btn btn-outline-danger btn-sm btn-block" data-toggle = "modal" data-target = "#modelId" data-id = "9">Show id 9</button>
<button type = "button" class = "get-month-data btn btn-outline-info btn-sm btn-block" data-toggle = "modal" data-target = "#modelId" data-id = "10">Show id 10</button>
<button type = "button" class = "get-month-data btn btn-outline-warning btn-sm btn-block" data-toggle = "modal" data-target = "#modelId" data-id = "11">Show id 11</button>
<button type = "button" id = "btn" class = "get-month-data btn btn-outline-success btn-sm btn-block" data-toggle = "modal" data-id = "12" data-target = "#modelId">Show id 12</button>

<div class = "modal fade" id = "modelId" tabindex = "-1" role = "dialog" aria-labelledby = "modelTitleId" aria-hidden = "true">
  <div class = "modal-dialog" role = "document">
    <div class = "modal-content">
      <div class = "modal-header">
        <h5 class = "modal-title"> month title here </h5>
        <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
            <span aria-hidden = "true">&times;</span>
        </button>
      </div>

      <div class = "modal-body">
        description here
      </div>

      <div class = "modal-footer">
        <button type = "button" class = "btn btn-secondary" data-dismiss = "modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script src = "https://code.jquery.com/jquery-3.6.3.js" integrity = "sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM = " crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin = "anonymous"></script>

Добро пожаловать. Пожалуйста, пройдите тур и посмотрите Как задать вопрос, чтобы узнать, как лучше всего использовать этот сайт.

isherwood 13.02.2023 21:01
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
50
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Во-первых, вы, похоже, используете обратные кавычки вместо апострофов в селекторах jQuery и в других местах. Это не стандарт, и, хотя это может сработать, я не рекомендую это делать, хотя бы из соображений условности. Я сделал преобразование здесь.

Затем, вместо того, чтобы добавлять обработчик кликов, мы просто используем модальное событие шоу Bootstrap, получая идентификатор из relatedTarget в событии.

Наконец, мы будем использовать метод find(), чтобы получить соответствующий объект данных из массива.

Дополнительный совет: получайте данные только один раз при загрузке страницы, а не каждый раз при нажатии кнопки. То есть, если вы не ожидаете, что данные будут часто меняться.

let myJson;

$('#modelId').on('show.bs.modal', function(event) {
  const id_popup = event.relatedTarget.getAttribute('data-id');

  // $.getJSON('content/js/monthjson.json', function(months) {
    const month = myJson.months.find(el => el.id == id_popup);

    $('.modal-title').text(month.georgiamonth);
    $('.modal-body').html(month.description);
  // });
});

myJson = {
  "months": [{
      "id": 1,
      "georgiamonth": "Jan",
      "description": "description Jan month",
      "suggestmonths": ""
    },
    {
      "id": 2,
      "georgiamonth": "Feb",
      "description": "description Feb month",
      "suggestmonths": ""
    },
    {
      "id": 3,
      "georgiamonth": "Mar",
      "description": "description mar month",
      "suggestmonths": ""
    },
    {
      "id": 4,
      "georgiamonth": "April",
      "description": "",
      "suggestmonths": "description April month"
    },
    {
      "id": 5,
      "georgiamonth": "May",
      "description": "description May month",
      "suggestmonths": ""
    },
    {
      "id": 6,
      "georgiamonth": "June",
      "description": "description June month",
      "suggestmonths": ""
    },
    {
      "id": 7,
      "georgiamonth": "July",
      "description": "description July month",
      "suggestmonths": ""
    },
    {
      "id": 8,
      "georgiamonth": "Aug",
      "description": "description Aug month",
      "suggestmonths": ""
    },
    {
      "id": 9,
      "georgiamonth": "Sept",
      "description": "description Sept month",
      "suggestmonths": ""
    },
    {
      "id": 10,
      "georgiamonth": "Oct",
      "description": "description Oct month",
      "suggestmonths": ""
    },
    {
      "id": 11,
      "georgiamonth": "Nov",
      "description": "description Nov month",
      "suggestmonths": ""
    },
    {
      "id": 12,
      "georgiamonth": "Dec",
      "description": "description Dec month",
      "suggestmonths": ""
    }
  ]
};
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">

<button type = "button" class = "get-month-data btn btn-outline-danger btn-sm btn-block get-month-id" data-toggle = "modal" data-target = "#modelId" data-id = "1">Show id 1</button>
<button type = "button" class = "get-month-data btn btn-outline-info btn-sm btn-block" data-toggle = "modal" data-target = "#modelId" data-id = "2">Show id 2</button>
<button type = "button" class = "get-month-data btn btn-outline-warning btn-sm btn-block" data-toggle = "modal" data-target = "#modelId" data-id = "3">Show id 3</button>
<button type = "button" class = "get-month-data btn btn-outline-success btn-sm btn-block" data-toggle = "modal" data-target = "#modelId" data-id = "4">Show id 4</button>
<button type = "button" class = "get-month-data btn btn-outline-danger btn-sm btn-block" data-toggle = "modal" data-target = "#modelId" data-id = "5">Show id 5</button>
<button type = "button" class = "get-month-data btn btn-outline-info btn-sm btn-block" data-toggle = "modal" data-target = "#modelId" data-id = "6">Show id 6</button>
<button type = "button" class = "get-month-data btn btn-outline-warning btn-sm btn-block" data-toggle = "modal" data-target = "#modelId" data-id = "7">Show id 7</button>
<button type = "button" class = "get-month-data btn btn-outline-success btn-sm btn-block" data-toggle = "modal" data-target = "#modelId" data-id = "8">Show id 8</button>
<button type = "button" class = "get-month-data btn btn-outline-danger btn-sm btn-block" data-toggle = "modal" data-target = "#modelId" data-id = "9">Show id 9</button>
<button type = "button" class = "get-month-data btn btn-outline-info btn-sm btn-block" data-toggle = "modal" data-target = "#modelId" data-id = "10">Show id 10</button>
<button type = "button" class = "get-month-data btn btn-outline-warning btn-sm btn-block" data-toggle = "modal" data-target = "#modelId" data-id = "11">Show id 11</button>
<button type = "button" id = "btn" class = "get-month-data btn btn-outline-success btn-sm btn-block" data-toggle = "modal" data-id = "12" data-target = "#modelId">Show id 12</button>

<div class = "modal fade" id = "modelId" tabindex = "-1" role = "dialog" aria-labelledby = "modelTitleId" aria-hidden = "true">
  <div class = "modal-dialog" role = "document">
    <div class = "modal-content">
      <div class = "modal-header">
        <h5 class = "modal-title"> month title here </h5>
        
        <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
            <span aria-hidden = "true">&times;</span>
        </button>
      </div>

      <div class = "modal-body">
        description here
      </div>

      <div class = "modal-footer">
        <button type = "button" class = "btn btn-secondary" data-dismiss = "modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script src = "https://code.jquery.com/jquery-3.6.3.js" integrity = "sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM = " crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin = "anonymous"></script>

Спасибо вам большое за помощь и совет. у меня есть еще 1 вопрос. Как я могу сделать то же самое с изображениями? если я хочу зимнее изображение, заголовок и описание в декабре и летнее изображение, заголовок и описание в августе. как хранить изображения в этом json? и как их использовать в html?

Marcus 13.02.2023 23:14

Пожалуйста, не задавайте новые вопросы в комментариях (особенно к решенным сообщениям). Хотя на самом деле это ничем не отличается. Вы бы просто обновили атрибут src вместо текстового содержимого.

isherwood 13.02.2023 23:15

Другие вопросы по теме