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

如何基于 jQuery 中的对象数组创建 HTML 组件？

  • 772

假设我有以下对象：

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
          }
        ]
      }
   ]
}

所以我想知道的是如何将这个对象解析成一个表或一个列表，但用jQuery动态创建组件？

类似于使用 AngularJS 进行解析，ng-repeat但在本例中使用 jQuery。

javascript

3 Answers

  1. Best Answer

    您可以使用 jQuery 读取对象并生成 HTML。例如：

    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. 注意：我已将答案修改为通用解决方案，然后才对问题的情况过于具体。如果您想查看上面的代码，可以在响应历史记录（最初的）中找到它。

    在这里，我提出了一个尽可能忠实于 AngularJS 中使用的结构的解决方案（并非总是 100% 可能）。

    想法如下：

    • 使用 HTML5 属性data-*来识别某些元素：

      • 需要使用 处理的结构data-init。该值将是包含数据的变量的名称。
      • 需要使用 重复的子结构data-repeat。该值将是包含要显示的数据的数组的名称。
      • 应使用值替换的字段data-value。该值将是对象内属性的名称。

    • 查找具有属性的元素data-init。

    • 通过克隆用 指定的结构来遍历数据数组data-repeat。
    • 处理完成后，删除用 指定的结构data-repeat以避免数据中的噪声（例如表中的空行）。
    • 将所有元素的内容替换为 中data-value指定的对象内的值data-init。

    因此，您可以创建简单的 HTML 模板，以问题中的案例为例，看起来像这样：

    <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>

    并将其与此（已注释掉的）jQuery 代码结合以呈现该模板：

    // 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");

});

    这是上面代码和问题数据的示例：

    $(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>

    此解决方案的优点：

    • 它是通用的：无论在页面中的何处或使用多少次，代码的工作方式都是相同的。它可以很容易地从一个文档移植到另一个文档。例如：在这个 JSFiddle 中，您可以看到代码如何与多个转发器和不同的数据一起工作。
    • HTML 代码的语法类似于 AngularJS 的语法（它可以变得更加相似，并添加一些处理案例的东西，例如x in items，但它需要更多代码）。

    这种解决方案的缺点：

    • 使用eval()：如果使用不当，可能会产生 XSS 和脚本注入问题（例如：如果正在处理的数据包含恶意代码）。
    • 它更慢：代码在页面加载时进行处理，如果循环中的值将被更新，也可以改进以减少选择和传递。
    • 3

  3. 用户问以下问题：如何将此对象解析为表格或列表，但使用 jQuery 动态创建组件？

    假设用户想从IsAvailable表中每个的值中查看哪些项目是可用的。我们可以做到以下几点：

    1-指明要显示的行程的标题。

    2-遍历每一行seats。

    3-在每一行中为每个人打印一个单元格，并显示它们的可用性IsAvailable。

    这是代码，演示了上面解释的内容：

    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