Javascript: for loop not working as expected

Question

Im currently trying to set up a loop that returns exif data from an image using piexifjs.

Up to this point the code provided by the developer of piexif is working correct in my Vue.js environment.

The loop which is used to display the exif-data inside the console looks like this:

for (let ifd in exifObj) {
    if (ifd == "thumbnail") {
        continue;
    }
    console.log("-" + ifd);
    for (let tag in exifObj[ifd]) {
        console.log("  " + piexif.TAGS[ifd][tag]["name"] + ":" + exifObj[ifd][tag]);
    }
}

Works fine, but if I try to edit it to return HTML and display the exif information on my Site it just returns one line of information. Here's the code:

for (let ifd in exifObj) {
    if (ifd === "thumbnail") {
        continue;
    }
    const   exifInfo = $(".modal-exif"),
            exifInfoDetail = $(".modal-exif-detail");
    exifInfo.html("&raquo; " + ifd);
    for (let tag in exifObj[ifd]) {
        exifInfoDetail.html("<li>" + piexif.TAGS[ifd][tag]["name"] + ":" + exifObj[ifd][tag] + "</li>");
    }
}

I guess my loop is overwriting itself where it returns just one value, which, I guess, is fine inside the console since but not inside HTML?

Anyone got any Idea hwo to change the loop to return one line for each entry?

Thank you :)

It isn't the for loop that isn't working. You just misunderstood how jQuery.fn.html() works. Read the relevant documentation article for more information. — Madara's Ghost
– Madara's Ghost, Commented Feb 9, 2019 at 15:56
.html() overrides. So instead you should append to a string and do a final call to .html() when you have everything in the string. — Jeppe
– Jeppe, Commented Feb 9, 2019 at 15:56

mistahenry · Accepted Answer · 2019-02-09 15:58:19Z

3

In the console.log case, each iteration is writing to the console, whereas in the $(selector).html() case, you are overwriting the html content per iteration. The jquery html function states:

Set the HTML contents of each element in the set of matched elements.

That means that each iteration, the html content of $(".modal-exif-detail") is set to one single "<li>" + piexif.TAGS[ifd][tag]["name"] + ":" + exifObj[ifd][tag] + "</li>".

You need to use something like append if you want to continually add to a node, or build up the html string and only execute one html after the loop

answered Feb 9, 2019 at 15:58

mistahenry

8,7343 gold badges29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript: for loop not working as expected

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related