Question:
How can I hide div if JSON does not have value?

Problem

I want that if the value in "desc" is empty, <div24> and <popup-desc> are hidden.


HTML


<div class="popup">

    <div class="popup-top" style="background-color: '+e.features[0].properties.fill+';">

        <div class="div21">'+e.features[0].properties.status+'</div>

        <div class="popup-statusdate">

            <div class="div21">'+e.features[0].properties.date+'</div>

        </div>

    </div>

    <img class="popup-img-icon" src="'+e.features[0].properties.img+'"onclick="window.open(this.src)" style="cursor: pointer;"/>

    <div class="popup-type">

        <div class="div23">'+e.features[0].properties.adress+'</div>

    </div>

    <div class="popup-desc">

        <div class="div24">'+e.features[0].properties.desc+'</div>

    </div>

</div>


buildings.geojson


{

  "type": "FeatureCollection",

  "features": [

    {

      "type": "Feature",

      "properties": {

        "status": "Demolished",

        "fill": "#C93535",

        "line": "#E63131",

        "img": "15.jpg",

        "date": "28.03.22",

        "adress": "School №51",

        "desc": ""

      },

      "id": 1

    },



I have tried something like this, but it does not work


if (e.features[0].properties.desc == ''){

  popup-desc.hide();

  div24.hide();

}


Solution

You would need something like this in your script/js file. Change the display of the div that you want to hide to none


if (e.features[0].properties.desc == ''){

  // Get a reference to the element

  const popupDiv = document.getElementsByClassName("popup-desc")[0];

  // Change display to none in order to hide the element

  popupDiv.style.display = "none";

}


Suggested blogs:

>How to use querySelectorAll()" with multiple conditions in JavaScript?

>How to fix mouseover event glitch in JavaScript?

>How to do light and dark mode in a website using HTML and JavaScript?

>How to manipulate manipulating Array object in JavaScript?

>How to merge an object into Array with the same key in JavaScript?

>Javascript Error Solved: Property 'id' does not exist on type 'T'

>Why highlighted table row using class not working in JavaScript?

>How to rename an object key based on the condition in JavaScript?

>How to sort an array based on another array in Javascript?

>Javascript: Modal not closing with a button


Nisha Patel

Nisha Patel

Submit
0 Answers