Question

I’m filling a sitemap array as the user travels through my app.

However my logic to fill the sitemap is flawed. Here is what I’m doing:

var siteMap = [],
    j = siteMap.length;

$(document).on( "pagebeforechange", function( e, data ) {

    if (j == 0 ){
        // add cause sitemap has no elements
        siteMap.push( { type: "external", data: data });
        } else {
            // loop through the sitemap object
            for ( var i = 0; i < j; i++) {
            // check if element is already stored
            if ( data.toPage == self.options.siteMap[i].data.toPage ){
                break;
                }   
            self.options.siteMap.push( { type: "external", data: data } );
            }           
        }
    }); 

The problem is my break does not work as expected. I wanted to loop through the sitemap and compare the data.toPage (a string like /some/page.html) to what I have already stored. If I find a match the loop should end WITHOUT pushing a new element to the sitemap. However, right now I’m looping and if an element is not found at loop postion(1), the break does not fire and I’m adding an entry on every loop until an entry matches.

Question:
How can I fix the loop, so it only adds an entry if no match exists?

Thanks for help!

EDIT:
This is what I have now:

(function( $, window) {
   $.widget("mobile.multiview",$.mobile.widget, {   
      options: {
         siteMap = {};
         },
      eventBindings: function() {

        $(document).on( "pagebeforechange", function( e, data ) {

            var self = this;
            if (!self.options.siteMap[data.toPage]){
               self.options.siteMap[data.toPage] = { type: "external", data: data };
               }
            });
        }
 }) (jQuery,this);

Answer 1

You’re loop performs the test on each iteration. Until it finds the thing it’s looking for, it adds the new entry on every iteration.

What you need to do instead is see whether the element is in the array already, and then add it if not. Better yet, dump the idea of using an array in the first place and just use the “toPage” value as an object property.

var sitemap = {};

$(document).on( "pagebeforechange", function( e, data ) {
  if (!sitemap[ data.toPage ])
    sitemap[data.toPage] = { type: "external", data: data };
});