Home / Questions / 1887
Accepted
Goyo
Asked: 2020-12-29 20:08:48 +0800 CST 2020-12-29 20:08:48 +0800 CST

How to create HTML components based on an array of objects in jQuery?

  • 772

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 dynamically create the components with jQuery?

Something like when parsing with AngularJS using ng-repeatbut in this case using jQuery.

javascript

3 Answers

  1. Best 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>

    • 7

  2. Note: I have modified the answer to be a generic solution, before it was too specific for the case of the question. The above code is available in the response history (the initial one) if you want to see it.

    Here I leave a solution trying to be as faithful as possible (not always 100% possible) to the structure used in AngularJS.

    The idea would be the following:

    • Use HTML5 attributes data-*to identify certain elements:

      • The structure that will require processing using data-init. The value will be the name of the variable that contains the data.
      • The sub-structure that will require to be repeated using data-repeat. The value will be the name of the array that contains the data to be displayed.
      • The fields that should be replaced with a value using data-value. The value will be the name of the property within the object.

    • Find the elements with the attribute data-init.

    • Traverse the data array by cloning the structure specified with data-repeat.
    • Once the process is complete, remove the structure specified with data-repeatto avoid noise in the data (eg an empty row in a table).
    • Replace the content of all elements with data-valuethe value within the object specified in data-init.

    So you could create simple HTML templates that would, using the case in the question as an example, look something like this:

    <table data-init="results">
    <tr>
        <th colspan="4">Itinerary <span data-value="itinerary"></span></th>
    </tr>
    <tr>
        <th>Seat A</th>
        <th>Seat B</th>
        <th>Seat C</th>
        <th>Seat D</th>
    </tr>
    <tr data-repeat="seats">
        <td data-repeat="rows" data-value="IsAvailable"></td>
    </tr>
</table>

    And combine it with this (commented out) jQuery code to render that template:

    // para todos los elementos que tengan un data-init
$("[data-init]").each(function() {

    // caso inicial
    var $this = $(this);
    $this.attr("data-source", $this.attr("data-init"));

    // mientras haya elementos con repeat
    while ($this.find("[data-repeat]").length) {

        // seleccionamos el elemento
        var $repeatElement = $this.find("[data-repeat]").first();
        // actualizamo el valor que heredaran los hijos
        $repeatElement.attr("data-source", $repeatElement.closest("[data-source]").length ? $repeatElement.closest("[data-source]").attr("data-source") + "['" + $repeatElement.attr("data-repeat") + "']" : $this.attr("data-init") + "['" + $repeatElement.attr("data-repeat") + "']");

        // procesamos los datos del elemento
        var data = eval($repeatElement.attr("data-source"));

        // para cada elemento a repetir
        for (var x = 0; x < data.length; x++) {
            // creamos un clon
            var $clone = $repeatElement.clone(true);
            // eliminamos el atributeo data-repeat para que no se repita mas
            $clone.removeAttr("data-repeat");
            // actualizamos el valor del atributo data-source
            $clone.attr("data-source", $clone.attr("data-source") + "[" + x + "]");
            // lo insertamos 
            $repeatElement.before($clone);
        }

        // borramos el elemento original que se utilizaba para la plantilla
        $repeatElement.remove();
    }

    // para todos los elementos que se deban sustituir por un valor 
    $this.find("[data-value]").each(function() {
        var $elementoValor = $(this);
        // actualizamos el valor del atributo data-source
        $elementoValor.attr("data-source", ($elementoValor.attr("data-source") ? $elementoValor.attr("data-source") : $elementoValor.closest("[data-source]").attr("data-source")) + "['" + $elementoValor.attr("data-value") + "']");
        // dependiendo del tipo de etiqueta usamos el data-source de una manera u otra
        if ($elementoValor[0].tagName != "IMG") {
            // insertamos el texto del valor dentro del elemento
            $elementoValor.text( eval($elementoValor.attr("data-source") ) );
        } else {
            // si el elemento es una imagen, entonces lo usamos como src
            $elementoValor.attr("src", eval($elementoValor.attr("data-source") ) );
        }
    });

    // borramos todos los atributos data-source
    $("[data-source]").removeAttr("data-source");

});

    Here is an example with the code above and the data from the question:

    $(function() {

  $("[data-init]").each(function() {
    var $this = $(this);
    $this.attr("data-source", $this.attr("data-init"));

    while ($this.find("[data-repeat]").length) {
      var $repeatElement = $this.find("[data-repeat]").first();
      $repeatElement.attr("data-source", $repeatElement.closest("[data-source]").length ? $repeatElement.closest("[data-source]").attr("data-source") + "['" + $repeatElement.attr("data-repeat") + "']" : $this.attr("data-init") + "['" + $repeatElement.attr("data-repeat") + "']");

      var data = eval($repeatElement.attr("data-source"));
      for (var x = 0; x < data.length; x++) {
        var $clone = $repeatElement.clone(true);
        $clone.removeAttr("data-repeat");
        $clone.attr("data-source", $clone.attr("data-source") + "[" + x + "]");
        $repeatElement.before($clone);
      }

      $repeatElement.remove();
    }

    $this.find("[data-value]").each(function() {
      var $elementoValor = $(this);
      $elementoValor.attr("data-source", ($elementoValor.attr("data-source") ? $elementoValor.attr("data-source") : $elementoValor.closest("[data-source]").attr("data-source")) + "['" + $elementoValor.attr("data-value") + "']");
      if ($elementoValor[0].tagName != "IMG") {
        $elementoValor.text( eval($elementoValor.attr("data-source") ) );
      } else {
        $elementoValor.attr("src", eval($elementoValor.attr("data-source") ) );
      }
    });

    $("[data-source]").removeAttr("data-source");
  });
});

