We Keep Coding

Show Result routing path with Leaflet

I get route between 2 Point :
{
"routes": [
{
"overview_polyline": {
"points": "m{f~D}_ygHp#wAJs#Is#eAsBGk#Hg#"
},
"legs": [
{
"summary": "میدان انقلاب - انقلاب",
"distance": {
"value": 209.0,
"text": "۲۲۵ متر"
},
"duration": {
"value": 13.0,
"text": "کمتر از ۱ دقیقه"
},
"steps": [
{
"name": "بزرگراه اهواز-حمیدیه",
"instruction": "در جهت شرق در بزرگراه اهواز-حمیدیه قرار بگیرید",
"bearing_after": 119,
"type": "depart",
"distance": {
"value": 25.0,
"text": "۲۵ متر"
},
"duration": {
"value": 1.0,
"text": "کمتر از ۱ دقیقه"
},
"polyline": "m{f~D}_ygHTm#",
"start_location": [
48.629912,
31.333827
]
},
{
"name": "انقلاب",
"instruction": "در میدان انقلاب، از خروجی دوم، خارج شوید",
"rotaryName": "میدان انقلاب",
"bearing_after": 126,
"type": "rotary",
"modifier": "straight",
"exit": 2,
"distance": {
"value": 101.0,
"text": "۱۲۵ متر"
},
"duration": {
"value": 5.0,
"text": "کمتر از ۱ دقیقه"
},
"polyline": "wzf~DkaygHNWJQJs#Is#Yk#",
"start_location": [
48.630143,
31.333717
]
},
{
"name": "",
"instruction": "به مسیر خود ادامه دهید",
"bearing_after": 53,
"type": "exit rotary",
"modifier": "straight",
"exit": 2,
"distance": {
"value": 83.0,
"text": "۱۰۰ متر"
},
"duration": {
"value": 8.0,
"text": "کمتر از ۱ دقیقه"
},
"polyline": "szf~DigygHk#gAGk#Hg#",
"start_location": [
48.631088,
31.333703
]
},
{
"name": "انقلاب",
"instruction": "در مقصد قرار دارید",
"bearing_after": 0,
"type": "arrive",
"distance": {
"value": 0.0,
"text": ""
},
"duration": {
"value": 0.0,
"text": ""
},
"polyline": "}{f~DelygH",
"start_location": [
48.631869,
31.333913
]
}
]
}
]
}
]
}
In Steps we have 4 points:
[31.333827,48.629912 ],
[31.333717,48.630143 ],
[31.333703,48.631088],
[31.333913,48.631869 ]
When I use polyline my output is like below picture. But real Path is another thing.
I use Leaflet and get my .png file for map from another server and get Json String from another server.
How can Manage this?

A Map Matching API should solve your problem.
Google Snap to Roads API
Mapbox Map Matching API
There also seems to be some open source alternatives like the Valhalla Map Matching API

What was the original directions API request? Curious to see why you're getting that result for that route

Vue.js – How to build a table like Doodle with Vuetify?

