• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 243
  • Last Modified:

Javascript order by and group by

Hello,

I have the following script and I want to order by m.tier descending

Really need some help on this asap so I appreciate any help.

generateSidebarHtml: function(m) {
            return '<div style="clear:both"><b>' + m.title + ' ' + m.tier + '</b> (' + parseFloat(m.distance).toFixed(1) + ' ' + m.units + ')</div>';
        },

Open in new window

0
movieprodw
Asked:
movieprodw
  • 6
  • 4
1 Solution
 
GaryCommented:
What is m.tier???
If its an array you can use .sort and then .reverse()

myArray.sort();
myArray.reverse();
0
 
movieprodwAuthor Commented:
It is an array, I am a total noob at javascript, sorry.

Can you please give me any example to test
0
 
GaryCommented:
Try this

generateSidebarHtml: function(m) {
            m.tier.sort(); 
            m.tier.reverse(); 
            return '<div style="clear:both"><b>' + m.title + ' ' + m.tier + '</b> (' + parseFloat(m.distance).toFixed(1) + ' ' + m.units + ')</div>';
        }, 

Open in new window

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
movieprodwAuthor Commented:
Here is the whole file, it is on line 222, I really appreciate any help.


<style>
.breadcrumbs {
 display:none;
}
</style>
<?php
/**
 * Unirgy_StoreLocator extension
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 *
 * @category   Unirgy
 * @package    Unirgy_StoreLocator
 * @copyright  Copyright (c) 2008 Unirgy LLC
 * @license    http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 */

/**
 * @category   Unirgy
 * @package    Unirgy_StoreLocator
 * @author     Boris (Moshe) Gurevich <moshe@unirgy.com>
 */
?>
<?php
$_apiKey = Mage::getStoreConfig('ustorelocator/general/google_api_key');
$_showMap = Mage::getStoreConfig('ustorelocator/general/show_map');
$_showSearch = Mage::getStoreConfig('ustorelocator/general/show_search');
$_defaultLocation = Mage::getStoreConfig('ustorelocator/general/default_location');
$_defaultRadius = Mage::getStoreConfig('ustorelocator/general/default_radius');
?>

