javascript – How to create HTML components based on an object array in jQuery?

Question:

Assuming I have the following object:

var results = {
   itinerary:"01",
   seats:[
      {
        rows:[
          {
            "seatNUmber": "A",
            "IsAvailable": true
          },
          {
            "seatNUmber": "B",
            "IsAvailable": true
          },
          {
            "seatNUmber": "C",
            "IsAvailable": false
          },
          {
            "seatNUmber": "D",
            "IsAvailable": true
          }
        ]
      },
      {
        rows:[
          {
            "seatNUmber": "A",
            "IsAvailable": true
          },
          {
            "seatNUmber": "B",
            "IsAvailable": true
          },
          {
            "seatNUmber": "C",
            "IsAvailable": false
          },
          {
            "seatNUmber": "D",
            "IsAvailable": true
          }
        ]
      }
   ]
}

So what I want to know is how can I parse this object into a table or a list, but creating the components dynamically with jQuery?

Sort of like when parsing with AngularJS using ng-repeat but in this case using jQuery.

Answer:

You can read the object and generate HTML with jQuery. For example:

function displayResults(container, results) {
  $("<span>").text("Itinerary: " + results.itinerary).appendTo(container);
  var table = $("<table>");
  $.each(results.seats, function(i, seat) {
    var tr = $("<tr>");
    $.each(seat.rows, function(i, row) {
      $("<td>").text(row.seatNUmber + " " + row.IsAvailable).appendTo(tr);
    });
    tr.appendTo(table);
  });
  table.appendTo(container);
}



var results = {
  itinerary: "01",
  seats: [{
    rows: [{
      "seatNUmber": "A",
      "IsAvailable": true
    }, {
      "seatNUmber": "B",
      "IsAvailable": true
    }, {
      "seatNUmber": "C",
      "IsAvailable": false
    }, {
      "seatNUmber": "D",
      "IsAvailable": true
    }]
  }, {
    rows: [{
      "seatNUmber": "A",
      "IsAvailable": true
    }, {
      "seatNUmber": "B",
      "IsAvailable": true
    }, {
      "seatNUmber": "C",
      "IsAvailable": false
    }, {
      "seatNUmber": "D",
      "IsAvailable": true
    }]
  }]
}

displayResults($("#results"), results);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results"></div>