I’m developing an app with Vue.js that’s using Vuetify for some nice material design components. My data is stored in Firebase Cloud Firestore. I want to create a Vuetify table that is optimized for the following usage.
Functionality
The table is used to check availability for multiple event dates. Users are listed on the left side and are grouped by their position in the company (e.g. consultant, manager etc.). These groups should be visible but can be hidden by tapping on the arrow. It should also be possible to hide position groups completely. The event availability status is shown in three colors (green, red or blue). Later I want to add buttons or icons to the cells for more features. If the user taps on their cell a dialog should open to change the availability. If you tap on the event in the header a dialog should open that shows more event details.
The table should look like this mockup:
The table is scrollable up/down to see all users, left/right to check future events. However the event header and the user bar on the right should be fixed.
Data in Firebase Cloud Firestore:
events
—> [event_id] // every event has an unique id
title: String
startdate: Date
enddate: Date
—> [availability] // every [event] contains the availability of users
—> [user_id]
status: String // attendance, no attendance, not sure
comment: String // details that users adds to their response
What's the best way to start developing the table?
Here is some dummy data in JSON format to get a feeling of what to work with:
{
"events": {
"event1": {
"id": "event1",
"title": "Lunch with Santa Claus",
"startdate": "03/11/2020 13:00",
"enddate": "03/11/2020 14:00",
"availability": {
"user100": {
"userID": "user100",
"status": "not sure"
},
"user103": {
"userID": "user103",
"status": "attendance",
"comment": "Looking forward to lunch with Santa"
},
"user108": {
"userID": "user108",
"status": "attendance"
}
}
},
"event2": {
"id": "event2",
"title": "Meeting with Robin Hood",
"startdate": "08/11/2020 10:00",
"enddate": "08/11/2020 12:00",
"availability": {
"user100": {
"userID": "user100",
"status": "attendance",
"comment": "Will be late"
},
"user101": {
"userID": "user101",
"status": "no attendance"
},
"user102": {
"userID": "user102",
"status": "not sure"
},
"user103": {
"userID": "user103",
"status": "attendance",
"comment": "Robin Hood is great!"
},
"user108": {
"userID": "user108",
"status": "attendance"
}
}
},
"event3": {
"id": "event3",
"title": "Team Meeting",
"startdate": "10/11/2020 09:00",
"enddate": "10/11/2020 10:00",
"availability": {
"user108": {
"userID": "user108",
"status": "no attendance"
},
"user105": {
"userID": "user105",
"status": "not sure"
},
"user102": {
"userID": "user102",
"status": "not sure"
},
"user103": {
"userID": "user103",
"status": "attendance",
"comment": "Looking forward to lunch with Santa"
},
"user109": {
"userID": "user109",
"status": "attendance"
}
}
}
},
"users": {
"user100": {
"id": "user100",
"name": "John Doe",
"position": "Manager"
},
"user101": {
"id": "user101",
"name": "Anna Black",
"position": "Consultant"
},
"user102": {
"id": "user102",
"name": "Tom Green",
"position": "Associate"
},
"user103": {
"id": "user103",
"name": "Matt White",
"position": "Senior Consultant"
},
"user104": {
"id": "user104",
"name": "Peter Blue",
"position": "Manager"
},
"user105": {
"id": "user105",
"name": "Ted Yellow",
"position": "Associate"
},
"user106": {
"id": "user106",
"name": "Lewis Elefant",
"position": "Associate"
},
"user107": {
"id": "user107",
"name": "Matt Shark",
"position": "Senior Consultant"
},
"user108": {
"id": "user108",
"name": "Donald Duck",
"position": "Associate"
},
"user109": {
"id": "user109",
"name": "Lisa Bird",
"position": "Manager"
},
"user110": {
"id": "user110",
"name": "Bailey Wolf",
"position": "Manager"
}
}
}
Any help is very much appreciated, thanks!

access javascript value within the <script> tag with xpath

from this tag:
<script type = "text/javascript" > dataLayer.push({
"pageType": "productPage", "ecommerce": {
"currencyCode": "EUR",
"detail": {
"actionField": {"list": "Detail", "action": "detail"},
"products": [{
"name": "Desodorante Spray Alien",
"id": "10483558",
"price": "34,95",
"brand": "MUGLER",
"category": "higiene\/desodorantes",
"variant": "100 ML",
"dimension5": "Mucho stock",
"dimension6": "Unisex",
"dimension7": "CLARINS SPAIN, S.A",
"dimension8": "No",
"dimension9": "",
"metric2": 1
}]
},
"impressions": [{
"name": "Angel men recarga Eau de Toilette",
"id": "10059432",
"price": "47.95",
"brand": "MUGLER",
"category": "perfumes_hombre_edt",
"variant": "100 ML ",
"list": "you may want",
"position": 1
}, {
"name": "Angel men rubber flask Eau de Toilette",
"id": "10351154",
"price": "42.95",
"brand": "MUGLER",
"category": "perfumes_hombre_edt",
"variant": "50 ML ",
"list": "you may want",
"position": 2
}, {
"name": "Alien Shower Milk",
"id": "10483565",
"price": "26.00",
"brand": "MUGLER",
"category": "higiene_geles",
"variant": "200 ML ",
"list": "you may want",
"position": 3
}, {
"name": "Amen Desodorante en Stick",
"id": "10532706",
"price": "21.95",
"brand": "MUGLER",
"category": "hombre_desodorantes",
"variant": "75 ML ",
"list": "you may want",
"position": 4
}]
}
});
(window["rrApiOnReady"] = window["rrApiOnReady"] || []).push(function () {
retailrocket.productsGroup.post({
"groupId": 10483558,
"name": "Desodorante Spray Alien",
"price": 34.95,
"pictureUrl": "https://ima.douglas.es/img/1467/desodorante_spray_alien-0-.png",
"url": "https://douglas.es/p/mugler/desodorante_spray_alien",
"isAvailable": true,
"categoryPaths": ["Higiene/Corporal", "Corporal", "Corporal/Higiene", "Higiene", "Higiene/Desodorante", "Marca/Mugler"],
"description": "El elixir de feminidad y de sensualidad del Eau de Parfum Alien en su versión desodorante en spray. Déjate envolver con los mismos acordes de la fragancia.",
"vendor": "MUGLER",
"products": {
"10483558": {
"isAvailable": true,
"name": "Desodorante Spray Alien",
"size": "100",
"url": "https://douglas.es/p/mugler/desodorante_spray_alien",
"pictureUrl": "https://ima.douglas.es/img/1467/desodorante_spray_alien-0-.png",
"price": 34.95,
"oldPrice": 34.95,
"params": {}
}
},
"params": {"medida": "ML", "subTitle": "Todo tipo de piel"},
"model": "Desodorante Spray Alien",
"typePrefix": "higiene_desodorantes",
"oldPrice": 34.95
});
rrApi.groupView([10483558]);
});
App.page.webshop = "DOU";
App.page.warehouse = ["ALM"];
App.page.codPostal = "";
</script>
I need to access some specific values of different functions (products, products.brand, impressions and impressions.id).
I tried to convert it to json dictionary, but it is a list and it gets converted into an array and I cannot access it with a "name" value.
How can I do this?

