I have a JSON that looks like this:
[{
"1": [{
"lat": " -1.854029",
"lng": " 36.488604"
}, {
"lat": " -1.519856",
"lng": " 36.102752"
}, {
"lat": " -1.283394",
"lng": " 36.657745"
}]
}, {
"2": [{
"lat": " -1.325416",
"lng": " 36.669051"
}, {
"lat": " -1.392932",
"lng": " 36.768752"
}, {
"lat": " -1.390505",
"lng": " 36.810023"
}, {
"lat": " -1.448266",
"lng": " 36.952769"
}, {
"lat": " -1.267033",
"lng": " 37.094882"
}, {
"lat": " -1.214605",
"lng": " 37.053978"
}, {
"lat": " -1.169516",
"lng": " 36.895608"
}]
}]
I want to convert it to this format.
{
"1": [{
"lat": " -1.854029",
"lng": " 36.488604"
}, {
"lat": " -1.519856",
"lng": " 36.102752"
}, {
"lat": " -1.283394",
"lng": " 36.657745"
}],
"2": [{
"lat": " -1.325416",
"lng": " 36.669051"
}, {
"lat": " -1.392932",
"lng": " 36.768752"
}, {
"lat": " -1.390505",
"lng": " 36.810023"
}, {
"lat": " -1.448266",
"lng": " 36.952769"
}, {
"lat": " -1.267033",
"lng": " 37.094882"
}, {
"lat": " -1.214605",
"lng": " 37.053978"
}, {
"lat": " -1.169516",
"lng": " 36.895608"
}]
}
I have tried JSON.parse(var) but it does not give the required output. If I try to access a value in my json, it gives undefined. Please someone help no what am doing wrong. Is it the wat am creating the json? If so how should I create it so I get the required output as mentioned above. Or is the problem with the way am parsing the json?
You're actually working with an array that contains javascript object, use myArray[0] to get the object:
var myArray = [
{
"1": [
{
"lat": " -1.854029",
"lng": " 36.488604"
},
{
"lat": " -1.519856",
"lng": " 36.102752"
},
{
"lat": " -1.283394",
"lng": " 36.657745"
}
]
},
{
"2": [
{
"lat": " -1.325416",
"lng": " 36.669051"
},
{
"lat": " -1.392932",
"lng": " 36.768752"
},
{
"lat": " -1.390505",
"lng": " 36.810023"
},
{
"lat": " -1.448266",
"lng": " 36.952769"
},
{
"lat": " -1.267033",
"lng": " 37.094882"
},
{
"lat": " -1.214605",
"lng": " 37.053978"
},
{
"lat": " -1.169516",
"lng": " 36.895608"
}
]
}
];
myArray[0] will return the object that you can use without the need to parse. Parsing is used when we have the JSON (i.e string notation) and we have to get the corresponding js object or vice versa.
I think this solution could help your problem:
JSON.parse(JSON.stringify(array))
Please check if this could solve your issue: Convert array to JSON
Related
I have an array of objects which I need to restructure. The input array of objects is as follows:
[
[
{
"lat": 51.00445965809624,
"lng": 5.505536355741434
},
{
"lat": 51.00431971638806,
"lng": 5.505461423372382
},
{
"lat": 51.00417977463196,
"lng": 5.505386491455417
},
{
"lat": 51.00403983282792,
"lng": 5.505311559990534
},
{
"lat": 51.00389989097598,
"lng": 5.505236628977724
},
{
"lat": 51.00375994907609,
"lng": 5.505161698416986
},
{
"lat": 51.00362000712828,
"lng": 5.505086768308312
}
],
[
{
"lat": 51.00440846173839,
"lng": 5.505785160705168
},
{
"lat": 51.00426821144456,
"lng": 5.505709911534925
},
{
"lat": 51.00412796110243,
"lng": 5.50563466281968
},
{
"lat": 51.00398771071194,
"lng": 5.5055594145594275
},
{
"lat": 51.00384746027312,
"lng": 5.505484166754162
},
{
"lat": 51.00370720978598,
"lng": 5.5054089194038776
},
{
"lat": 51.0035669592505,
"lng": 5.50533367250857
}
],
[
{
"lat": 51.004357264852146,
"lng": 5.506033965119733
},
{
"lat": 51.00421670597403,
"lng": 5.505958399145694
},
{
"lat": 51.004076147047186,
"lng": 5.505882833629572
},
{
"lat": 51.003935588071585,
"lng": 5.505807268571363
},
{
"lat": 51.00379502904726,
"lng": 5.505731703971063
},
{
"lat": 51.003654469974194,
"lng": 5.5056561398286625
},
{
"lat": 51.00351391085237,
"lng": 5.505580576144162
}
],
[
{
"lat": 51.00430606743754,
"lng": 5.506282768985127
},
{
"lat": 51.00416519997647,
"lng": 5.506206886204688
},
{
"lat": 51.00402433246626,
"lng": 5.506131003885096
},
{
"lat": 51.00388346490688,
"lng": 5.506055122026344
},
{
"lat": 51.00374259729837,
"lng": 5.505979240628427
},
{
"lat": 51.00360172964068,
"lng": 5.505903359691342
},
{
"lat": 51.003460861933874,
"lng": 5.505827479215082
}
]
]
In actuality these are the coordinates of pitch blocks here as below:
If you see there are four row lines ( each block has two up and down ) and seven column lines ( each block has two, left and right line). so array has four main array and seven objects under that.
Can I get the structure of array so that it should be like the coordinates of each block in array? e.g.
[
[
[
{ lat: 51.00445965809624, lng: 5.505536355741434 },
{ lat: 51.00431971638806, lng: 5.505461423372382 },
{ lat: 51.00426821144456, lng: 5.505709911534925 },
{ lat: 51.00440846173839, lng: 5.505785160705168 },
{ lat: 51.00445965809624, lng: 5.505536355741434 }
],[
....
]
] ,[
....
]
]
Below array structure, if for bottom left block number 54.
[
[
[
{ lat: 51.00445965809624, lng: 5.505536355741434 },
{ lat: 51.00431971638806, lng: 5.505461423372382 },
{ lat: 51.00426821144456, lng: 5.505709911534925 },
{ lat: 51.00440846173839, lng: 5.505785160705168 },
{ lat: 51.00445965809624, lng: 5.505536355741434 }
],[
....
]
] ,[
{},{}..
]
]
You'll have to iterate the original array and make the "box" combinations. There are many ways to do that. Here is how you can use flatMap and map to perform the nested iteration along row/column dimensions:
const points = [[{"lat": 51.00445965809624,"lng": 5.505536355741434},{"lat": 51.00431971638806,"lng": 5.505461423372382},{"lat": 51.00417977463196,"lng": 5.505386491455417},{"lat": 51.00403983282792,"lng": 5.505311559990534},{"lat": 51.00389989097598,"lng": 5.505236628977724},{"lat": 51.00375994907609,"lng": 5.505161698416986},{"lat": 51.00362000712828,"lng": 5.505086768308312}],[{"lat": 51.00440846173839,"lng": 5.505785160705168},{"lat": 51.00426821144456,"lng": 5.505709911534925},{"lat": 51.00412796110243,"lng": 5.50563466281968},{"lat": 51.00398771071194,"lng": 5.5055594145594275},{"lat": 51.00384746027312,"lng": 5.505484166754162},{"lat": 51.00370720978598,"lng": 5.5054089194038776},{"lat": 51.0035669592505,"lng": 5.50533367250857}],[{"lat": 51.004357264852146,"lng": 5.506033965119733},{"lat": 51.00421670597403,"lng": 5.505958399145694},{"lat": 51.004076147047186,"lng": 5.505882833629572}, {"lat": 51.003935588071585,"lng": 5.505807268571363},{"lat": 51.00379502904726,"lng": 5.505731703971063},{"lat": 51.003654469974194,"lng": 5.5056561398286625},{"lat": 51.00351391085237,"lng": 5.505580576144162}],[{"lat": 51.00430606743754,"lng": 5.506282768985127},{"lat": 51.00416519997647,"lng": 5.506206886204688},{"lat": 51.00402433246626,"lng": 5.506131003885096},{"lat": 51.00388346490688,"lng": 5.506055122026344},{"lat": 51.00374259729837,"lng": 5.505979240628427},{"lat": 51.00360172964068,"lng": 5.505903359691342},{"lat": 51.003460861933874,"lng": 5.505827479215082}]];
const boxes = points.slice(1).flatMap((row, y) =>
row.slice(1).map((_, x) => [
...points[y].slice(x, x + 2),
...row.slice(x, x + 2)
])
);
console.log(boxes);
Note that the same object will be used multiple times in the output, as an object represents a point that can be shared by up to four neighboring boxes. In the above stack snippet output, this reuse of the same objects is marked with /*id*/ and /*ref*/ comments.
I've made a map calling multiple data points from my json file I've managed to display an image as a marker and get a label to display but my issue is with the label how do I add style to it without it breaking my map or messing with the coordinates?
Currently, the first label works and is in the right place but the second way I'm trying to initialise it doesn't even work and as far as my research has shown that how it has to be laid out to add style.
tried adding style to the initial label stopped the whole map from displaying.
tried adding a label in the formative seen can't even get the text to display
//stores Google Map object and the JSON called from PHP
var map;
var locations;
var markers;
function initMap() {
// creates the map and puts it in the html giving its zoom and position
map = new google.maps.Map(document.getElementById('map'),
{
center: {
lat: 51.0590282,
lng: -1.3104568},
zoom: 9
});
$.getJSON(
//URL for my php script
'http://up858296.ct.port.ac.uk/ParkRun/ParkrunJson.php',
function(jsonData) {
// putting jason data under variable location
locations = jsonData;
locations.forEach(
function(loc) {
// gets objects which arent in my JSON
loc.map = map;
if (loc.gender == "Male") {
loc.icon.url = 'Man.png';
} else {
loc.icon.url = 'Women.png';
}
loc.icon.scaledSize = new google.maps.Size(40, 40);
loc.icon.labelOrigin = new google.maps.Point(10, 50);
loc.title = "Parkrun: " + loc.parkrun + ", Runner: " + loc.name + ", Time: " + loc.duration;
//fist label that displays but cant add style
loc.label = loc.name + ", Time:" + loc.duration;
//creates marker on google map named "loc"
// "loc" stores lat, lng ect
var marker = new google.maps.Marker(loc);
// Add listener for a click event upon which will open url for parkrun sites.
marker.addListener(
'click',
function() {
window.open(loc.link);
}
);
//initialise styled map label overlay (second lable wont even display text)
/*var m = new google.maps.Marker({
position: loc,
label: {
text: loc.name + ", Time:" + loc.duration,
color: 'white',
fontWeight: 'bold',
},
})*/
}
);
}
);
};
This works for me (using the formatting from your second attempt for the label defined in the first).
loc.icon.scaledSize = new google.maps.Size(40, 40);
loc.icon.labelOrigin = new google.maps.Point(10, 50);
loc.title = "Parkrun: " + loc.parkrun + ", Runner: " + loc.name + ", Time: " + loc.duration;
loc.label = {
text: loc.name + ", Time:" + loc.duration,
color: 'white',
fontWeight: 'bold',
};
proof of concept fiddle
code snippet:
var map;
var locations;
var markers;
function initMap() {
// creates the map and puts it in the html giving its zoom and position
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 51.0590282,
lng: -1.3104568
},
zoom: 9,
mapTypeId: 'satellite'
});
// putting jason data under variable location
locations = jsonData;
locations.forEach(
function(loc) {
// gets objects which arent in my JSON
loc.map = map;
if (loc.gender == "Male") {
loc.icon.url = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
} else {
loc.icon.url = 'http://maps.google.com/mapfiles/ms/micons/red.png';
}
loc.icon.scaledSize = new google.maps.Size(40, 40);
loc.icon.labelOrigin = new google.maps.Point(10, 50);
loc.title = "Parkrun: " + loc.parkrun + ", Runner: " + loc.name + ", Time: " + loc.duration;
loc.label = {
text: loc.name + ", Time:" + loc.duration,
color: 'white',
fontWeight: 'bold',
};
var marker = new google.maps.Marker(loc);
// Add listener for a click event upon which will open url for parkrun sites.
marker.addListener('click', function() {
window.open(loc.link);
});
});
}
jsonData = [{
"position": {
"lat": 51.1699,
"lng": -0.8371
},
"gender": "Male",
"parkrun": "Alice Holt",
"name": "James Baker",
"duration": "16:57:00",
"link": "https:\/\/www.parkrun.org.uk\/aliceholt\/",
"icon": []
}, {
"position": {
"lat": 51.2193,
"lng": -1.5052
},
"gender": "Male",
"parkrun": "Andover",
"name": "John Kane",
"duration": "18:13:00",
"link": "https:\/\/www.parkrun.org.uk\/andover\/",
"icon": []
}, {
"position": {
"lat": 51.2599,
"lng": -1.0824
},
"gender": "Male",
"parkrun": "Basingstoke",
"name": "Matthieu Marshall",
"duration": "16:51:00",
"link": "https:\/\/www.parkrun.org.uk\/basingstoke\/",
"icon": []
}, {
"position": {
"lat": 50.8084,
"lng": -1.6414
},
"gender": "Male",
"parkrun": "Brockenhurst",
"name": "James Bewley",
"duration": "18:06:00",
"link": "https:\/\/www.parkrun.org.uk\/brockenhurst\/",
"icon": []
}, {
"position": {
"lat": 50.9705,
"lng": -1.3731
},
"gender": "Male",
"parkrun": "Eastleigh",
"name": "Tom Bray",
"duration": "18:06:00",
"link": "https:\/\/www.parkrun.org.uk\/eastleigh\/",
"icon": []
}, {
"position": {
"lat": 50.8483,
"lng": -1.166
},
"gender": "Women",
"parkrun": "Fareham",
"name": "Leslie Ellul",
"duration": "52:00:00",
"link": "https:\/\/www.parkrun.org.uk\/fareham\/",
"icon": []
}, {
"position": {
"lat": 50.8733,
"lng": -0.9753
},
"gender": "Women",
"parkrun": "Havant",
"name": "Nicola Ellul",
"duration": "26:10:00",
"link": "https:\/\/www.parkrun.org.uk\/havant\/",
"icon": []
}, {
"position": {
"lat": 51.1188,
"lng": -0.8766
},
"gender": "Male",
"parkrun": "Hogmoor Inclosure",
"name": "James Kingston",
"duration": "17:07:00",
"link": "https:\/\/www.parkrun.org.uk\/hogmoorinclosure\/",
"icon": []
}, {
"position": {
"lat": 50.8009,
"lng": -1.2035
},
"gender": "Male",
"parkrun": "Lee-on-the-Solent",
"name": "Jack Porter",
"duration": "18:24:00",
"link": "https:\/\/www.parkrun.org.uk\/leeonthesolent\/",
"icon": []
}, {
"position": {
"lat": 50.7506,
"lng": -1.547
},
"gender": "Male",
"parkrun": "Lyminghton Woodside",
"name": "Callum Johnson",
"duration": "18:39:00",
"link": "https:\/\/www.parkrun.org.uk\/lymingtonwoodside\/",
"icon": []
}, {
"position": {
"lat": 50.8685,
"lng": -1.3427
},
"gender": "Male",
"parkrun": "Netley Abbey",
"name": "Samuel Skinner",
"duration": "18:24:00",
"link": "https:\/\/www.parkrun.org.uk\/netleyabbey\/",
"icon": []
}, {
"position": {
"lat": 50.8405,
"lng": -1.0776
},
"gender": "Male",
"parkrun": "Portsmouth Lakeside",
"name": "Liam Dunne",
"duration": "16:18:00",
"link": "https:\/\/www.parkrun.org.uk\/portsmouthlakeside\/",
"icon": []
}, {
"position": {
"lat": 50.9651,
"lng": -0.9754
},
"gender": "Male",
"parkrun": "Queen Elizabeth",
"name": "Grant Hopkins",
"duration": "19:33:00",
"link": "https:\/\/www.parkrun.org.uk\/queenelizabeth\/",
"icon": []
}, {
"position": {
"lat": 51.265,
"lng": -0.7547
},
"gender": "Male",
"parkrun": "Rushmoor",
"name": "Kim Bowling",
"duration": "17:18:00",
"link": "https:\/\/www.parkrun.org.uk\/rushmoor\/",
"icon": []
}, {
"position": {
"lat": 50.9245,
"lng": -1.4096
},
"gender": "Male",
"parkrun": "Southampton",
"name": "Peter Hart",
"duration": "16:49:00",
"link": "https:\/\/www.parkrun.org.uk\/southampton\/",
"icon": []
}, {
"position": {
"lat": 50.7787,
"lng": -1.082
},
"gender": "Male",
"parkrun": "Southsea",
"name": "Adam Barlow",
"duration": "16:31:00",
"link": "https:\/\/www.parkrun.org.uk\/southsea\/",
"icon": []
}, {
"position": {
"lat": 50.8847,
"lng": -1.2472
},
"gender": "Male",
"parkrun": "Whiteley",
"name": "Richard Waldron",
"duration": "15:46:00",
"link": "https:\/\/www.parkrun.org.uk\/whiteley\/",
"icon": []
}, {
"position": {
"lat": 51.0662,
"lng": -1.3126
},
"gender": "Male",
"parkrun": "Winchester",
"name": "Marley Godden",
"duration": "17:59:00",
"link": "https:\/\/www.parkrun.org.uk\/winchester\/",
"icon": []
}];
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>
I am trying banging my head to filter json written below to get desired result.
[{
"Key": "EShSOKthupE=",
"ImageUrl": "path",
"Title": "ABC",
"CityId": 16,
"TimezoneShortName": "PYT",
"UtcHrsDiff": 8.5,
"PlaceKey": "QIZHdWOa77o=",
"PlaceName": "Shymala Hills Slums",
"Lat": 23.2424856,
"Long": 77.39488289999997,
"ActivityList": [ "Test Activity" ]
},
{
"Key": "NXLQpZAZT4M=",
"ImageUrl": "",
"Title": "ASAS",
"CityId": 17,
"TimezoneShortName": "AEST",
"UtcHrsDiff": 10,
"PlaceKey": "o4fAkahBzYY=",
"PlaceName": "ASAS",
"Lat": 12.9856503,
"Long": 77.60569269999996,
"ActivityList": [ "Adventure Sport" ]
}]
Now I want to get json like this from above json using lodash or undescore js.
[{
"PlaceKey": "QIZHdWOa77o=",
"PlaceName": "ABC",
"Lat": 23.2424856,
"Long": 77.39488289999997
},
{
"PlaceKey": "o4fAkahBzYY=",
"PlaceName": "ASAS",
"Lat": 12.9856503,
"Long": 77.60569269999996,
}]
Any help I can get on this?
Using lodash:
_.map(yourArray, (el => _.pick(el, ['PlaceKey', 'PlaceName', 'Lat', 'Long'])))
You can do this simply in Javascript, without the need of any external library like :
filteredArray=arr.map(function(item){
return {
"PlaceKey": item.PlaceKey,
"PlaceName": item.PlaceName,
"Lat": item.Lat,
"Long": item.Long,
}
})
use _.map function
var finalArray = _.map(your_arr, function(obj) {
return {
"PlaceKey": obj.PlaceKey,
"PlaceName": obj.PlaceName,
"Lat": obj.Lat,
"Long": obj.Long,
}
});
or just use the arrays map function:
var finalArray = your_arr.map(function(obj) {
return {
"PlaceKey": obj.PlaceKey,
"PlaceName": obj.PlaceName,
"Lat": obj.Lat,
"Long": obj.Long,
}
});
I'm getting this JSON file. The path arrays can be from 1 to 100,
{
"waypoints": [
{
"path0": [
{
"color": "#0000FF"
},
{
"lat": "37.9875000",
"lon": "23.7609260"
},
{
"lat": "37.9873130",
"lon": "23.7607460"
},
{
"lat": "37.9873840",
"lon": "23.7604100"
}
],
"path1": [
{
"color": "#00FF00"
},
{
"lat": "37.9873840",
"lon": "23.7604100"
},
{
"lat": "37.9878040",
"lon": "23.7605670"
},
{
"lat": "37.9882590",
"lon": "23.7607340"
}
],
"path2": [
{
"color": "#FF0000"
},
{
"lat": "37.9882590",
"lon": "23.7607340"
},
{
"lat": "37.9884690",
"lon": "23.7598760"
}
]
}
]
}
How can i see how many path(path0, path1, ..) arrays do i have inside waypoints in Javascript?
Using obj.waypoints.length returns 0.
Thank you.
On a modern browser you can use Object.keys :
var nbpaths = Object.keys(obj.waypoints[0]).length;
For compatibility with ie8, you can count like this :
var nbpaths = 0;
for (var key in obj.waypoints[0]) nbpaths++;
I'm using the foursquare venues API to populate a select menu and list in my web app. I'd like to sort the venues alphabetically by name.
Here is a JSON response from the foursquare API, which has some venues:
[ { "reasons": { "count": 1, "items": [ { "summary": "This spot is popular on foursquare", "type": "general", "reasonName": "globalInteractionReason" } ] }, "venue": { "id": "4c6ee03fb5a5236a74744b52", "name": "Peninsular Paper Dam", "contact": {}, "location": { "address": "1265 Leforge Rd", "crossStreet": "at Huron River Rd", "lat": 42.256628, "lng": -83.623933, "distance": 892, "postalCode": "48198", "city": "Ypsilanti", "state": "MI", "country": "United States", "cc": "US" }, "categories": [ { "id": "4bf58dd8d48988d165941735", "name": "Scenic Lookout", "pluralName": "Scenic Lookouts", "shortName": "Scenic Lookout", "icon": { "prefix": "https://foursquare.com/img/categories_v2/parks_outdoors/sceniclookout_", "suffix": ".png" }, "primary": true } ], "verified": false, "stats": { "checkinsCount": 31, "usersCount": 12, "tipCount": 0 }, "likes": { "count": 0, "groups": [] }, "specials": { "count": 0, "items": [] }, "photos": { "count": 2, "groups": [] } } }, { "reasons": { "count": 1, "items": [ { "summary": "This spot is popular on foursquare", "type": "general", "reasonName": "globalInteractionReason" } ] }, "venue": { "id": "4ba58202f964a520cb0d39e3", "name": "Benito's Pizza", "contact": { "phone": "7349610707", "formattedPhone": "(734) 961-0707" }, "location": { "address": "1088 N Huron River Dr", "lat": 42.256532, "lng": -83.629082, "distance": 1035, "postalCode": "48197", "city": "Ypsilanti", "state": "MI", "country": "United States", "cc": "US" }, "categories": [ { "id": "4bf58dd8d48988d1ca941735", "name": "Pizza Place", "pluralName": "Pizza Places", "shortName": "Pizza", "icon": { "prefix": "https://foursquare.com/img/categories_v2/food/pizza_", "suffix": ".png" }, "primary": true } ], "verified": false, "stats": { "checkinsCount": 50, "usersCount": 34, "tipCount": 0 }, "url": "http://www.benitospizza.com/", "likes": { "count": 0, "groups": [] }, "menu": { "type": "foodAndBeverage", "url": "https://foursquare.com/v/benitos-pizza/4ba58202f964a520cb0d39e3/menu", "mobileUrl": "https://foursquare.com/v/4ba58202f964a520cb0d39e3/device_menu" }, "specials": { "count": 0, "items": [] }, "photos": { "count": 0, "groups": [] } } } ]
I'm able to parse this response with this code:
for (var i = 0; i < venues.length; i++) {
name = venues[i]['venue']['name'];
category = venues[i]['venue']['categories'][0]['name'];
icon = venues[i]['venue']['categories'][0]['icon']['prefix'];
icon = icon.slice(0, -1); // remove trailing "_" character
icon = icon + venues[i]['venue']['categories'][0]['icon']['suffix'];
address = venues[i]['venue']['location']['address'];
city = venues[i]['venue']['location']['city'];
state = venues[i]['venue']['location']['state'];
distance_meters = venues[i]['venue']['location']['distance'];
distance_miles = distance_meters / 1609.34;
distance_miles = Math.round(distance_miles*100)/100;
x = 1; // in the product use i for index below
HTMLmarkupList += "<li><img src=\"" + icon + "\" class=\"ui-li-thumb\" style=\"margin: 23px 10px\" onerror=\"ImgError(this);\">" + "<h3 style=\"margin-left: -40px\">" + name + "</h3><p style=\"margin-left: -40px\">" + category + "</p><p style=\"margin-left: -40px\">" + address + ", " + city + ", " + state + "</p><p style=\"margin-left: -40px\">" + distance_miles + " miles from you.</p></li>";
HTMLmarkupSelect += "<option value\"" + i + "\">" + name + "</option>";
}
Right now, the value of the select is just i, but as I'll be needing to store other variables along with the name in my database I may update the value in each select option to include things like the address, city, state, etc.... I mention this because if I was only using the name in the select, I could just build an array of names and use the javascript sort method.
Can anyone help with how to sort the venues alphabetically by name? Thanks.
Information:
http://www.w3schools.com/jsref/jsref_sort.asp
Example:
venues.sort(function(a,b){
if(a.venue.name == b.venue.name) return 0;
return (a.venue.name < b.venue.name) ? -1 : 1;
});