LeafletJS – Interacting with Maps using JavaScript and Json file - javascript

Hello this is my first time using leafleftJS and I would like to make interaction between the map and json file.
but i have an error so i dont know where is my mistake.
this is my javascript code:
fetch("./assets/js/people.json")
.then(response => response.json())
.then(data => {
data.forEach(person => {
let content = `<h3>${person.name}</h3><br>${person.phone}`;
let mark=L.marker([person.lat, person.lng])
.bindPopup(content)
.addTo(map);
});
}).catch(error => console.error(error));
and this is the json file:
[
{
"lat": 47.50145,
"lng": 10.12264,
"name": "Cindy",
"phone": 0000000000
},
{
"lat": 47.48756,
"lng": 12.18524,
"name": "Gaia",
"phone": 1111111111
}
]
using the console log in inspector , each time i click on the marker i get this error and non popup appear :(
VM773 leaflet.js:5 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at i._updateContent (VM773 leaflet.js:5:91249)
at i.update (VM773 leaflet.js:5:90254)
at i.onAdd (VM773 leaflet.js:5:89656)
at i.onAdd (VM773 leaflet.js:5:92018)
at i._layerAdd (VM773 leaflet.js:5:63932)
at i.whenReady (VM773 leaflet.js:5:42041)
at i.addLayer (VM773 leaflet.js:5:64307)
at i.openPopup (VM773 leaflet.js:5:94859)
at i.openPopup (Popup.js:424:14)
at i._openPopup (Popup.js:499:9)

Related

Error: invalid conference type value while creating event with google meet link

I configured calendar API in my web application and it is working fine. I wanted to add google meet link while creating event. After reading docs I added following code:
'conferenceDataVersion' => 1,
'conferenceData' => [
'createRequest' => [
'conferenceSolutionKey' => [
'type' => 'eventNamedHangout'
],
'requestId' => 'sample232212'
]
],
I am getting error:
{
"error": {
"errors": [
{
"domain": "global",
"reason": "invalid",
"message": "Invalid conference type value."
}
],
"code": 400,
"message": "Invalid conference type value."
}
}
I also try with "eventHangout" and "hangoutsMeet" as per the docs but no luck. I am using google service account. Any help would be highly appreciable.
The object shouldnt contain arrays
"conferenceData": {
"createRequest": {
"conferenceSolutionKey": { "type": "eventNamedHangout" },
"requestId": "randomvalue"
}
}
Issue:
You are adding conferenceDataVersion to the request body, when it's actually a request parameter.
Solution:
Remove conferenceDataVersion from the request body:
'conferenceData' => [
'createRequest' => [
'conferenceSolutionKey' => [
'type' => 'hangoutsMeet'
],
'requestId' => 'sample232212'
]
],
And add it as an additional parameter when making the request:
$optParams = ['conferenceDataVersion' => 1];
$service->events->insert($calendarId, $postBody, $optParams);
Reference:
Events: insert > Parameters
PHP library: Events.insert

how to access obj from json in React?

Api Respose :-
[
{
"System Name": "Name1",
"Primary Sensor": "WWWW",
"Mean Wind Speed": "6.23 m/s",
"Status": 1,
"mws_number": 44,
"DRR (%)": "100",
"drr_number": 100
},
{
"System Name": "Name 2",
"Primary Sensor": "SSSS",
"Mean Wind Speed": "4.2 m/s",
"Status": 2,
"mws_number": 6,
"DRR (%)": "100",
"drr_number": 100
}
]
My Code ->
class Home extends Component {
state = {
items:[],
isLoading:false
}
componentDidMount() {
// api
fetch('http://api.url', {
method: 'POST',
body:
JSON.stringify({"Authentication":'token'})
}).then(data => data.json() )
.then(res =>{
this.setState({isLoading:true,
items:res,}
)
});
}
render() {
return (
<>
{console.log(this.state.items[0])} // getting o/p - first obj of array
{console.log(this.state.items[0].Status)} // getting Error undef Status
{console.log(this.state.items.Status[0])} // same error undef status
</>
)
export def ....
This is my complete piece of code... I can't add api url as it is not public api :(
I want to access this data inside of the array =>(Status, System Name, etc)
how can i fetch this !!
Here, console.log(this.state.items[0]); is getting called two times;
- When the page first loads and API request is not finished.
- After the API request finishes and you call this.setState
Solution would be to check that items' length is greater than 0 before trying to use it. Try changing console.log(this.state.items[0]); to this:
if (this.state.items.length > 0) { console.log(this.state.items[0].Status); }
I would suggest you to use componentWillMount() instead of componentDidMount() becuase componentWillMount() happens before render while componentDidMount() happens after the first render.May be that help.

TypeError: Cannot read property 'url' of undefined react strapi in JSON object

I'm using strapi with react. I'm fetching a JSON object (home). If I do console.log(home) I get:
{
"id": 6,
"created_at": "2020-06-21T07:07:36.000Z",
"updated_at": "2020-06-21T07:18:40.000Z",
"HomeTextTop": "Home text here.",
"HomeTitle": "Home title here",
"Hero": {
"id": 3,
"name": "facade_pastel_summer_123664_800x600",
"alternativeText": "",
"caption": "",
"width": 800,
"height": 600,
"url": "http://someurlhere.com"
}
}
If I console.log(home.Hero) I get the appropriate:
{
"id": 3,
"name": "facade_pastel_summer_123664_800x600",
"alternativeText": "",
"caption": "",
"width": 800,
"height": 600,
"url": "http://someurlhere.com"
}
However, if I drill down and try and get just the URL console.log(home.Hero.url) I get this error:
TypeError: Cannot read property 'url' of undefined react strapi in JSON object
What am I missing here?
The 'action' fetching code is:
export const fetchHome = () => {
return dispatch => {
dispatch(fetchHomeBegin())
return fetch(`${strapiUrl}/home`, {
method: 'get',
mode: 'cors',
headers: { 'Content-Type': 'application/json' }
})
.then(res => res.json())
.then(json => {
console.log(json)
dispatch(fetchHomeSuccess(json))
})
.catch(error => dispatch(fetchHomeFail(error)))
}}
And JSON.stringify(home.Hero) gives the same result in string form
Here's what's happening.
This is likely because at the moment of reading url from Hero, Hero is
not yet defined (as the error message suggests). You could tackle this
by first confirming Hero is defined before reading url. Something like
this: console.log(home.Hero && home.Hero.url).
Though this leads to a lot of cumbersome code, and therefor (imo) it
would be better to use https://www.npmjs.com/package/immutable to
manage the data that is returned from the Strapi api.
You would then set home as an immutable object (a Map) and read url
like this: console.log(home.getIn([‘Hero’, ‘url’]). If Hero is
undefined here your application will not crash, but instead false will
be returned. - Boaz Poolman - slack.strapi

How to display images from API using Fetch API?

First of all, I'm working with the Unofficial Xbox API and I'm trying to display the images from the endpoint example CLICK HERE that is provided inn the website.
So I'm using a button with callback to a Fetch API function:
document.getElementById('getScreenshots').addEventListener('click', getScreenshots);
function getScreenshots(){
// Get data from URL
fetch('https://xboxapi.com/v2/screenshots/1144039928',{
headers: new Headers({
"X-Auth": "HERE-GOES-MY-API-KEY",
"Content-Type": "application/json",
})
})
.then((res) => res.json())
.then((data) => {
let output = '<h5>List of Recent Screenshots</h5>';
data.forEach(function(screenshot){
output += `
<ul>
<li>ID: ${screenshot.screenshotId}</li>
<li>Published at: ${screenshot.datePublished}</li>
<li><img src="${screenshot.uri}"></li>
</ul>
`;
});
document.getElementById('screenshots').innerHTML = output;
})
.catch((err) => console.log(err))
}
<button id="getScreenshots">Get Screenshots</button>
<ul id="screenshots"></ul>
but everytime that I try to request it, the images are not shown and the console trows me an error of 404 for each image. Here is what I'm talking about:
Can anybody help me with this?.
Thanks in advance.
UPDATE, this is the json data that I get when using Postman:
"thumbnails": [
{
"uri": "https://screenshotscontent-t5002.xboxlive.com/xuid-2535443387655711-public/29cd392a-6758-4926-8396-44aa77822ac6_Thumbnail.PNG",
"fileSize": 0,
"thumbnailType": "Small"
},
{
"uri": "https://screenshotscontent-t5002.xboxlive.com/xuid-2535443387655711-public/29cd392a-6758-4926-8396-44aa77822ac6_Thumbnail.PNG",
"fileSize": 0,
"thumbnailType": "Large"
}
],
"screenshotUris": [
{
"uri": "https://screenshotscontent-d5002.xboxlive.com/xuid-2535443387655711-private/29cd392a-6758-4926-8396-44aa77822ac6.PNG?sv=2015-12-11&sr=b&si=DefaultAccess&sig=5Is2Shl9m0c85yI0Vq%2BTRs3cuwYDvUR2BBWrD2%2FpkIw%3D",
"fileSize": 1255362,
"uriType": "Download",
"expiration": "2018-08-29 04:51:56"
}
],
"xuid": 2535443387655711,
"screenshotName": "",
"titleName": "Halo: The Master Chief Collection",
"screenshotLocale": "en-US",
"screenshotContentAttributes": "None",
"deviceType": "Durango",
"screenshotDetails": "https://xboxapi.com/v2/2535443387655711/screenshot-details/d1adc8aa-0a31-4407-90f2-7e9b54b0347c/29cd392a-6758-4926-8396-44aa77822ac6"
},
screenshot.screenshotUris.uri will be undefined because screenshot.screenshotUris is an array. So you need:
screenshot.screenshotUris[0].uri
or making a cycle like
screenshot.screenshotUris.forEach(function(el) { ...el.uri... })

Angular2 Display data

I am just trying to display some information that I get into my API by a service but, I can't access to it in my view while the console show me the info that I need.
my angular service
getById(id){
return new Promise((resolve, reject) => {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http.get(this.urlRoot+'entreprise/'+id, {headers:headers})
.subscribe(res=>{
let data = res.json();
resolve(data.entreprise);
}, (err) =>{
reject(err)
})
})
}
my view code sample
<div class="entreprise-name"><h1> {{ entreprise.name }} </h1></div>
the error code
Cannot read property 'id' of undefined
the API json answere
{
"entreprise": {
"id": 1,
"domaine_id": 1,
"category_id": 1,
"name": "Culry Hairs",
"location": "Rue du Travail 1, 7000 Mons, Belgium",
"description": "La coupe qui décoiffe",
"contact_person": "Marie Kristy",
"phone_number": "065/53.46.55",
"createdAt": "2017-03-05T23:00:00.000Z",
"updatedAt": "2017-03-05T23:00:00.000Z"
}
}
img of the 'console.log' of the data
That is because Angular is trying to show the properties of entreprise, while it has not received the object yet.
There are two possible solutions:
Use *ngIf="entreprise" inside the <div>, to show the content only if entreprise is not null. Inside the <div> then you can access safely to all its properties (id, name...). Following your sample, it would be:
<div class="entreprise-name" *ngIf="entreprise"><h1> {{ entreprise.name }} </h1></div>
Use the safe navigation operator (also called Elvis operator), and it is represented by symbol ?. This will prevent Angular 2 to rending the propierty until entreprise != undefined. To use it, following your sample, it would be:
<div class="entreprise-name"><h1> {{ entreprise?.name }} </h1></div>
Hope it helps you!
add *ngIf="entreprise" to the div

Categories

Resources