CODEWITHSUNDEEP
javascriptjqueryarrays
Kiran
Kiran

Reputation: 43

why my for loop is infinite here

below is the js code for wikipedia search project. I am getting infinite for loop even though it had condition to stop repeating the loop. I am stuck in this problem.

$(document).ready(function() {
    $('.enter').click(function() {
        var srcv = $('#search').val(); //variable get the input value
        //statement to check empty input
        if (srcv == "") {
            alert("enter something to search");
        }
        else {
            $.getJSON('https://en.wikipedia.org/w/api.php?action=opensearch&search=' + srcv + '&format=json&limit=20&callback=?', function(json) {

                $('.content').html("<p> <a href ='" + json[3][0] + "'target='_blank'>" + json[1][0] + "</a><br>" + json[2][0] + "</p>");

                /*for loop to display the content of the json object*/

                for (i = 1; i < 20; i++) {
                    $('p').append("<p><a href ='" + json[3][i] + "'target='_blank'>" + json[1][i] + "</a>" + json[2][i] + "</p>");

                }
            });
        }
    });
});

Upvotes: 0

Views: 99

Answers (3)

madalinivascu
madalinivascu

Reputation: 32354

from what i can see in the url you need to do the following:

loop over the terms found and select the link based on the index of the element, chose a single element .contentto append the data not a set of elements p, this will increase the number of duplicated results 

  $.getJSON('https://en.wikipedia.org/w/api.php?action=opensearch&search='+srcv+'&format=json&limit=20&callback=?', function(json){
        $.each(json[1],function(i,v){
              $('.content').append("<p><a href ='"+json[2][i]+"'target='_blank'>"+json[0]+"</a>"+v+"</p>");

        });
 });

see demo: https://jsfiddle.net/x79zzp5a/

Upvotes: 0

JuniorDev
JuniorDev

Reputation: 1200

You are appending to each and every one of <p> in page.

Since your for loop appends even more <p> (and you possibly have a high number of <p> elements in your page beforehand) you overflow your call stack.

You probably wanted to append to a specific <p>. Try giving an id to your selector.

Upvotes: 3

Kim Schneider
Kim Schneider

Reputation: 162

Try this

$(document).ready(function() {
$('.enter').click(function() {
    var srcv = $('#search').val(); //variable get the input value
    //statement to check empty input
    if (srcv == "") {
        alert("enter something to search");
    }
    else {
        $.getJSON('https://en.wikipedia.org/w/api.php?action=opensearch&search=' + srcv + '&format=json&limit=20&callback=?', function(json) {

            $('.content').html("<p> <a href ='" + json[3][0] + "'target='_blank'>" + json[1][0] + "</a><br>" + json[2][0] + "</p>");

            /*for loop to display the content of the json object*/
            var i = 1;
            for (i; i < 20; i++) {
                $('p').append("<p><a href ='" + json[3][i] + "'target='_blank'>" + json[1][i] + "</a>" + json[2][i] + "</p>");

            }
        });
    }
});
});

Upvotes: -2

Related Questions