An example would be to select the script using some unique keyword which is only present in this script. Once you have that, you can use re_first to get the desired value. Take this as an example:
product_css = "script:contains('productPage')::text"
regex = 'name": "(.+?)"'
product_name = response.css(product_count_css).re_first(regex)
This will extract the first name. You can use re to tweak it further. Best of luck.

accessing a json child object not in an array

I'm trying to accessing a json child object which is not in an array. i've tried accessing it with my below script but its not working. i want to be able to access the menuCategory Object
JSON
[
{
"id": 67,
"name": "Wednesday Menu",
"serveDate": "2019-06-12 00:00:00",
"expiryDate": "2019-06-12 16:11:00",
"status": "APPROVED",
"isEnabled": true,
"meals": [
{
"id": 45,
"name": "Waakye, Gari and Wele",
"description": "A very well designed food for all kids",
"image": "",
"mealType": "LUNCH",
"unitPrice": 30,
"status": "ENABLED"
},
{
"id": 46,
"name": "Gari and Beans",
"description": "A very well designed food for all kidsss",
"image": "",
"mealType": "LUNCH",
"unitPrice": 12,
"status": "ENABLED"
}
],
"menuCategory": {
"id": 2,
"name": "hello"
}
}
]
JAVASCRIPT
callEditMenu(parent, content) {
this.modalService.open(content);
this.editMenuCategoryId = parent.menuCategory.id;
}

May be like
const parent = [{"id":67,"name":"Wednesday Menu","serveDate":"2019-06-12 00:00:00","expiryDate":"2019-06-12 16:11:00","status":"APPROVED","isEnabled":true,"meals":[{"id":45,"name":"Waakye, Gari and Wele","description":"A very well designed food for all kids","image":"","mealType":"LUNCH","unitPrice":30,"status":"ENABLED"},{"id":46,"name":"Gari and Beans","description":"A very well designed food for all kidsss","image":"","mealType":"LUNCH","unitPrice":12,"status":"ENABLED"}],"menuCategory":{"id":2,"name":"hello"}}]
console.log(parent[0].menuCategory.id);

If the parent argument in the callEditMenu function is referring to the JSON you included then try parent[0].menuCategory.id

let arr = [{"id":67,"name":"Wednesday Menu","serveDate":"2019-06-12 00:00:00","expiryDate":"2019-06-12 16:11:00","status":"APPROVED","isEnabled":true,"meals":[{"id":45,"name":"Waakye, Gari and Wele","description":"A very well designed food for all kids","image":"","mealType":"LUNCH","unitPrice":30,"status":"ENABLED"},{"id":46,"name":"Gari and Beans","description":"A very well designed food for all kidsss","image":"","mealType":"LUNCH","unitPrice":12,"status":"ENABLED"}],"menuCategory":{"id":2,"name":"hello"}}]
for (let item of arr) {
if (item.hasOwnProperty("menuCategory")) {
console.log(item["menuCategory"]);
}
};
let res = arr.filter((item) => item && item.menuCategory);
console.log(res[0].menuCategory);
In case you need to find it dynamically. Above are two different ways

