David H David H - 4 months ago 7
HTML Question

Script help for interacting between HTML and JSON

Looking for some guidance on script that will pass the JSON file information to the HTML. The HTML is going to be a single page but using jQuery Mobile to create the multiple page effect. On the first page I'm looking to just display the names of each person and then when you click on the person for the information for that person to be displayed on the second page. I'm new to JSON just can't seem to wrap my head around to manage this script.

HTML File:

<!--first page -->
<div data-role="page" id="info-page">
<div data-role="header" data-theme="b">
<h1>Contacts</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true" id="prof-list">
<li data-role="list-divider" data-theme="b" role="heading">Names</li>
<!-- List of all names from the JSON file listed here -->
</ul>
</div>
</div>
<!--second page -->
<div data-role="page" id="details-page">
<div data-role="header" data-theme="b"><a href="#" data-rel="back" data-role="button">Go back</a>
<h1>Information</h1>
</div>
<div data-role="list-view">
<!-- Information for person who was clicked on show here -->
</div>
</div>


JSON File:
(There is more people on the actual file)

{
"id": 0,
"age": 31,
"name": "Alex Jones",
"email": "alexjones@gmail.com",
"phone": "+1 (845) 575-2978"
}, {
"id": 1,
"age": 31,
"name": "Alice Hollow",
"email": "alicehollow@gmail.com",
"phone": "+1 (829) 454-3806"
},

Answer

This is assuming that you already have the JSON as an array of objects, because I couldn't tell from your partial JSON what format it's in. Here it is in PLUNKER

SNIPPET

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>jQuery Mobile Web App</title>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
</head>

<body>

  <div data-role="page" id="page">
    <div data-role="header">
      <h1>Page One</h1>
    </div>
    <div data-role="content">
      <ul data-role="listview">
        <li><a href="#page2">Page Two</a>
        </li>
        <li><a href="#page3">Page Three</a>
        </li>
        <li><a href="#page4">Page Four</a>
        </li>
      </ul>
      <ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true" id="prof-list">
        <li data-role="list-divider" data-theme="b" role="heading">Names</li>
        <!-- List of all names from the JSON file listed here -->
      </ul>
    </div>
  </div>
  <div data-role="footer">
    <h4>Page Footer</h4>
  </div>


  <div data-role="page" id="page2">
    <div data-role="header" data-theme="b"><a href="#" data-rel="back" data-role="button">Go back</a>
      <h1>Information</h1>
    </div>
    <div data-role="content">
      <table>
        <tr>
          <th>Name</th>
          <td id="dataName">&nbsp;</td>
        </tr>
        <tr>
          <th>Age</th>
          <td id="dataAge">&nbsp;</td>
        </tr>
        <tr>
          <th>Email</th>
          <td id="dataEmail">&nbsp;</td>
        </tr>
        <tr>
          <th>Phone</th>
          <td id="dataPhone">&nbsp;</td>
        </tr>
      </table>
    </div>
    <div data-role="footer">
      <h4>Page Footer</h4>
    </div>
  </div>

  <div data-role="page" id="page3">
    <div data-role="header">
      <h1>Page Three</h1>
    </div>
    <div data-role="content">
      Content
    </div>
    <div data-role="footer">
      <h4>Page Footer</h4>
    </div>
  </div>

  <div data-role="page" id="page4">
    <div data-role="header">
      <h1>Page Four</h1>
    </div>
    <div data-role="content">
      Content
    </div>
    <div data-role="footer">
      <h4>Page Footer</h4>
    </div>
  </div>
  <script>
    var contacts = [{
      "id": 0,
      "age": 31,
      "name": "Alex Jones",
      "email": "alexjones@gmail.com",
      "phone": "+1 (845) 575-2978"
    }, {
      "id": 1,
      "age": 31,
      "name": "Alice Hollow",
      "email": "alicehollow@gmail.com",
      "phone": "+1 (829) 454-3806"
    }, {
      "id": 2,
      "age": 99999,
      "name": "Lazerus",
      "email": "What is this EE-mall you speak of?",
      "phone": "Fown? I know not of this person."
    }];

    var listName = document.getElementById("prof-list");


    function displayNames(arr) {
      var out = "";
      var i;
      for (i = 0; i < arr.length; i++) {
        out += '<li><a href="' + arr[i].name + '" id="' + arr[i].id + '">' + arr[i].name + '</a></li>';
      }
      listName.innerHTML = out;
      listName.addEventListener('click', function(e) {
        e.preventDefault();
        if (e.target !== e.currentTarget) {
          var ID = parseInt(e.target.id, 10);
          document.getElementById('dataName').innerHTML = arr[ID].name;
          document.getElementById('dataAge').innerHTML = arr[ID].age;
          document.getElementById('dataEmail').innerHTML = arr[ID].email;
          document.getElementById('dataPhone').innerHTML = arr[ID].phone;
        }
      }, false);

    }

    displayNames(contacts);
  </script>
</body>

</html>