Home > Net >  How to replace the data type "undefined" with a text (string)? (weather API project)
How to replace the data type "undefined" with a text (string)? (weather API project)

Time:01-13

I am creating a project that displays the current weather of an area by name search. I fetch the API data from open weather: enter image description here

Because of that, I don't want the final project to display:

Atmospheric pressure on the sea level: undefined

I want it to return something among the lines of:

Atmospheric pressure on the sea level: not found

As you can see, the data type undefined is replaced with a string.

However, I have found a function here on this site that replaces undefined with "0" and it seems to work because it is marked as "solution". Due to my lack of knowledge tho, I cant get it to work. The code I have found:

    function replaceUndefined(displayWeather){
  if(typeof(displayWeather) === "undefined"){
      return "0"; // return 0 as replace, and end function execution
  } 
  return displayWeather; // if the above state is false, functions continues and return original value
};

Now, here is my whole JAVASCRIPT code:

let weather = {
  apiKey: "χχχχχχχχχχχχχχχ",
  fetchWeather: function (city) {
    fetch(
      "https://api.openweathermap.org/data/2.5/weather?q="  
        city  
        "&units=metric&lang=el&appid="  
        this.apiKey
    )
  
      .then((response) => {
        if (!response.ok) {
          alert("No weather found.");
          throw new Error("No weather found.");
        }
        return response.json();
      })
      .then((data) => this.displayWeather(data));
  },
  
  displayWeather: function (data) {
    const { name } = data;
    const { lon } = data.coord;
    const { lat } = data.coord;
    const { icon, description } = data.weather[0];
    const { temp, humidity } = data.main;
    const {temp_min} = data.main;
    const {temp_max} = data.main;
    const { pressure } = data.main;
    const { sea_level } = data.main;
    const { speed } = data.wind;
    const { deg } = data.wind;
    const { sunrise } = data.sys;
    const { sunset } = data.sys;
    //getting the data from the JSON API file.

  

    document.querySelector(".city").innerText = "Καιρός: "   name;
    // (".city") is the class name from the DIV in HTML file.
    document.querySelector(".lon").innerText = "Γεωγραφικό μήκος (longitude): "   lon;
    document.querySelector(".lat").innerText = "Γεωγραφικό πλάτος (latitude): "   lat;
    document.querySelector(".icon").src =
      "https://openweathermap.org/img/wn/"   icon   ".png";
    document.querySelector(".description").innerText = description;
    document.querySelector(".temp").innerText = temp   "°C";
    document.querySelector(".temp_min").innerText = "Ελάχιστη θερμοκρασία (αυτην την στιγμή): "   temp_min   "°C";
    document.querySelector(".temp_max").innerText = "Μέγιστη θερμοκρασία (αυτην την στιγμή): "   temp_max   "°C";
    document.querySelector(".humidity").innerText =
      "Υγρασία: "   humidity   "%";
    document.querySelector(".pressure").innerText = "Πιέση: "   pressure;
    document.querySelector(".sea-pressure").innerText = "Ατμοσφαιρική πίεση στο επίπεδο της θάλασσας: "   sea_level;
    document.querySelector(".wind").innerText =
      "Ταχύτητα αέρα: "   speed   " km/h";
    document.querySelector(".wind-deg").innerText = "Κατεύθυνση του αέρα (degrees): "   deg;
    document.querySelector(".sunrise").innerText = "Ανατολή Ήλιου: "   window.moment(sunrise * 1000).format('HH:mm a');
    document.querySelector(".sunset").innerText = "Δύση Ήλιου: "   window.moment(sunset * 1000).format('HH:mm a');
    document.querySelector(".weather").classList.remove("loading");
    document.body.style.backgroundImage =
      "url('https://source.unsplash.com/1600x900/?')";
  },

  
  search: function () {
    this.fetchWeather(document.querySelector(".search-bar").value);
  },
};

document.querySelector(".search button").addEventListener("click", function () {
  weather.search();
});

document
  .querySelector(".search-bar")
  .addEventListener("keyup", function (event) {
    if (event.key == "Enter") {
      weather.search();
    }
  });

weather.fetchWeather("London");
//Loads weather of London when the page opens

(some texts in the code are in greek because I want the text that is displayed on the page, to be in that language)

Thank you. Please I need solution.

CodePudding user response:

document.querySelector(".sea-pressure").innerText = "Ατμοσφαιρική πίεση στο επίπεδο της θάλασσας: "   sea_level || 'not found';

Or just for hide all the line if data doesn't exist

    if(seal_level){
       document.querySelector(".sea-pressure").innerText = "Ατμοσφαιρική πίεση στο επίπεδο της θάλασσας: "   sea_level;
    }

CodePudding user response:

let a = undefined;
let b = 25.67;
let c = a || 'not found';
let d = b || 'not found';
console.log(c);
console.log(d);

following this maybe you can change your function like this. would be easier than changing the object

  displayWeather: function (data) {
    const name = data.name || 'not found';
    const lon = data.coord.lon || 'not found';
    const lat = data.coord.lat || 'not found';
  .....
  •  Tags:  
  • Related