//------------

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": false
    }, {
      "seatNUmber": "B",
      "IsAvailable": true
    }, {
      "seatNUmber": "C",
      "IsAvailable": false
    }, {
      "seatNUmber": "D",
      "IsAvailable": true
    }]
  }]
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table data-init="results">
  <tr>
    <th colspan="4">Itinerary <span data-value="itinerary"></span>
    </th>
  </tr>
  <tr>
    <th>Seat A</th>
    <th>Seat B</th>
    <th>Seat C</th>
    <th>Seat D</th>
  </tr>
  <tr data-repeat="seats">
    <td data-repeat="rows" data-value="IsAvailable"></td>
  </tr>
</table>

    Advantages of this solution:

    • It is generic: the code works the same regardless of where or how many times it is used within a page. And it could be easily ported from one document to another. For example: In this JSFiddle you can see how the code works with multiple repeaters and different data.
    • The syntax of the HTML code is similar to that of AngularJS (it could be made even more similar and add something that processes cases like x in items, but it would require more code).

    Disadvantages of this solution:

    • Use eval(): which could create XSS and script injection problems if not used properly (eg: if the data being processed contains malicious code).
    • It's slower: the code is processed when the page loads, and could also be improved to do fewer selects and passes, if the values ​​in the loops will be updated.
    • 3

  3. The user asks the following: how can I parse this object into a table or a list, but dynamically creating the components with jQuery?

    Assuming that the user wants to see which items are available from the value of each IsAvailablein a table. We can do the following:

    1- Indicate the title of the itinerary to be displayed.

    2- Go through each of the rows of seats.

    3- Within each row print a cell for each of them and show their availability from IsAvailable.

    Here is the code, demonstrating what was explained above:

    function displayResults(container, results) {
  var h2 = $('<h2>', {
        'class': 'text-center col-md-12',
        text: "Itinerary: " + results.itinerary
      });
  h2.appendTo(container);
  
  var table = $("<table>", {
    'class' : 'table table-hover table-bordered'
  });
  
  var thead = $("<thead>");
      var tr = $("<tr>");
        var th = $('<th>', {
          text: 'N°',
        });
        th.appendTo(tr);
        $.each(results.seats[0].rows, function(i, row) {
          var th = $('<th>', {
              text: row.seatNUmber,
              'style': "width:10%",
          });
          th.appendTo(tr);
        });
      tr.appendTo(table);
  thead.appendTo(table);
  
  var tbody = $("<tbody>");
    $.each(results.seats, function(i, seat) {
      var tr = $("<tr>");
        var td = $('<td>', {
            text: i+1,
        });
        td.appendTo(tr);
        $.each(seat.rows, function(i, row) {
          if(row.IsAvailable){
            var clase = 'success';
          }else{
            var clase = 'error ';
          }
          var td = $('<td>', {
              'class': clase,
          });
          td.appendTo(tr);
        });
      tr.appendTo(table);
    });
  tbody.appendTo(table);
  
  var tfoot = $("<tfoot>");
      var tr = $("<tr>");
        var th = $('<th>', {
          text: 'N°',
          'style': "width:5%",
        });
        th.appendTo(tr);
        $.each(results.seats[0].rows, function(i, row) {
          var th = $('<th>', {
              text: row.seatNUmber,
          });
          th.appendTo(tr);
        });
      tr.appendTo(table);
  tfoot.appendTo(table);
  
  table.appendTo(container);
}



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


