8

Suponiendo que tengo el siguiente objeto:

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

Entonces lo que quiero saber es ¿cómo puedo parsear este objeto en una tabla o en una lista, pero creando los componentes dinámicamente con jQuery?

Algo así como cuando se parsea con AngularJS usando ng-repeat pero en este caso usando jQuery.

7
  • @AlvaroMontoro no debes corregir errores en la pregunta. Commented el 29 dic. 2015 a las 9:55
  • @rnrneverdies Supongo que te refieres a los errores en el código y comprendo por qué lo dices, pero no estoy de acuerdo en este caso en particular. El error no afecta a la pregunta en sí, es más bien tipográfico, y sin corregirlo el código falla (porque habrá un error de JavaScript al inicializar la variable result). De hecho, la respuesta de Peter Olson se basa en un cambio similar a la corrección que yo hice, antes incluso de yo hacer la corrección.
    – Alvaro Montoro
    Commented el 29 dic. 2015 a las 10:32
  • 1
    @AlvaroMontoro si encuentras un error tipográfico en el código, debes dejar un comentario. principalmente si el código falla ya que es parte del problema que el OP trata de resolver. Si editas el problema de la pregunta quitas la oportunidad de que el OP aprenda algo, aunque esto sea redactar bien la pregunta. Commented el 29 dic. 2015 a las 12:34
  • @PaulVargas, ¿Cual es el motivo por el cual darle una recompensa a esta pregunta que ya tiene su aprobación? ¿Quieres esperar otra respuesta? No entiendo el propósito.
    – bypabloc_
    Commented el 4 may. 2017 a las 20:35
  • 1
    @PabloContreras Tu entendimiento no requerido. Commented el 4 may. 2017 a las 20:45

3 respuestas 3

7
+50

Se puede leer el objeto y generar HTML con jQuery. Así, por ejemplo:

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>

3
+500

Nota: he modificado la respuesta para que sea una solución genérica, antes era demasiado específica para el caso de la pregunta. El código anterior está disponible en el historial de la respuesta (la inicial) por si quieres verlo.

Aquí dejo una solución intentando ser lo más fiel posible (no siempre se puede al 100%) a la estructura que se utiliza en AngularJS.

La idea sería la siguiente:

  • Usar los atributos data-* de HTML5 para identificar ciertos elementos:

    • La estructura que requerirá procesamiento usando data-init. El valor será el nombre de la variable que contiene los datos.
    • La sub-estructura que requerirá repetirse usando data-repeat. El valor será el nombre del array que contiene los datos que se mostrarán.
    • Los campos que deberán ser sustituidos con un valor usando data-value. El valor será el nombre de la propiedad dentro del objeto.
  • Encontrar los elementos con el atributo data-init.

  • Atravesar el array de datos clonando la estructura especificada con data-repeat.
  • Una vez completado el proceso, eliminar la estructura especificada con data-repeat para evitar ruido en los datos (ej: una fila vacía en una tabla).
  • Sustituir el contenido de todos los elementos con data-value por el valor dentro del objeto especificado en data-init.

Así podrías crear plantillas simples de HTML que quedarían, usando como ejemplo el caso de la pregunta, en algo como esto:

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

Y combinarlo con este código (comentado) de jQuery para procesar esa plantilla:

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

});

Aquí dejo un ejemplo con el código de arriba y los datos de la pregunta:

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


Ventajas de esta solución:

  • Es genérica: el código funciona igual independientemente de dónde o cuántas veces se utilice dentro de una página. Y se podría portar fácilmente de un documento o otro. Por ejemplo: en este JSFiddle se puede ver cómo el código funciona con múltiples repetidores y diferentes datos.
  • La sintaxis del código HTML es parecida a la de AngularJS (se podría hacer aún más parecida y añadir algo que procese casos como x in items, pero requeriría más código).

Desventajas de esta solución:

  • Utiliza eval(): que podría crear problemas de XSS e inyección de script si no se usa bien (p.e.: si los datos que se procesan contienen código malicioso).
  • Es más lenta: el código se procesa cuando la página se carga, y también podría mejorarse para hacer menos selecciones y pasadas, si se actualizarán los valores en los bucles.
0

El usuario pide lo siguiente: ¿cómo puedo parsear este objeto en una tabla o en una lista, pero creando los componentes dinámicamente con jQuery?

Asumiendo que el usuario quiere observar cuales items están disponibles a partir del valor de cada IsAvailable en una tabla. Podemos hacer lo siguiente:

1- Indicar el titulo del itinerario que se mostrara.

2- Recorrer cada de las filas de seats.

3- Dentro cada fila imprimir una celda por cada una de ellas y mostrar su disponibilidad a partir de IsAvailable.

A continuación el código, demostrando lo anteriormente explicado:

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>

1
  • @PaulVargas Asumo que es el resultado que esperas obtener.
    – bypabloc_
    Commented el 5 may. 2017 a las 6:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.