How do I loop through HTML elements and JSON with jQuery?

Question

I'm trying to loop through all elements with the class name steem_verify, and then append " Verified" after the usernames who are verified according to my API. I finally got it working (kind of), but after verified names it says " Verified Verified Verified", so I'm guessing my loop is messed up somewhere.

Here's my code:

$.getJSON("https://steemverify.com/api/verified.json", function (data) {
    $.each(data, function (i, item) {
        $(".steem_verify").each(function (index) {
            var username = $(this).text();
            $(data).each(function () {
                if (item.username == username) {
                    $(".steem_verify")[index].append(" Verified");
                }
            });
        });
    });
});

$.each(data with $(data).each inside it looks 17 flavours of wrong — Jaromanda X
– Jaromanda X, Commented May 13, 2017 at 6:52
I'm new to looping in jQuery. The first each lets me use json variables like item.verified, the second each loops through all elements with the class "steem_verify", and the 3rd each lets me check if the username exists. — Dalton Edwards
– Dalton Edwards, Commented May 13, 2017 at 6:57
looping in jQuery is just like any other loop ... does that help — Jaromanda X
– Jaromanda X, Commented May 13, 2017 at 6:59

Mohamed-Yousef · Accepted Answer · 2017-05-13 07:11:30Z

simply no need for first loop

$.getJSON("https://steemverify.com/api/verified.json", function (data) {
    //$.each(data, function (i, item) {
        //alert(item.username);
        $(".steem_verify").each(function (index) {
            var username = $(this).text();
            $(data).each(function ( i , item) {
                if (item.username == username) {
                    $(".steem_verify")[index].append(" Verified");
                }
            });
        });
    //});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="steem_verify">dalt</div>
<div class="steem_verify">steemitqa</div>
<div class="steem_verify">steemverify</div>

in another way you need just one loop and use .filter() so your code will looks simple like this

$.getJSON("https://steemverify.com/api/verified.json", function (data) {
   $.each(data, function (i, item) {
       $(".steem_verify").filter(function(){return item.username == $(this).text() }).append(" Verified");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="steem_verify">dalt</div>
<div class="steem_verify">steemitqa</div>
<div class="steem_verify">steemverify</div>

Cœur · Accepted Answer · 2017-08-01 15:28:22Z

1

Solution by OP.

This code works:

$.getJSON("https://steemverify.com/api/verified.json", function (data) {
    $.each(data, function (i, item) {
        $(".steem_verify").each(function (index) {
            var username = $(this).text();
            if (item.username === username) {
                $(".steem_verify")[index].append(" Verified");
            }
        });
    });
});

answered Aug 1, 2017 at 15:28

community wiki

Cœur

Collectives™ on Stack Overflow

How do I loop through HTML elements and JSON with jQuery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related