Eliminate any undefined data in the popup map of Javascript

I am working with JSON data that is being displayed in a pop-up on a map. In cases where there is missing data (Visibility), the word undefined appears in the pop-up.

Is there a way to remove the undefined text so that it does not show up in the pop-up?

This is the JSON data:

[{
"date":"03-03-2022",
"lat":-5.67,
"lng":80.65,
"weather":"2",
"temperature": "24.4",
"Humidity": "90",
"Wind": "100"}]

This is the JavaScript code:

<script>
for (i = 0; i < dataJSON.length; i++) {
    var weather = parseInt(dataJSON[i].weather)
    var Coordinate = new L.latLng(([dataJSON[i].lat, dataJSON[i].lng]))
    var marker = L.marker(Coordinate, { icon: customIcon })
    marker.bindPopup('Date : ' + dataJSON[i].date + 'Temperature : ' + dataJSON[i].temperature + 'RH :' + dataJSON[i].Humidity
        + 'wind :' + dataJSON[i].Wind + 'Visibility :' + dataJSON[i].Vis
    )
}

This is how the pop-up looks like:

https://i.stack.imgur.com/oUlEe.png

I would appreciate any help or suggestions. Thank you!

Answer №1

The reason you are seeing 'undefined' in the Visibility field is because the 'Vis' property is not present in the JSON data.

To fix this issue and display a blank instead of 'undefined', you can add the following code to your script.js file:

<script>
for (i = 0; i < dataJSON.length; i++) {
var weather = parseInt(dataJSON[i].weather)
var Coordinate = new L.latLng(([dataJSON[i].lat, dataJSON[i].lng]))
var marker = L.marker(Coordinate, { icon: customIcon })
marker.bindPopup('Date : ' + dataJSON[i].date + 'Temperature : ' + dataJSON[i].temperature + 'RH :' + dataJSON[i].Humidity
    + 'wind :' + dataJSON[i].Wind + (dataJSON[i].Vis == undefined?'':'Visibility :' + dataJSON[i].Vis)
)
}
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving Twitter profile information using C#

In my C# app, I am allowing users to input their name and then retrieve their profile data from Twitter without the use of an API. The URL I am currently using is: The response I receive is a JSON message like this. {"id":184937673,"id_str":"184937673"," ...

Error: The JSON file cannot be located by the @rollup/plugin-typescript plugin

I have recently set up a Svelte project and decided to leverage JSON files for the Svelte i18n package. However, I am facing challenges when trying to import a JSON file. Although the necessary package is installed, I can't figure out why the Typescri ...

Concealing items by placing them strategically between the camera and certain objects in Three.js

At the moment, my project involves utilizing three.js with several objects in the scene. One of the key features I am working on is the ability to select an object and have all other objects between the camera and the selected one hidden or removed. I am ...

What is the best way to determine which watchers are triggered in Vue.js?

Within my parent component, there are numerous nested child components. Whenever a click occurs on one of the child components, it triggers an update to the route. The parent component watches the route property and performs certain actions when it change ...

A layout featuring a grid of 3 rows and 2 columns, each containing 6

Is there a more effective method to construct this 3x2 "table" using DIVS? I'm considering using traditional tables code <table> since it's simpler, but modern practice leans towards Divs. So, what is the most polished approach to achiev ...

Sorting JSON output with usort function

I have a JSON output below. Can someone please advise on how to sort this based on the "no_count" column? $arr= {"UserHeader":[ {"id":"154", "no_count":15}, {"id":"155", "no_count":11}, {"id":"158", "no_count":13}, {"id":"159", "no_count":31}, {"id":"164 ...

Utilize MaterialUI's Shadows Type by importing it into your project

In our project, we're using Typescript which is quite particular about the use of any. There's a line of code that goes like this: const shadowArray: any = Array(25).fill('none') which I think was taken from StackOverflow. Everything s ...

The outcome of a function within the $.ajax method is transformed into a string

Trying to pass an array of IDs using the $.ajax data variable is proving to be a challenge. The array is generated by a function, and I've noticed that if I define this function outside of the $.ajax call, it works fine. However, when I place the same ...

What is the best way to iterate through one level at a time?

Imagine a scenario where the structure below cannot be changed: <xml> <element name="breakfast" type="sandwich" /> <element name="lunch"> <complexType> <element name="meat" type="string" /> <element name="vegetab ...

Tips for setting the correct width for a DIV in Internet Explorer 8

I'm facing a little problem here. I'm trying to make a DIV 434 pixels wide in IE8, but for some reason it keeps getting rendered as 414 pixels. Can anyone tell me why it's cutting off 20 pixels? <html> <head> <style type= ...

Positioning a div with text over an image in a way that it

Hey everyone, I've run into a bit of an issue with my project. I'm trying to create a system where text appears over an image, but the problem is that my div is set to absolute position and I can't switch it to relative without causing major ...

What is the process of directing a data stream into a function that is stored as a constant?

In the scenario I'm facing, the example provided by Google is functional but it relies on using pipe. My particular situation involves listening to a websocket that transmits packets every 20ms. However, after conducting some research, I have not foun ...

bootstrap modal dialog displayed on the edge of the webpage

I am facing an issue with a modal dialog that pops up when clicking on a thumbnail. The JavaScript code I used, which was sourced online, integrates a basic Bootstrap grid layout. The problem arises when half of the popup extends beyond the edge of the pa ...

What causes the initial network call to be slower than all the following ones?

Can someone help me understand why the first network call takes more than double the time of subsequent ones, even though DNS resolving should not take more than 5-50ms and only happens in the initial call? I conducted tests with famous URLs in separate in ...

Pair each element with an array of objects and add them to a fresh array

Let's consider an array of objects like, const attachmentData = [{name: 'Suman Baidh',attachment: ["123","456"]}, {name: 'John Sigma',attachment: ["789","101112]}, ...

ES6 Class Directive for Angular 1.4

I am currently exploring the possibility of incorporating a directive from version 1.4 and adapting it to resemble a 1.5 component. By utilizing bindToController and controllerAs, I aim to integrate the controller within my directive rather than using a se ...

What might be causing my Vue unit test to overlook a function?

I am in the process of creating unit tests for my component dateFormat.js using Jest. The focus is on testing the function formatDateGlobal. Here is an excerpt from the test: import DateFormat from '../dateFormat'; describe('dateFormat.js& ...

Rule for jQuery validation based on variables

I am facing an issue with validation of login asynchronously in my HTML form using the jQuery Validation Plugin. I would like to trigger a request for login validity on blur, and validate it upon receiving a response. Below is the code snippet: var login ...

In search of assistance with a persistent react.js error plaguing my work

I keep encountering an error whenever I run npm start on a new project. Does anyone have any insight on how to resolve this issue? The problem might lie within the project dependency tree rather than being a bug in Create React App. Here is what you can ...

Is there a way for me to determine the file type of a JSON document?

I'm confused about the specific format of a JSON file. Can anyone help clarify the distinction between a JSON object and a JSON file? ...