Estoy teniendo los datos como

var response = '[{"id":1,"name":"Web Demo"},{"id":2,"name":"Audio Countdown"},{"id":3,"name":"The Tab Key"},{"id":4,"name":"Music Sleep Timer"}]';
var obj = JSON.parse(response);

Entonces, ¿cómo puedo agregar dinámicamente los elementos de la lista? En el futuro, si los elementos de la lista en el backend aumentan, deberían agregarse directamente y cómo se pueden vincular elementos dinámicos y estáticos.

Gracias

0
roy 11 may. 2016 a las 09:57

3 respuestas

La mejor respuesta

Use js appendChild para agregar cada elemento en su html de esta manera ...

var response = [{"id":1,"name":"Web Demo"},{"id":2,"name":"Audio Countdown"},{"id":3,"name":"The Tab Key"},{"id":4,"name":"Music Sleep Timer"}] ;

for (i = 0; i < response.length; i++) 
{ 
	var node = document.createElement("LI");  // Create a <li> node
	var textnode = document.createTextNode(response[i].name); // Create a text node
	node.appendChild(textnode); 
	document.getElementById("items").appendChild(node); ///append Item
}	
<div id="items"></div>
0
Manjeet Barnala 11 may. 2016 a las 07:18

Si desea cambiar sus listas de acuerdo con los cambios en el backend, debe probarlo periódicamente a través de ajax. Puede usar setInterval y XMLHttpRequest para estos fines.

Cuando lleguen los nuevos datos, debe borrar su lista existente y agregar nuevos elementos para representar los datos recibidos dinámicamente.

setInterval(function(){

  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {

     populateList(xhttp.responseText);   //This is your function to create the list

    }
  };

  xhttp.open("GET", "http://www.mybackend.com/list", true);
  xhttp.send();

})

Y puede usar la función document.createElement para crear una serie de elementos para representar sus datos.

function populateList(data) {

   var obj = var obj = JSON.parse(response);

   document.getElementById('myUl').remove();    //Delete the existing list

   var myUi = document.createElement('ul');    //Add new list

   obj.forEach(item) {

       var listItem = document.createElement('li');
       myUi.appendChild(li);

       //Then add li details here
   } 

}

Esto es solo un código aproximado. Puedes usar Jquery para hacer esto más corto que esto. Incluso puede usar un marco JS como Angular para automatizar la mayoría de estas tareas.

0
Charlie 11 may. 2016 a las 07:11

Si está almacenando datos dinámicos como datos estáticos, use concat

response.concat(dynamicdata);
0
Suresh 11 may. 2016 a las 07:11