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!

javascripthtmlcssjson

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

Personalize your Native Base tab design

Recently, I've delved into the world of React Native and now find myself in need of assistance with customizing my tabs. Utilizing advanced tabs by Native Base, I aim to transform this: https://i.stack.imgur.com/xhNwP.png Into something more akin ...

javascriptioscssreact-native

Align the text to the center beneath the image using Jquery's append function

I am looking to showcase a collection of fruits and vegetables through images, with the names displayed centered underneath each image. Additionally, I want to implement jQuery append functionality so that the names only appear when a specific button is cl ...

htmljquerycss

Trigger the execution of the second function upon the successful completion of the first

In the following code, my concept is to display: The clicked kingdom (clicked_id) initiates an attack on (clicked_id). https://i.stack.imgur.com/Bx8QW.png https://i.stack.imgur.com/Cg2GL.png https://i.stack.imgur.com/gUNxM.png How can I trigger the sec ...

javascripthtml

Encountering HTML content error when attempting to log in with REST API through Express on Postman

I'm currently in the process of developing a basic login API using Node.js and Express. However, I've encountered an error when testing with Postman: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

javascriptnode.jsexpress

Obtaining <script> and <div> elements from Plotly with Python

Seeking advice on the best way to extract <script> and <div> tags from the HTML output generated by Plotly's offline client. Ideally looking for a built-in method, but open to creating a custom solution if needed. I have experience with B ...

pythonhtmlplotly

JS problem with decreasing

Within a React component, I have implemented the following method: addWidget = (index) => { let endX = this.state.widgets.reduce((endX, w) => endX.w + w.w, 0) console.log(endX); if (endX === 12) endX = 0 this.setState({ wi ...

javascriptreactjsecmascript-6

"Efficiently handle multiple instances of the same name using AJAX, JavaScript

I have a PHP-generated multiple form with HTML inputs containing IDs and NAMEs. I am struggling to capture all this information. When I click the "Done" button, everything is marked as completed due to the button names. <?$command = "SELECT * FROM exam ...

javascriptphpjqueryhtmlajax

Extracting unique text values from nested div elements within list items using Selenium with Python

Within the HTML code provided, I am looking to extract the text of three variables (descr_confezione, aic_farmaco, and stato_confezione) for each of the four list items: <ul id="ul_lista_confezioni"> <li style="display: list-item;"> &l ...

pythonhtmlselenium

What is the best way to begin IMA HTML5 SDK ads with sound off?

One challenge I encountered was getting autoplay video to work on iOS 10 using HTML5. To achieve this, I utilized the following code: <video autoplay loop muted playsinline controls> <source src="http://distribution.bbb3d.renderfarming.net/vi ...

javascriptioshtmlimasdk

When trying to install express using Node.js npm, an error message 'CERT_UNTRUSTED' is preventing the installation of express

My goal is to set up express on Raspberry Pi for the purpose of using it in a REST API. However, I keep encountering an issue with SSL certification when trying to install it through npm. Despite attempting various solutions found on different forums, I ha ...

javascriptnode.jsexpressnpm

Utilizing the Loess npm module in conjunction with Angular 4

I am attempting to incorporate the Loess package into my project. The package can be found on NPM and offers various regression models for data fitting. I successfully installed it using npm install loess --save, and it now resides in the node_modules dire ...

javascriptangulartypescriptnpmtypescript-typings

Readable JSON for a user-friendly browsing experience

I've been working on a web service that outputs data in JSON format. During the debugging process, I simply open the index.php file in my browser and view the JSON data without any proper formatting or indentation. However, I found a useful tool call ...

json

The jsPdf library performs well on medium-sized screens like laptops, but when downloaded from larger monitor screens, the PDF files do not appear properly aligned

In the code snippet below, I am using html2canvas to convert HTML to PDF. The PDF download works fine on medium screens, but when viewed on larger screens, some pages appear blank and the content order gets shuffled. How can I resolve this issue so that th ...

htmljqueryangularjspdfhtml2canvas

Tips for preserving data while attempting to access the schema

Attempting to store data from a book that includes author and genre information, referenced in separate files. The issue arises when making the reference in the main schema. Although the book carries details of the book itself, it fails to establish refer ...

javascriptnode.jsmongodbexpressmongoose

When attempting to send an array value in JavaScript, it may mistakenly display as "[object Object]"

I queried the database to count the number of results and saved it as 'TotalItems'. mysql_crawl.query('SELECT COUNT(*) FROM `catalogsearch_fulltext` WHERE MATCH(data_index) AGAINST("'+n+'")', function(error, count) { var ...

javascriptangularjsarraysnode.jsexpress

The usage of arrow functions in ReactJS programming

I'm working on a React component that has the following structure: import React, { PropTypes, Component } from 'react'; import { Accordion, Panel, PanelGroup, Table } from 'react-bootstrap'; const FormCell = ({ data }) => ( ...

javascriptreactjsecmascript-6arrow-functions

Discover the power of Vue.js 3 by seamlessly integrating anonymous functions within event handlers

Is it possible to invoke an anonymous function within an event handler in Vue.js 3? I came across several options on various websites: <button @click="return function() { console.log('test')}()">Click me</button> <butto ...

javascriptvue.jsvuejs3

Choose the row based on the values in the columns

I am facing a situation where I have to choose a specific row in a datatable that displays rows in groups of 10, based on the value of its column. Previously, I successfully used the following code to select the first row. myGroupTable.row(':eq(0)&ap ...

javascriptdatatables

What are the benefits of storing dist in both a GitHub repository and on npm?

I'm curious about why some repositories include a dist folder. Shouldn't repositories just store source code and not any builds or compiled files? Let's take a look at an example with ES6 code. package.json { "files": [ "dist", ...

javascriptgithubnpmecmascript-6package.json

What is the best way to ensure uniformity in my boxes (addressing issues with whitespace and box-sizing using flexbox)?

Below is the code I have written: body { padding-top: 20px; text-align: center; background-color:black; } h1 { display: inline-block; background: white; } h1 { font-size: 30px } p { background: yellow; } .container { display: flex; ...

htmlcss