jeudi 23 juin 2016

Render JSON to table, if id matches


I've got a table with 5 rows and two columns. Each row, has an ID column, ranging from 1-5.

I want to add JSON data to that said table, IF, that data has a matching ID to that row. If NO data matches that rows ID, add "No Matching Record" to that rows second column.

Rendered Table

HTML Table

<table class="table table-striped">
    <thead>
      <tr>
        <th>ID</th>
        <th>Lastname</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td></td>
      </tr>
      <tr>
        <td>2</td>
        <td></td>
      </tr>
      <tr>
        <td>3</td>
        <td></td>
      </tr>
      <tr>
        <td>4</td>
        <td></td>
      </tr>
      <tr>
        <td>5</td>
        <td></td>
      </tr>
    </tbody>
</table>

Json Data

{"data":[
    {"id":"1", "lastName":"Doe"},
    {"id":"3", "lastName":"Jones"}
]}

Expected Result

<table class="table table-striped">
    <thead>
      <tr>
        <th>ID</th>
        <th>Lastname</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Doe</td>
      </tr>
      <tr>
        <td>2</td>
        <td>No Matching Record</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Jones</td>
      </tr>
      <tr>
        <td>4</td>
        <td>No Matching Record</td>
      </tr>
      <tr>
        <td>5</td>
        <td>No Matching Record</td>
      </tr>
    </tbody>
</table>

Aucun commentaire:

Enregistrer un commentaire