Having trouble with looping through subarrays using Javascript and JSON

Question

Having trouble with looping through subarrays using Javascript and JSON

I am attempting to iterate through a JSON object using Javascript (jQuery). Within the main JSON object, each object in the array contains embedded arrays of tags.

My goal is to loop through all the files in the main object and simultaneously iterate through the tags, outputting them along with the files. The objects are first parsed before looping through them.

Here is the structure of the JSON object:

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

This code snippet below was my attempt, however it did not produce the desired result:

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

};

javascript json

Answer 1

Answer №1

The issue you're facing is that within the tags loop, you are utilizing the = operator, which ends up overwriting the variable you are assigning to in each iteration.

To resolve this problem, consider implementing something along these lines;

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

You also had used parsed.result[j].tags[j], when it should have been parsed.result[i].tags[j].

Furthermore, I've moved the appending to $('#files') outside of the loop so that it only executes once, reducing the number of DOM lookups and manipulations (which can be slow in relative terms).

Answer 2

The issue you're facing is that within the tags loop, you are utilizing the = operator, which ends up overwriting the variable you are assigning to in each iteration.

To resolve this problem, consider implementing something along these lines;

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

You also had used parsed.result[j].tags[j], when it should have been parsed.result[i].tags[j].

Furthermore, I've moved the appending to $('#files') outside of the loop so that it only executes once, reducing the number of DOM lookups and manipulations (which can be slow in relative terms).

Answer 3

Answer №2

Given the following:

parsed.result[j].tags[j]

I believe you intended to write:

parsed.result[i].tags[j]

Furthermore, make sure to use tags += instead of tags = to avoid overwriting the previous tag value.

Answer 4

Given the following:

parsed.result[j].tags[j]

I believe you intended to write:

parsed.result[i].tags[j]

Furthermore, make sure to use tags += instead of tags = to avoid overwriting the previous tag value.

Answer 5

Answer №3

We've identified a typo in the 3rd line that needs correcting:

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

(it should be results[i] instead of j)

Answer 6

We've identified a typo in the 3rd line that needs correcting:

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

(it should be results[i] instead of j)

Answer 7

Answer №4

When working with objects and arrays, it is cost-effective to store an additional reference to the array:

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);
};

At this point, repeating the index i in your innermost dereference becomes impossible.

This method also improves performance as the interpreter does not need to repeatedly dereference the entire chain of properties.

For what it's worth, a neater way to write this using jQuery without using the .html() method would be:

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);
};

This approach eliminates string concatenation, quote mark escaping, and ensures correct escaping of any HTML special characters in your tags.

Answer 8

When working with objects and arrays, it is cost-effective to store an additional reference to the array:

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);
};

At this point, repeating the index i in your innermost dereference becomes impossible.

This method also improves performance as the interpreter does not need to repeatedly dereference the entire chain of properties.

For what it's worth, a neater way to write this using jQuery without using the .html() method would be:

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);
};

This approach eliminates string concatenation, quote mark escaping, and ensures correct escaping of any HTML special characters in your tags.

Having trouble with looping through subarrays using Javascript and JSON

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The active tab will dynamically update, however, clicking anywhere on the page will always bring you back to the first tab as

React.js pagination - removing empty values from an array

Are there any methods to implement object-oriented programming in JavaScript?

Optimizing the management of optional post fields in an Express.js application

Error 500 in WordPress Child Theme due to AJAX Internal Issue

Working with NodeJS: Utilizing object casting with default values and eliminating superfluous

Retrieving data from Firestore yields an empty result

Creating a JSFiddle with sprites using source and image files from Github with THREE.JS - a step-by-step guide

Utilizing JavaScript to assign object properties (column names) from an Array of Objects to a specific row and column header

Selenium encountered an error when trying to execute the 'querySelector' function on the document. The selector provided, my_selector, is not recognized as a valid selector

The map displayed on google.com appears different from the one featured on our website

Trouble initiating Jquery on a dynamically generated table

The button's background color will vanish if you click anywhere outside the button or on the body of

Refreshing ng-model within a radio input

Node.js is raising an error because it cannot locate the specified module, even though the path

Send the cookie with the JSON request

Are there any modules in Angular 8 that are used across various projects?

Converting JSON data into a format that can be easily displayed in a

Iterating using a for loop within different functions

How can we know when a JavaScript ES6 arrow function comes to a close?