1

Estoy con javascript necesitando imprimir en un (li) de un archivo html el contenido anidado de un array,, pero cuando lo quiero imprimir en la web me aparece este error: [object Object], entiendo que hace esto porque no definí cuales son los valores que quiero imprimir. imagino que debo hacer algun (var i=0; i

array= [
    {
        "marca": "Motorola",
        "modelo": "G 4 PLAY",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5,
        "pantalla_resolucion": "1280x720",
        "camara_resolucion": "8 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB"
    },
    {
        "marca": "Motorola",
        "modelo": "G 4 PLAY",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5,
        "pantalla_resolucion": "1280x720",
        "camara_resolucion": "8 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB"
    },]

/*Esta funcion está ligada a un onClick del html*/

function agregarElementos(){ 

var lista=document.getElementById("ulListado");  /*Reconoce el elemento html utilizado*/

                            var linew= document.createElement("li");        /*Crea otro elemento dentro del elemento contenedor*/

                            var contenido = document.createTextNode(array[0]);  /*Imprime algo dentro del elemento 'li' "*/

                            lista.appendChild(linew);

                            linew.appendChild(contenido);}
2
  • Esas soluciones antiguas basadas en appendChild deberian eliminarlas, con JQuery append() y empty() todo es mucho más facil y rápido
    – DrakonWeb
    Commented el 22 mar. 2019 a las 15:02
  • @DrakonWeb appendChild es el estándar JavaScript, mientras que append de jQuery es parte de una biblioteca que usa appendChild en su implementación. Puede ser más fácil (jQuery no deja de ser una biblioteca para simplificar el uso de JavaScript), pero no es más rápido porque se están realizando más operaciones.
    – Alvaro Montoro
    Commented el 22 mar. 2019 a las 17:24

4 respuestas 4

4

Necesitas crear una función de loop para acceder a los valores del array, dentro si necesitas navegar entre las propiedades de cada objeto.

Similar a este código.

var myArray = [
    {
        "marca": "Motorola",
        "modelo": "G 4 PLAY",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5,
        "pantalla_resolucion": "1280x720",
        "camara_resolucion": "8 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB"
    },
    {
        "marca": "Motorola",
        "modelo": "G 4 PLAY",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5,
        "pantalla_resolucion": "1280x720",
        "camara_resolucion": "8 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB"
    }]
var foo = myArray.map(function(bar){
  return '<li>'+bar.marca+' '+bar.modelo+'</li>'
})
document.getElementById("foo").innerHTML = foo;
<div id='foo'></div>

2
  • Funciona a la perfección esta forma pero tengo una consulta. Yo estoy queriendo hace algo parecido al amigo de acá y cuando despliego me aparece una coma entre cada cadena de caracteres, alguien sabe por que? y como la quito?. Desde ya muchas gracias Commented el 26 ene. 2023 a las 18:31
  • En mi caso yo cada vez que hago click en una imagen (que representa a un producto) se despliegan en un costado su nombre y el precio. Ahora, si hago click en otra imagen (otro producto), también se despliega pero entre ambos productos me aparece la coma a la que me refería en el comentario anterior. Commented el 26 ene. 2023 a las 18:40
2

Para evitar que salga la coma, se puede imprimir con un for:

function agregarElementos(){

  var text = "";
  let array=[
   {
    marca: "Moitorola",
    modelo: "G 84 PLAY",
   },
   {
    marca: "Samgun",
    modelo: "G 84 PLAY",
   },
   {
    marca: "Huawei",
    modelo: "G 84 PLAY",
   }];     

        for (var i = 0; i < array.length; i++) {
            text += '<li>'+array[i].marca + " " +array[i].modelo+'</li>';
        }
        
     document.getElementById("ulListado").innerHTML = text;   
}

agregarElementos();
<ul id="ulListado"></ul>

1

Puedes imprimir un objeto o array en texto, usando el método JSON.stringify()

var obj = {
        "marca": "Motorola",
        "modelo": "G 4 PLAY",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5,
        "pantalla_resolucion": "1280x720",
        "camara_resolucion": "8 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB"
    }
    
document.querySelector("div").innerHTML = JSON.stringify(obj)
<div></div>

1

simplemente te falta iterar con array.forEach

array= [
    {
        "marca": "Moitorola",
        "modelo": "G 84 PLAY",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5,
        "pantalla_resolucion": "1280x720",
        "camara_resolucion": "8 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB"
    },
    {
        "marca": "Motorola",
        "modelo": "G 4 PLAY",
        "sistema_operativo": "Android",
        "pantalla_pulgadas": 5,
        "pantalla_resolucion": "1280x720",
        "camara_resolucion": "8 Mpx",
        "camara_frontal": true,
        "camara_frontal_res": "5 Mpx",
        "memoria_interna": "16 GB"
    },]

function agregarElementos(){ 
var lista=document.getElementById("ulListado"); 
array.forEach(function(data,index){
var linew= document.createElement("li");    
var contenido = document.createTextNode(data.marca+' '+data.modelo+" "+data.sistema_operativo+" "+data.pantalla_pulgadas+" "+data.pantalla_resolucion+" "+data.camara_resolucion);
lista.appendChild(linew);
linew.appendChild(contenido);

})
}
agregarElementos();
<div id="ulListado"></div>

1
  • Realmente han funcionado todos los códigos que me pasaron, y este también funciona excelente, sin embargo si quiero sólo mostar un elemento sólo dentroi del array cómo hago? intenté cambiar a: array[1].forEach(function(data,index) para elegir el segundo elemento del array y no me funciona.
    – berlot83
    Commented el 18 feb. 2017 a las 12:24

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.