CODEWITHSUNDEEP
htmljqueryjsonbootstrap-4bootstrap-modal
iAm.Hassan
iAm.Hassan

Reputation: 53

Show data from JSON file to bootstrap modal in HTML page

I want to display some information from a JSON file in HTML with a bootstrap modal.

I have 12 HTML buttons (12 month) and if the user clicks on every button I want to show data from in the JSON file. My HTML page is:

<!doctype html>
<html lang="en">
  <head>
    <title>show modal</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <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">
    
  </head>
  <body>
    <button type="button" class="btn btn-outline-danger btn-sm btn-block" data-toggle="modal" data-target="#modelId">Show id 1</button>
    <button type="button" class="btn btn-outline-info btn-sm btn-block" data-toggle="modal" data-target="#modelId">Show id 2</button>
    <button type="button" class="btn btn-outline-warning btn-sm btn-block" data-toggle="modal" data-target="#modelId">Show id 3</button>
    <button type="button" class="btn btn-outline-success btn-sm btn-block" data-toggle="modal" data-target="#modelId">Show id 4</button>
    <button type="button" class="btn btn-outline-danger btn-sm btn-block" data-toggle="modal" data-target="#modelId">Show id 5</button>
    <button type="button" class="btn btn-outline-info btn-sm btn-block" data-toggle="modal" data-target="#modelId">Show id 6</button>
    <button type="button" class="btn btn-outline-warning btn-sm btn-block" data-toggle="modal" data-target="#modelId">Show id 7</button>
    <button type="button" class="btn btn-outline-success btn-sm btn-block" data-toggle="modal" data-target="#modelId">Show id 8</button>
    <button type="button" class="btn btn-outline-danger btn-sm btn-block" data-toggle="modal" data-target="#modelId">Show id 9</button>
    <button type="button" class="btn btn-outline-info btn-sm btn-block" data-toggle="modal" data-target="#modelId">Show id 10</button>
    <button type="button" class="btn btn-outline-warning btn-sm btn-block" data-toggle="modal" data-target="#modelId">Show id 11</button>
    <button type="button" class="btn btn-outline-success btn-sm btn-block" data-toggle="modal" data-target="#modelId">Show id 12</button>

    <!-- Modal -->
    <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 NAME 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 MONTH here
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 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>
  </body>
</html>

And my JSON file data is:

My JSON file path is: content/js/monthjson.json

{
  "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": ""
    }
  ]
}

Thank you for your help.

Upvotes: 0

Views: 3234

Answers (1)

poorly-written-code
poorly-written-code

Reputation: 1073

You could add a data-id property to each button, so you know which one is being clicked:

<button class="get-month-data ..." ... data-id="12">Show id 12</button>

Then the event handler code would look something like:

$(`button`).on(`click`, `.get-month-id`, function() {
  let id = this.attributes[`data-id`].value;

  $.getJSON(`content/js/monthjson.json`, function(months) {
    let month = months.filter(function(data) { return data.id === id; });

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

https://www.w3schools.com/tags/att_global_data.asp

https://api.jquery.com/on/

https://api.jquery.com/jquery.getjson/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Upvotes: 1

Related Questions