英文:
Data from json to modal window html
问题
以下是您要翻译的内容：
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-JjSmVgyd0p3pXB1rRibZU<details><summary>英文:</summary>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.<!-- begin snippet: js hide: false console: true babel: false --><!-- language: lang-js -->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": ""}]}<!-- language: lang-html --><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><!-- end snippet --></details># 答案1**得分**: 0以下是您要翻译的内容："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."请注意，代码部分没有被翻译，只翻译了文本内容。<details><summary>英文:</summary>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.<!-- begin snippet: js hide: false console: true babel: false --><!-- language: lang-js -->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": ""}]};<!-- language: lang-html --><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><!-- end snippet --></details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论