title: Load JSON data into a Bootstrap modal
body: <p>I want to load a JSON file that creates a list inside a Bootstrap Modal. I have it set where if you click on a person's picture, the modal pops up.</p>
  
  <pre><code>&lt;li class="project span3" data-type="pfa"&gt;
      &lt;a data-toggle="modal" data-target="#myModal" class="thumbnail"&gt;
          &lt;img src="img/anon.jpg" alt="Kenneth Atkins" /&gt;
          &lt;h1&gt;Kenneth Atkins&lt;/h1&gt;
          &lt;p&gt;[Description here]&lt;/p&gt;
      &lt;/a&gt;     
  &lt;/li&gt;
  </code></pre>
  
  <p>Here's an example of the JSON data:</p>
  
  <pre><code>    var florida_exoneration = [
    {
      "last_name":"Atkins",
      "first_name":"Kenneth",
      "age":16,
      "race":"Caucasian",
      "state":"FL",
      "crime":"Sexual Assault",
      "sentence":"10 years",
      "conviction":2004,
      "exonerated":2008,
      "dna":"",
      "mistaken witness identification":"",
      "false confession":"",
      "perjury/false accusation":"Y",
      "false evidence":"",
      "official misconduct":"",
      "inadequate legal defense":"",
      "compensation":""
    }  
  ]
  </code></pre>
  
  <p>I'd like the modal to display something like this inside the box:</p>
  
  <pre><code>Title = "first_name + last_name"
  Age = "age"
  Race = "race"
  State = "state"
  ""
  ""
  </code></pre>
  
  <p>I also want to make sure the data is tied to the picture so the modal doesn't get confused. I'm sorry if this is a bit confusing. I'll try and clarify if anyone has any questions. </p>