Use Array in Bootstrap SelectPicker - Javascript

I'm trying to use values that exist in an array as the values for a Bootstrap SelectPicker. I'm not sure where to get started to loop through the array for the values. I have the SelectPicker with values plugged in manually, like this.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
  </head>

  <select class="selectpicker" data-show-subtext="true" data-live-search="true">
    <option data-subtext="Solar Install - Hartsville">Printing Dimensions</option>
    <option data-subtext="Frankfurt to Karsruhe - Dry">Tubulard</option>
    <option data-subtext="Jasper to Littlefield - Flatbed">General Mills</option>
  </select>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>

</html>

Instead of manually listing all values, because it will be dynamic, I'd like to pull the values from this array. dealName would be the subtext and accountName would be the value.

const dealArray="[
    {
        "dealName": "Solar Install - Hartsville",
        "accountName": "Printing Dimensions"
    },
    {
        "dealName": "Frankfurt to Karsruhe - Dry",
        "accountName": "Tubulard"
    },
    {
        "dealName": "Jasper to Littlefield - Flatbed",
        "accountName": "General Mills"
    }
]"

Any kind of help would be appreciated.

Solution

First things first. You forgot to put in the <body> tag. My example includes it. But using jQuery, here is one way you could dynamically include the data like you're asking.

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
</head>

<body>
  <select class="selectpicker" data-show-subtext="true" data-live-search="true" id="targetSelect"></select>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>

  <script>
    const dealArray = [{
        "dealName": "Solar Install - Hartsville",
        "accountName": "Printing Dimensions"
      },
      {
        "dealName": "Frankfurt to Karsruhe - Dry",
        "accountName": "Tubulard"
      },
      {
        "dealName": "Jasper to Littlefield - Flatbed",
        "accountName": "General Mills"
      }
    ]

    const parentTag = $('#targetSelect');

    dealArray.forEach(deal => {
      $(`<option data-subtext="${deal.dealName}">${deal.accountName}</option>`).appendTo(parentTag);
    })
  </script>
</body>

</html>