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.
Related
I have a string that looks like the following:
{
"results": [
{
"address_components": [
{
"long_name": "Ireland",
"short_name": "Ireland",
"types": [
"establishment",
"natural_feature"
]
}
],
"formatted_address": "Ireland",
"geometry": {
"bounds": {
"northeast": {
"lat": 55.38294149999999,
"lng": -5.431909999999999
},
"southwest": {
"lat": 51.4475448,
"lng": -10.4800237
}
}],
"status" : "OK"
}
I want to turn this into a json that I can easily traverse. However when I call JSON.parse() on this string I get a json array that is a pain to traverse. I want to be able to extract the lat and lng from northeast without having to loop through the entire array.
var json = `{
"results": [
{
"address_components": [
{
"long_name": "Ireland",
"short_name": "Ireland",
"types": [
"establishment",
"natural_feature"
]
}
],
"formatted_address": "Ireland",
"geometry": {
"bounds": {
"northeast": {
"lat": 55.38294149999999,
"lng": -5.431909999999999
},
"southwest": {
"lat": 51.4475448,
"lng": -10.4800237
}
}
}
}
],
"status" : "OK"
}`;
var data = JSON.parse(json);
var bounds = data.results[0].geometry.bounds;
var bound = bounds.northeast || bounds.southwest;
console.log(bound.lat, bound.lng);
If you know northeast is always an option you can simplify this to:
console.log(data.results[0].geometry.bounds.northeast);
That will give you your lat and lng.
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 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
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++;