Javascript y JSON. El bucle de la submatriz falla

Estoy tratando de realizar un bucle de un objeto JSON usando Javascript (jQuery). Cada objeto en la matriz del objeto JSON principal tiene matrices incrustadas que contienen etiquetas.

Quiero recorrer todos los archivos en el objeto principal y, al mismo tiempo, recorrer las etiquetas y enviarlas junto con los archivos. El objeto se analiza antes del bucle.

Este es el objeto JSON:

{
    "result": [
        {
            "id": "4f26f21f09ab66c103000sd00e",
            "file_url": "http://thefilesat.s3.amazonaws.com/81/0000/12.jpg",
            "tags": [
                "image",
                "elephants"
            ]
        },
        {
            "id": "4f2422c509ab668472000005",
            "file_url": "http://thefilesat.s3.amazonaws.com/9d/0000/7.jpg",
            "tags": [
                "image",
                "green",
                "tree"
            ]
        }
    ]
}

Probó este código pero no funciona:

for (var i=0; i < parsed.result.length; i++) {

for (var j=0; j < parsed.result[i].tags.length; j++) {

    tags = '<div class="tag">' + parsed.result[j].tags[j] + '</div>';

};

html = '<div class="file""><img src="' + parsed.result[i].file_url + '" /><div class="tags">' + tags + '</div></div>';

$("#files").append(html);

};

preguntado el 01 de febrero de 12 a las 14:02

4 Respuestas

Tu problema es que dentro del ciclo de etiquetas, estás usando el = operador; que está sobrescribiendo la variable a la que está asignando en cada iteración.

En su lugar, intente algo como esto;

var html = '';

for (var i = 0; i < parsed.result.length; i++) {
    var tags = '';

    for (var j = 0; j < parsed.result[i].tags.length; j++) {
        tags += '<div class="tag">' + parsed.result[i].tags[j] + '</div>';
    };

    html += '<div class="file""><img src="' + parsed.result[i].file_url + '" /><div class="tags">' + tags + '</div></div>';
};

$("#files").append(html);

Tu tambien tenias parsed.result[j].tags[j] más bien que parsed.result[i].tags[j].

También he sacado el anexo a $('#files') estar fuera del ciclo, por lo que solo sucede una vez, para reducir la cantidad de búsquedas DOM y manipulación DOM (ya que esto es lento (en términos relativos)).

Respondido 01 Feb 12, 18:02

Con:

parsed.result[j].tags[j]

Creo que quisiste decir:

parsed.result[i].tags[j]

También, trabaja para tags = debiera ser tags +=, o simplemente sobrescribirá la etiqueta anterior.

Respondido 01 Feb 12, 18:02

¡Correcto! Ahora genera una de las etiquetas para cada archivo. ¿Cómo puedo mostrar todo? - Jonathan Clark

Tiene un error tipográfico, la tercera línea debe ser:

tags = '<div class="tag">' + parsed.result[i].tags[j] + '</div>';

(utilizar resultado [i] más bien que j)

Respondido 01 Feb 12, 18:02

Cuando maneja objetos y matrices, es muy económico almacenar una referencia adicional a la matriz:

var result = parsed.result; // new

for (var i=0; i < result.length; i++) {

    var tags = result[i].tags;  // new

    for (var j = 0; j < tags.length; j++) {
        tags += '<div class="tag">' + tags[j] + '</div>';
    }

    html = '<div class="file""><img src="' + result[i].file_url + '" /><div class="tags">' + tags + '</div></div>';
    $("#files").append(html);
};

momento en el que el hecho de que hayas incluido inadvertidamente el índice i dos veces en tu desreferencia más íntima se vuelve imposible.

En realidad, esto también funciona mejor, ya que el intérprete no tiene que desreferenciar repetidamente toda la cadena de propiedades una y otra vez.

FWIW, una forma jQuery más limpia de escribir esto sin usar el .html() el método sería:

var result = parsed.result; // new
for (var i=0; i < result.length; i++) {

    var div = $('<div>', {'class': 'file'})
        .append('<img>', {src: result[i].file_url });

    var tags = result[i].tags;  // new
    for (var j = 0; j < tags.length; j++) {
       $('<div>', {'class': 'tag', text: tags[j]}).appendTo(div);
    }

    $("#files").append(div);
};

lo que evita toda la concatenación de cadenas y el escape de comillas, y garantiza que todos los caracteres especiales HTML en sus etiquetas se escapen correctamente, etc.

Respondido 01 Feb 12, 18:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.