<script src="https://maps.google.com/maps?file=api&amp;v=2&amp;key=<?php echo $_apiKey ?>" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[

function UnirgyStoreLocator(config) {
    var map;
    var geocoder;

    function searchLocationsNear(center, params) {
        var searchUrl = config.searchUrl+'?lat='+center.lat()+'&lng='+center.lng()+'&'+Object.toQueryString(params);
        GDownloadUrl(searchUrl, function(data) {
            var xml = GXml.parse(data);
            var entries = xml.documentElement.getElementsByTagName('marker');
            map.clearOverlays();

            var sidebar = config.sidebarEl;
            sidebar.innerHTML = '';
            if (entries.length == 0) {
                sidebar.innerHTML = 'No results found.';
                map.setCenter(new GLatLng(40, -100), 4);
                return;
            }

            var bounds = new GLatLngBounds();
            for (var i = 0; i < entries.length; i++) {
                var entry = {};
                for (var j = 0, l = entries[i].attributes.length; j < l; j++) {
                    entry[entries[i].attributes[j].nodeName] = entries[i].attributes[j].nodeValue;
                };
                var point = new GLatLng(parseFloat(entry.latitude), parseFloat(entry.longitude));
                bounds.extend(point);
                var marker = createMarker(entry, point);
                map.addOverlay(marker);
                var sidebarEntry = createSidebarEntry(entry, marker);
                sidebar.appendChild(sidebarEntry);
             }
             map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
        });
    }

    function escapeUserText(text) {
        if (text === undefined) {
            return null;
        }
        text = text.replace(/@/, "@@");
        text = text.replace(/\\/, "@\\");
        text = text.replace(/'/, "@'");
        text = text.replace(/\[/, "@[");
        text = text.replace(/\]/, "@]");
        return encodeURIComponent(text);
    };

    function createLabeledMarkerIcon(m) {
        var opts = config.iconOpts || {};

        var primaryColor = opts.primaryColor || "#DA7187";
        var strokeColor = opts.strokeColor || "#000000";
        var starPrimaryColor = opts.starPrimaryColor || "#FFFF00";
        var starStrokeColor = opts.starStrokeColor || "#0000FF";
        var label = escapeUserText(opts.label) || "";
        var labelColor = opts.labelColor || "#000000";
        var addStar = m.star || false;

        var pinProgram = (addStar) ? "pin_star" : "pin";
        var baseUrl = "https://chart.apis.google.com/chart?cht=d&chdp=mapsapi&chl=";
        var iconUrl = baseUrl + pinProgram + "'i\\"
            + "'[" + m.marker_label +  "'-4'f\\"  + "hv'a\\]" + "h\\]o\\"
            + primaryColor.replace("#", "")  + "'fC\\"
            + labelColor.replace("#", "")  + "'tC\\"
            + strokeColor.replace("#", "")  + "'eC\\";
        if (addStar) {
            iconUrl += starPrimaryColor.replace("#", "") + "'1C\\"
                + starStrokeColor.replace("#", "") + "'0C\\";
        }
        iconUrl += "Lauto'f\\";

        var icon = new GIcon(G_DEFAULT_ICON);
        icon.image = "https://domain.com/skin/frontend/default/dd/images/pin.png";
        icon.iconSize = (addStar) ? new GSize(23, 39) : new GSize(21, 34);
        return icon;
    }
	
    function createMarker(m, point) {
        var icon = createLabeledMarkerIcon(m);
        var marker = new GMarker(point, icon);
        GEvent.addListener(marker, 'click', function() {
            marker.openInfoWindowHtml(config.generateMarkerHtml(m));
        });
        return marker;
    }

    function createSidebarEntry(m, marker) {
        var a = document.createElement('a');
        a.href = "javascript:void(0)";
        var icon = createLabeledMarkerIcon(m);
        var html = '';
        html += config.generateSidebarHtml(m);
        a.innerHTML = html;
        GEvent.addDomListener(a, 'click', function() {
            GEvent.trigger(marker, 'click');
        });
        return a;
    }

    return {
        load: function () {
            if (!GBrowserIsCompatible()) return;
            geocoder = new GClientGeocoder();
            map = new GMap2(config.mapEl);
            map.addControl(new GSmallMapControl());
            map.addControl(new GMapTypeControl());
            map.setCenter(new GLatLng(40, -100), 4);
        },
        search: function(address, params) {
            geocoder.getLatLng(address, function(latlng) {
                if (!latlng) {
                    alert('The address is not valid: '+address);
                } else {
                    searchLocationsNear(latlng, params);
                }
            });
        }
    };
}

//]]>
</script>

<div class="page-title">
	<h2><?php echo $this->__('test')?></h2>
</div>
<?php if ($_showSearch): ?>
				<br />
<form id="store_locator_form" onsubmit="return false">
	<fieldset class="group-select" style="background-color:#F1F1F1; padding: 15px; border: SOLID #CCC 1px">
		<div style="float:left; margin-right:15px">
                <label for="address"><?php echo $this->__('Please enter your City, State or Zip Code')?></label><br/>
			    <input type="text" class="input-text" id="address" name="address" style="width:300px;"/>
		</div>
		<div style="float:left; margin-right:15px">
				<div class="input-box" style="width:95px;">
				    <label for="radius"><?php echo $this->__('Radius')?></label><br/>
				    <select id="radius" name="radius" style="width:95px;">
				        <option value="25" selected>25</option>
				        <option value="100">100</option>
				        <option value="200">200</option>
				    </select>
                </div>
		</div>
		<div style="float:left; margin-right:5px">
				&nbsp;
				<br />
        		<input type="submit" class="button" value="<?php echo $this->__('Submit')?>" />
		</div>
		<div style="float:left; margin-right:5px">
				&nbsp;
				<br />
				<input type="reset" class="button" value="<?php echo $this->__('Reset')?>" />
		</div>
    </fieldset>
</form>
<?php endif ?>

<div id="storelocator-results" <?php if (!$_showMap): ?>style="visibility:hidden;"<?php endif ?>>
<br />
	<div id="storelocator-container">
		<table width="100%">
		<tbody>
		  <tr id="cm_mapTR">
			<td valign="top"><div id="sidebar"></div></td>
			<td><div id="map"></div> </td>
		  </tr>
		</tbody>
	  </table>
	</div>
</div>

<script type="text/javascript">
var ex;
(function(){
    var storeLocator = new UnirgyStoreLocator({
        mapEl: $('map'),
        sidebarEl: $('sidebar'),
        searchUrl: '<?php echo $this->getUrl('ustorelocator/location/search')?>',
        generateSidebarHtml: function(m) {
            return '<div style="clear:both"><b>' + m.title + ' ' + m.tier + '</b> (' + parseFloat(m.distance).toFixed(1) + ' ' + m.units + ')</div>';
        },
        generateMarkerHtml: function(m) {
            var url = m.website_url.replace(/\s/,'');
            return '<b>' + m.title + '</b> <br/>'
                + m.address_display.replace(/\n/, '<br/>') + '<br/>'
                + (m.phone.length>5 ? m.phone + ' - t=' + m.tier + '<br/>' : '')
                + '<br/>'
                + (url.length>5 ? '<a href="' + (url.match(/@/) ? 'mailto:' : '') + url + '"><strong>' + url + '</strong></a><br/>' : '')
                + '<p>' + m.notes + '</p>';
        }
    });

    Event.observe(window, 'load', function () {
        storeLocator.load();

<?php if ($_defaultLocation): ?>
        $('storelocator-results').style.visibility = 'visible';
        storeLocator.search('<?php echo addslashes($_defaultLocation) ?>', {
            radius: '<?php echo addslashes($_defaultRadius) ?>'
            /*, type: $('product_type').value*/
        });
<?php endif ?>
    });

    Event.observe(window, 'unload', GUnload);

<?php if ($_showSearch): ?>
    Event.observe($('store_locator_form'), 'submit', function() {
        $('storelocator-results').style.visibility = 'visible';
        storeLocator.search($('address').value, {
            radius: $('radius').value
            /*, type: $('product_type').value*/
        });
    });
<?php endif ?>

})();
</script>

Open in new window

0
 
movieprodwAuthor Commented:
The page errored when I added that code
0
 
GaryCommented:
Can you do a dump of m.tier in the function and post here.
0
 
movieprodwAuthor Commented:
sorry but how do I dump that?

I know in php it is var_dump() so I will try that and dump() in case that works in the mean time.
0
 
movieprodwAuthor Commented:
Says 'undefined'
0
 
GaryCommented:
var_dump(m.tier);
or probably
var_dump(m);

I will come back to this tomorrow, had a quick look thru your posted code but too late for me to follow back thru all the functions.  It is obviously not an array.
0
 
movieprodwAuthor Commented:
Hired a guy that fixed it, he added like 60 lines to it so it wasn't easy unfortunately.

Thank you though
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now