Considering there would be multiple items in your array of objects, you can iterate through each object to get the menuCategory name as
let obj = [
{
"id": 67,
"name": "Wednesday Menu",
"serveDate": "2019-06-12 00:00:00",
"expiryDate": "2019-06-12 16:11:00",
"status": "APPROVED",
"isEnabled": true,
"meals": [
{
"id": 45,
"name": "Waakye, Gari and Wele",
"description": "A very well designed food for all kids",
"image": "",
"mealType": "LUNCH",
"unitPrice": 30,
"status": "ENABLED"
},
{
"id": 46,
"name": "Gari and Beans",
"description": "A very well designed food for all kidsss",
"image": "",
"mealType": "LUNCH",
"unitPrice": 12,
"status": "ENABLED"
}
],
"menuCategory": {
"id": 2,
"name": "hello"
}
}
];
obj.forEach(elem => {
console.log(elem.menuCategory.name);
});

JavaScript GeoJson Parser

i have geojson data:
{
"type":"FeatureCollection",
"metadata":{
"generated":1417015873000,
11-26T14:33:40&endtime=2014-11-26T14:33:45",
"title":"USGS Earthquakes",
"status":200,
"api":"1.0.13",
"count":1
},
"features":
[{
"type":"Feature",
"properties":
{
"mag":6.8,
"place":"160km NW of Kota Ternate, Indonesia",
"time":1417012423350,"updated":1417015584000,
"tz":480,
"url":"http://comcat.cr.usgs.gov/earthquakes/eventpage/usb000t08w",
"detail":"http://comcat.cr.usgs.gov/fdsnws/event/1/query?eventid=usb000t08w&format=geojson",
"felt":1,
"cdi":5,
"mmi":4.98,
"alert":"green",
"status":"reviewed",
"tsunami":1,
"sig":712,
"net":"us",
"code":"b000t08w",
"ids":",at00nfnhsd,pt14330000,usb000t08w,",
"sources":",at,pt,us,",
"types":",cap,dyfi,general-link,geoserve,impact-link,losspager,moment-tensor,nearby-cities,origin,phase-data,shakemap,tectonic-summary,",
"nst":null,
"dmin":1.45,
"rms":1.32,
"gap":37,
"magType":"mwb",
"type":"earthquake",
"title":"M 6.8 - 160km NW of Kota Ternate, Indonesia"
},
"geometry":{"type":"Point","coordinates":[126.5456,1.9752,41.06]},
"id":"usb000t08w"
}]
}
how to parse value "title" ?

var geojson = JSON.parse(geojson_data);
Turns the geojson string into an object, from there you can get whatever you values you want from it.
Edit: your json is invalid, where are you getting the data from? I cleaned it up, so you can call JSON.parse on it. However, it is not valid geojson, so I'd double check where you come up with the data. This geojson validator might help.
{
"metadata": {
"generated": 1417015873000,
"11-26T14: 33: 40&endtime=2014-11-26T14: 33": 45,
"title": "USGSEarthquakes",
"status": 200,
"api": "1.0.13",
"count": 1
},
"features": [
{
"type": "Feature",
"properties": {
"mag": 6.8,
"place": "160km NW of Kota Ternate, Indonesia",
"time": 1417012423350,
"updated": 1417015584000,
"tz": 480,
"url": "http://comcat.cr.usgs.gov/earthquakes/eventpage/usb000t08w",
"detail": "http://comcat.cr.usgs.gov/fdsnws/event/1/query?eventid=usb000t08w&format=geojson",
"felt": 1,
"cdi": 5,
"mmi": 4.98,
"alert": "green",
"status": "reviewed",
"tsunami": 1,
"sig": 712,
"net": "us",
"code": "b000t08w",
"ids": ",at00nfnhsd,pt14330000,usb000t08w,",
"sources": ",at,pt,us,",
"types": ",cap,dyfi,general-link,geoserve,impact-link,losspager,moment-tensor,nearby-cities,origin,phase-data,shakemap,tectonic-summary,",
"nst": null,
"dmin": 1.45,
"rms": 1.32,
"gap": 37,
"magType": "mwb",
"type": "earthquake",
"title": "M 6.8 - 160km NW of Kota Ternate, Indonesia"
},
"geometry": {
"type": "Point",
"coordinates": [
126.5456,
1.9752,
41.06
]
},
"id": "usb000t08w"
}
]
}