get rid of the for-in statement

Question

This is a function that creates breadcrumbs. It initially came from someone else, but I've tweaked it to work for my needs. Now--I'd like to fix the bad syntax of 'for(i in bits)', but when I've tried what I thought would work, it does not work.

for (i = 0; i < bits; i++) {etc...};

I thought that would work, it does not work. Here is the full script...

function breadcrumbs() {
'use strict';
/*jslint plusplus:true*/
/*jslint browser:true*/
var sURL, bits, x, stop, output, i, y, chunkStart;
sURL = String();
bits = {};
x = 0;
stop = 0;
output = "";
sURL = location.href;
sURL = sURL.slice(8, sURL.length);
chunkStart = sURL.indexOf("/");
sURL = sURL.slice(chunkStart + 1, sURL.length);
while (!stop) {
    chunkStart = sURL.indexOf("/");
    if (chunkStart !== -1) {
        bits[x] = sURL.slice(0, chunkStart);
        sURL = sURL.slice(chunkStart + 1, sURL.length);
    } else {
        stop = 1;
    }
    x++;
}
for (i in bits) {
    output += "<a href=\"";
    for (y = 1; y < x - i; y++) {
        output += "../";
    }
    bits[i] = decodeURIComponent(bits[i]);
    output += bits[i] + "/\">" + bits[i] + "</a> &nbsp;|&nbsp; ";
}
document.write(output + document.title);
}

Answer 1

You need to replace object-related code with array-related in following lines:

// original code                 // fixed code
bits = {};                       bits = [];
for (i in bits) {                for (i = 0; i < bits.length; ++i) {

By the way, you can use sURL.split("/") to split URL into array of chunks.

Answer 2

This article Exploring JavaScript for-in loops might be helpful.

You would want to use a loop as in

for (i = 0; i < bits.length; i++) {
  // stuff.
}

Also see this stackover flow JavaScript "For ...in" with Arrays.

Answer 3

Bits is an object ({}, instead of []). For in will iterate over all of its properties. If you want it to be an array bits should be initalized as an array. You'll also need to use the length property in your for loop. for (i = 0;i

Answer 4

Your bits is a JavaScript Object Literal not an Array. You should not (cannot) use a traditional for loop to iterate an object. Thus, the usage of the for...in is correct. However, there is one mistake present -- the loop does not verify that the property of the object is one that should be iterated. That is, your loop is iterating over the prototype properties in addition to the object's own properties. The correct usage of the for...in would be:

for (prop in bits) {
  if (!bits.hasOwnProperty(prop)) {
    continue;
  }
  // Do something with `bits[prop]`.
}

Answer 5

The problem with for-in is that it iterates over an objects properties.

Try the following code. Note: The while loop that created the bits array has been replaced with split & slice, and the breadcrumb URL has been simplified

var sURL = location.href;
// the following line is just for testing...
sURL = "http://testURL.com/one/two/three/four";
var bits = sURL.split('/').slice(3);
var url = "";
var output = ""
for (i = 0; i < bits.length; i++) {
    bit = decodeURIComponent(bits[i]);
    url += "/" + bit;
    output += "<a href=\"" + url + "\">" + bit + "</a> &nbsp;|&nbsp; "
}
document.write(output);

Answer 6

This is an extension/improvement of mike's answer above.

function breadcrumbs() {
    'use strict';
    /*jslint plusplus:true*/
    /*jslint browser:true*/
    var sURL, bits, bit, url, output, i, n, loc;
    sURL = location.href;
    bits = sURL.split('/').slice(3);
    url = {};
    output = "";
    for (i = 0; i < bits.length; i++) {
        if (bits[i] !== "") {
            bit = decodeURIComponent(bits[i]);
            if (bit.indexOf('.htm') >= 0) {
                n = bit.indexOf('.');
                bit = bit.slice(0, n);
            }//end bit.indexOf
            url += "/" + bit;
            output += "<a href=\"" + url + "\">" + bit + "</a> &nbsp;|&nbsp; ";
        }//end bits[i]
    }//end for bits.length
//  document.write(output);
    loc = document.getElementById('bread');
    loc.innerHTML = output;
}

I added in two if-statements. For some reason the .split is pulling in an empty "" string as the last string, so the first if statement only executes the rest of the code if the current array item isn't "". The second if statement trims off anything after the .--e.g. .htm, .html, .html#. Finally, i got rid of document.write(output) and replaced it with .innerHTML. This allowed me to get the script out of the middle of my HTML and move it to execute at the bottom in a document.ready function call.