I need to display information from json in HTML modal window. I have 12 buttons and when user clicks on it I want to show data of this month from json file.
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">×</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>First, you seem to be using backticks instead of apostrophes in your jQuery selectors and elsewhere. That's not standard, and while it may work I recommend against it if only for reasons of convention. I've made the conversion here.
Then, rather than adding a click handler we'll just use Bootstrap's modal show event, getting the ID from the relatedTarget on the event.
Finally, we'll use the find() method to get the corresponding data object from the array.
Bonus tip: Get your data just once on page load instead of every time a button is clicked. That is, if you don't expect the data to change frequently.
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">×</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>