Break javascript loop

Question

I have following code to use google images search API:

google.load('search', '1');   
    function searchComplete(searcher) {
      // Check that we got results
      if (searcher.results && searcher.results.length > 0) {
        // Grab our content div, clear it.
        var contentDiv = document.getElementById('contentimg');
        contentDiv.innerHTML = '';

        // Loop through our results, printing them to the page.
        var results = searcher.results;
        for (var i = 1; i < results.length; i++) {
          // For each result write it's title and image to the screen
          var result = results[i];
          var imgContainer = document.createElement('div');



          var newImg = document.createElement('img');
          // There is also a result.url property which has the escaped version
          newImg.src = result.tbUrl;


          imgContainer.appendChild(newImg);

          // Put our title + image in the content
          contentDiv.appendChild(imgContainer);

The problem is, it gives me 3 image results. How to break a loop and show only the 1st one instead of 3 images? if I change for (var i = 1; i < results.length; i++) to for (var i = 3; i < results.length; i++) it shows only one image, but image shown is the 3rd one and I need to show 1st one :) Please advice

If you're certain that you only need the first image, then why not drop the loop? — Jesper
– Jesper, Commented Aug 30, 2012 at 13:34

Nick Brunt · Accepted Answer · 2012-08-30 13:41:44Z

5

Don't use a for loop at all. Just replace all instances of i with 0.

google.load('search', '1');   
    function searchComplete(searcher) {
      // Check that we got results
      if (searcher.results && searcher.results.length > 0) {
        // Grab our content div, clear it.
        var contentDiv = document.getElementById('contentimg');
        contentDiv.innerHTML = '';

        var result = searcher.results[0];

        var imgContainer = document.createElement('div');

        var newImg = document.createElement('img');
        // There is also a result.url property which has the escaped version
        newImg.src = result.tbUrl;

        imgContainer.appendChild(newImg);

        // Put our title + image in the content
        contentDiv.appendChild(imgContainer);

0 means the first item returned (almost all number sequences in programming start at 0!) so all other results will be ignored.

edited Aug 30, 2012 at 13:41

answered Aug 30, 2012 at 13:33

Nick Brunt

10.2k11 gold badges59 silver badges87 bronze badges

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

4 Comments

Nick Brunt Over a year ago

Answer adjusted to clarify this :)

DadaB Over a year ago

Seems like good idea, but after adding your code It shows no image at all.. :(

Nick Brunt Over a year ago

I will adjust my answer to give the full code listing, you might be leaving in lines you don't need.

DadaB Over a year ago

fantastic, thanks a lot. I didnt noticed it was } (to end the loop) at the end of my code. I've deleted it and all works. Thanks once again

Philipp · Accepted Answer · 2012-08-30 13:37:25Z

0

When you only want one element, you don't need a for loop. You can access the first element of an array with

result = results[0];

Arrays are zero-based. So when it contains three images, the images are named results[0], results[1] and results[2].

answered Aug 30, 2012 at 13:37

Philipp

70.1k10 gold badges121 silver badges159 bronze badges

Comments

heretolearn · Accepted Answer · 2012-08-30 13:40:55Z

0

use break statement. It will terminate the loop once the image is found and hence you will have only the first one.

      for (var i = 1; i < results.length; i++) {
      // For each result write it's title and image to the screen
      var result = results[i];
      var imgContainer = document.createElement('div');



      var newImg = document.createElement('img');
      // There is also a result.url property which has the escaped version
      newImg.src = result.tbUrl;


      imgContainer.appendChild(newImg);

      // Put our title + image in the content
      contentDiv.appendChild(imgContainer);
       //Berore the end of the loop
      if(i==1)
      {
      break;
      }
   }

edited Aug 30, 2012 at 13:40

answered Aug 30, 2012 at 13:35

heretolearn

6,5654 gold badges32 silver badges55 bronze badges

3 Comments

pimvdb Over a year ago

This could work but is a bit weird. If you don't need to loop then why loop?

heretolearn Over a year ago

@pimvdb: true, its just to help even if more than one images are needed as it will work in all the situations by just modifying the no of images needed.

pimvdb Over a year ago

One could also change i < results.length to i < 4 to show 3 images. break is a bit odd here, to be honest.

Collectives™ on Stack Overflow

Break javascript loop

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related