var results2 = {
  itinerary: "02",
  seats: [{
    rows: [{
      "seatNUmber": "A",
      "IsAvailable": false
    }, {
      "seatNUmber": "B",
      "IsAvailable": true
    }, {
      "seatNUmber": "C",
      "IsAvailable": true
    }, {
      "seatNUmber": "D",
      "IsAvailable": false
    }, {
      "seatNUmber": "E",
      "IsAvailable": false
    }, {
      "seatNUmber": "F",
      "IsAvailable": true
    }, {
      "seatNUmber": "G",
      "IsAvailable": true
    }, {
      "seatNUmber": "H",
      "IsAvailable": true
    }, {
      "seatNUmber": "I",
      "IsAvailable": false
    }, {
      "seatNUmber": "J",
      "IsAvailable": true
    }]
  },{
    rows: [{
      "seatNUmber": "A",
      "IsAvailable": true
    }, {
      "seatNUmber": "B",
      "IsAvailable": false
    }, {
      "seatNUmber": "C",
      "IsAvailable": true
    }, {
      "seatNUmber": "D",
      "IsAvailable": false
    }, {
      "seatNUmber": "E",
      "IsAvailable": true
    }, {
      "seatNUmber": "F",
      "IsAvailable": true
    }, {
      "seatNUmber": "G",
      "IsAvailable": true
    }, {
      "seatNUmber": "H",
      "IsAvailable": true
    }, {
      "seatNUmber": "I",
      "IsAvailable": false
    }, {
      "seatNUmber": "J",
      "IsAvailable": true
    }]
  },{
    rows: [{
      "seatNUmber": "A",
      "IsAvailable": false
    }, {
      "seatNUmber": "B",
      "IsAvailable": true
    }, {
      "seatNUmber": "C",
      "IsAvailable": true
    }, {
      "seatNUmber": "D",
      "IsAvailable": true
    }, {
      "seatNUmber": "E",
      "IsAvailable": true
    }, {
      "seatNUmber": "F",
      "IsAvailable": false
    }, {
      "seatNUmber": "G",
      "IsAvailable": true
    }, {
      "seatNUmber": "H",
      "IsAvailable": true
    }, {
      "seatNUmber": "I",
      "IsAvailable": true
    }, {
      "seatNUmber": "J",
      "IsAvailable": true
    }]
  },{
    rows: [{
      "seatNUmber": "A",
      "IsAvailable": true
    }, {
      "seatNUmber": "B",
      "IsAvailable": true
    }, {
      "seatNUmber": "C",
      "IsAvailable": true
    }, {
      "seatNUmber": "D",
      "IsAvailable": false
    }, {
      "seatNUmber": "E",
      "IsAvailable": true
    }, {
      "seatNUmber": "F",
      "IsAvailable": true
    }, {
      "seatNUmber": "G",
      "IsAvailable": true
    }, {
      "seatNUmber": "H",
      "IsAvailable": true
    }, {
      "seatNUmber": "I",
      "IsAvailable": true
    }, {
      "seatNUmber": "J",
      "IsAvailable": true
    }]
  },{
    rows: [{
      "seatNUmber": "A",
      "IsAvailable": true
    }, {
      "seatNUmber": "B",
      "IsAvailable": true
    }, {
      "seatNUmber": "C",
      "IsAvailable": true
    }, {
      "seatNUmber": "D",
      "IsAvailable": false
    }, {
      "seatNUmber": "E",
      "IsAvailable": false
    }, {
      "seatNUmber": "F",
      "IsAvailable": false
    }, {
      "seatNUmber": "G",
      "IsAvailable": false
    }, {
      "seatNUmber": "H",
      "IsAvailable": true
    }, {
      "seatNUmber": "I",
      "IsAvailable": true
    }, {
      "seatNUmber": "J",
      "IsAvailable": true
    }]
  },{
    rows: [{
      "seatNUmber": "A",
      "IsAvailable": true
    }, {
      "seatNUmber": "B",
      "IsAvailable": false
    }, {
      "seatNUmber": "C",
      "IsAvailable": false
    }, {
      "seatNUmber": "D",
      "IsAvailable": false
    }, {
      "seatNUmber": "E",
      "IsAvailable": true
    }, {
      "seatNUmber": "F",
      "IsAvailable": true
    }, {
      "seatNUmber": "G",
      "IsAvailable": true
    }, {
      "seatNUmber": "H",
      "IsAvailable": true
    }, {
      "seatNUmber": "I",
      "IsAvailable": true
    }, {
      "seatNUmber": "J",
      "IsAvailable": true
    }]
  },{
    rows: [{
      "seatNUmber": "A",
      "IsAvailable": false
    }, {
      "seatNUmber": "B",
      "IsAvailable": true
    }, {
      "seatNUmber": "C",
      "IsAvailable": true
    }, {
      "seatNUmber": "D",
      "IsAvailable": true
    }, {
      "seatNUmber": "E",
      "IsAvailable": true
    }, {
      "seatNUmber": "F",
      "IsAvailable": true
    }, {
      "seatNUmber": "G",
      "IsAvailable": true
    }, {
      "seatNUmber": "H",
      "IsAvailable": false
    }, {
      "seatNUmber": "I",
      "IsAvailable": false
    }, {
      "seatNUmber": "J",
      "IsAvailable": false
    }]
  },{
    rows: [{
      "seatNUmber": "A",
      "IsAvailable": false
    }, {
      "seatNUmber": "B",
      "IsAvailable": false
    }, {
      "seatNUmber": "C",
      "IsAvailable": false
    }, {
      "seatNUmber": "D",
      "IsAvailable": true
    }, {
      "seatNUmber": "E",
      "IsAvailable": true
    }, {
      "seatNUmber": "F",
      "IsAvailable": true
    }, {
      "seatNUmber": "G",
      "IsAvailable": true
    }, {
      "seatNUmber": "H",
      "IsAvailable": false
    }, {
      "seatNUmber": "I",
      "IsAvailable": false
    }, {
      "seatNUmber": "J",
      "IsAvailable": false
    }]
  },{
    rows: [{
      "seatNUmber": "A",
      "IsAvailable": false
    }, {
      "seatNUmber": "B",
      "IsAvailable": true
    }, {
      "seatNUmber": "C",
      "IsAvailable": false
    }, {
      "seatNUmber": "D",
      "IsAvailable": true
    }, {
      "seatNUmber": "E",
      "IsAvailable": true
    }, {
      "seatNUmber": "F",
      "IsAvailable": false
    }, {
      "seatNUmber": "G",
      "IsAvailable": true
    }, {
      "seatNUmber": "H",
      "IsAvailable": true
    }, {
      "seatNUmber": "I",
      "IsAvailable": false
    }, {
      "seatNUmber": "J",
      "IsAvailable": true
    }]
  },{
    rows: [{
      "seatNUmber": "A",
      "IsAvailable": false
    }, {
      "seatNUmber": "B",
      "IsAvailable": false
    }, {
      "seatNUmber": "C",
      "IsAvailable": true
    }, {
      "seatNUmber": "D",
      "IsAvailable": true
    }, {
      "seatNUmber": "E",
      "IsAvailable": true
    }, {
      "seatNUmber": "F",
      "IsAvailable": false
    }, {
      "seatNUmber": "G",
      "IsAvailable": false
    }, {
      "seatNUmber": "H",
      "IsAvailable": true
    }, {
      "seatNUmber": "I",
      "IsAvailable": true
    }, {
      "seatNUmber": "J",
      "IsAvailable": true
    }]
  },{
    rows: [{
      "seatNUmber": "A",
      "IsAvailable": false
    }, {
      "seatNUmber": "B",
      "IsAvailable": false
    }, {
      "seatNUmber": "C",
      "IsAvailable": true
    }, {
      "seatNUmber": "D",
      "IsAvailable": false
    }, {
      "seatNUmber": "E",
      "IsAvailable": false
    }, {
      "seatNUmber": "F",
      "IsAvailable": true
    }, {
      "seatNUmber": "G",
      "IsAvailable": true
    }, {
      "seatNUmber": "H",
      "IsAvailable": true
    }, {
      "seatNUmber": "I",
      "IsAvailable": true
    }, {
      "seatNUmber": "J",
      "IsAvailable": false
    }]
  },{
    rows: [{
      "seatNUmber": "A",
      "IsAvailable": false
    }, {
      "seatNUmber": "B",
      "IsAvailable": false
    }, {
      "seatNUmber": "C",
      "IsAvailable": false
    }, {
      "seatNUmber": "D",
      "IsAvailable": true
    }, {
      "seatNUmber": "E",
      "IsAvailable": true
    }, {
      "seatNUmber": "F",
      "IsAvailable": true
    }, {
      "seatNUmber": "G",
      "IsAvailable": true
    }, {
      "seatNUmber": "H",
      "IsAvailable": true
    }, {
      "seatNUmber": "I",
      "IsAvailable": true
    }, {
      "seatNUmber": "J",
      "IsAvailable": true
    }]
  },]
};

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

displayResults($("#results"), results2);
    .table tbody tr > td.success {
  background-color: #dff0d8 !important;
}

.table tbody tr > td.error {
  background-color: #f2dede !important;
}

.table tbody tr > td.warning {
  background-color: #fcf8e3 !important;
}

.table tbody tr > td.info {
  background-color: #d9edf7 !important;
}

.table-hover tbody tr:hover > td.success {
  background-color: #d0e9c6 !important;
}

.table-hover tbody tr:hover > td.error {
  background-color: #ebcccc !important;
}

.table-hover tbody tr:hover > td.warning {
  background-color: #faf2cc !important;
}

.table-hover tbody tr:hover > td.info {
  background-color: #c4e3f3 !important;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="results"></div>

    • 0