Actualmente estoy aprendiendo acerca de JavaScript. Quería preguntar sobre la impresión de todos los elementos de la matriz con bucle. ¿Qué tipo de bucle / condición debo usar? ¿Alguien puede darme un fragmento / ejemplo de cómo hacerlo? gracias.

 var newObj =  [
    {
        id : "1",
        name: "one"
    },
    {
        id : "2",
        name: "two"
    },
    {
        id : "3",
        name: "three"
    },
    {
        id : "4",
        name: "four"
    },
    {
        id : "5",
        name: "five"
    },
]

console.log(newObj);
window.onload = function ()
{ 
    var x;
    
    x = newObj[0].name;
    //x = newObj[0].id;
    document.getElementById("id").innerHTML = x;
    
};
<!DOCTYPE html>
<html>
<head>
    <script src="1.js"></script>
</head>
<body>

    <h3 align="center" id="id"></h3>

</body>
</html>
1
Wira Xie 27 oct. 2017 a las 05:11

7 respuestas

La mejor respuesta

JavaScript admite a for...of bucle. En su caso, el bucle podría verse así:

for (obj of newObj)
  results += obj.name + " "

document.getElementById("id").innerHTML = results;
1
Holland Wilson 27 oct. 2017 a las 02:16

En ES2017 (JavaScript moderno):

newObj.forEach((obj) => {
    console.log(obj); // log each object in the array

    Object.entries(obj).forEach(([key, value]) => {
        console.log(`${key}: ${value}`); // log each value in each object
    });
});

Desglose:

1
SamVK 27 oct. 2017 a las 03:42

Creo que el ejemplo presentado en w3schools, aquí, debería ser útil para tú. Se han enlazado para crear encabezados de diferentes tamaños.

Aquí hay un código modificado para ti.

window.onload = function () { 
    var x = '';
    for (let i = 0; i < newObj.length; i++) {
        x = x + "<h2>"+ newObj[i].name + "</h2>";
    }
    document.getElementById("demo").innerHTML = x;
};
1
Palash 27 oct. 2017 a las 02:29

Si está buscando escribir en su documento HTML (como implican algunos de sus comentarios):

 const newObj =  [
    {
        id : "1",
        name: "one"
    },
    {
        id : "2",
        name: "two"
    },
    {
        id : "3",
        name: "three"
    },
    {
        id : "4",
        name: "four"
    },
    {
        id : "5",
        name: "five"
    },
]

const element = document.getElementById("id");

newObj.forEach((obj) => {
    Object.entries(obj).forEach(([key, value]) => {
        element.innerHTML+=(`<p>${key}: ${value}</p>`); // write each key-value pair as a line of text
    });
    element.innerHTML+=('<br>'); // add another line break after each object for better readability 
});
<div id='id'></div>
1
SamVK 27 oct. 2017 a las 03:40

Para recorrer cada objeto en la matriz:

newObj.forEach(function (item) {
    // print the object
    console.log(item);

    // print each object property individually
    for (var key in item) {
        console.log(key, ':', item[key]);
    }
});
1
Brian 27 oct. 2017 a las 02:17

Mi enfoque favorito es este, pero solo porque me he sentido cómodo con él.

var newObj = [ { id : "1", name: "one" }, { id : "2", name: "two" }, { id : "3", name: "three" }, { id : "4", name: "four" }, { id : "5", name: "five" }, ]

for(var i=0; i<newObj.length; i++){
  console.log(newObj[i].id + ': ' + newObj[i].name);
}
1
Jermm Dev 28 oct. 2017 a las 21:55

Map () es una gran función para usar para iterar sobre matrices.

newObj.map((o)=> { 
    document.write('id:'+o.id+' '+'name:'+o.name);
});

Es genial porque puedes encadenarlo directamente de tu matriz de esta manera

 var newObj =  [
    {
        id : "1",
        name: "one"
    },
    {
        id : "2",
        name: "two"
    },
    {
        id : "3",
        name: "three"
    },
    {
        id : "4",
        name: "four"
    },
    {
        id : "5",
        name: "five"
    },
].map((o)=> { 
    document.write('id:'+o.id+' '+'name:'+o.name);
});
1
Daniel Tate 27 oct. 2017 a las 02:54