Already known weather for city should not repeat again

Question

I'm trying my first weather api APP. Here I'm trying to achive that if the city weather is already displayed , It should give the message "You already know the weather" . and should not repeat the weather

Here is my code. Anyone Please look at my code ... What is the mistake I have been made.

<div class="main">
<div class="container">
<div class="search_por">
<h2>Weather </h2>
<div class="validate_msg color_white"></div>
<form>
<label for=""></label>
<input type="search" class="input_text" value="">
<button type="submit" id="sub_button" class="srh_button">Search</button>
</form>
<!-- <canvas id="icon1" width="150" height="75"></canvas> -->
<div class="dat_weather">
<ul id="list_it">
</ul>
</div>
</div>
</div>
</div>



var get_text=document.querySelector("form");
get_text.addEventListener("submit",e=>{
e.preventDefault();
var input_val=document.querySelector('input').value;
const apiKey="bc4c7e7826d2178054ee88fe00737da0";
const url=`https://api.openweathermap.org/data/2.5/weather?q=${input_val}&appid=${apiKey}&units=metric`;


fetch(url,{method:'GET'})
.then(response=>response.json())
.then(data=>{console.log(data)


const{main,sys,weather,wind}=data;

//icons-end  
 var error_ms=document.getElementsByClassName("validate_msg")[0];
    var iconcode = weather[0].icon;
 console.log(iconcode);
var li=document.createElement("Li");
var weatherinfo=`<div class="nameci font_40" data-name="${data.name},${sys.country}"><span>${data.name}</span><sup>${sys.country}</sup></div>
<div class="temp_ic">
<img class="weat_icon" src="http://openweathermap.org/img/w/${iconcode}.png">
<div class="deg">${Math.floor( main.temp )}<sup>o</sup></div>
</div>
<div class="clear">
<div>${weather[0].description}</div>
</div>

`;
li.innerHTML=weatherinfo;

var ulid=document.getElementById("list_it");

ulid.appendChild(li);


    
var city_name=data.name;    
console.log(skycons);
var listitems=document.querySelectorAll('#list_it');


  const listArray=Array.from(listitems);
 

  
  if(listArray.length>0)
  {
      
    var filtered_array=listArray.filter(el=>{
        
        let content="";
        if(input_val.includes(','))
        {
            
            
            
            if(input_val.split(',')[1].length>2)
            {
                alert("hving 2 commos");
                inputval=input_val.split(',')[0];
                
                content=el.querySelector(".nameci span").textContent.toLowerCase();
                
                //content=el.querySelector(".nameci").innerHTML.toLowerCase();
                //content=inputval.toLowerCase();
            

            }
            
            else
            {
                content=el.querySelector(".nameci").dataset.name.toLowerCase();
            }
            alert(filtered_array);
        }
        else
        {

            content=el.querySelector(".nameci span").textContent.toLowerCase();
        }
        console.log(inputval.toLowerCase());
        return inputval.toLowerCase();
        
        
    });
    if(filtered_array.length>0)
    {
        console.log(filtered_array.length);
     error_ms.innerHTML="You Already know the weather of this country....";
     get_text.reset();
     return;
    }
    
  }
 
})
  .catch((error)=>{
  error_ms.innerHTML="Please Enter a valid city Name";
  
  
  });
  
  
  var error_ms=document.getElementsByClassName("validate_msg")[0];
error_ms.innerHTML="";
//var get_text=document.querySelector("form");
get_text.reset();

});

My full code is here: https://codepen.io/pavisaran/pen/wvJaqBg

Answer 1

Let's try keeping track of a list of displayed locations outside of the callback:

var get_text = document.querySelector("form");
// Keep Track Of Displayed Cities Here Instead
let displayed = [];


get_text.addEventListener("submit", e => {
    e.preventDefault();
    var input_val = document.querySelector('input').value;
    const apiKey = "bc4c7e7826d2178054ee88fe00737da0";
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${input_val}&appid=${apiKey}&units=metric`;

    fetch(url, {method: 'GET'})
        .then(response => response.json())
        .then(data => {
            var error_ms = document.getElementsByClassName("validate_msg")[0];
            const {main, sys, weather, wind, name} = data;
            if (displayed.length > 0) {
                // Filter Displayed Based on Current vs name from data (response)
                const filtered_array = displayed.filter(el => el === name);
                if (filtered_array.length > 0) {
                    error_ms.innerHTML = "You Already know the weather of this country....";
                    get_text.reset();
                    return Promise.resolve();
                }

            }
            // Add City To Array of Displayed Cities
            displayed.push(name);

            // Do Rest of Code to Add New City
            var iconcode = weather[0].icon;
            var li = document.createElement("Li");
            var weatherinfo = `<div class="nameci font_40" data-name="${data.name},${sys.country}"><span>${data.name}</span><sup>${sys.country}</sup></div>
<div class="temp_ic">
<img class="weat_icon" src="http://openweathermap.org/img/w/${iconcode}.png">
<div class="deg">${Math.floor(main.temp)}<sup>o</sup></div>
</div>
<div class="clear">
<div>${weather[0].description}</div>
</div>

`;
            li.innerHTML = weatherinfo;
            var ulid = document.getElementById("list_it");
            ulid.appendChild(li);            
        })
        .catch((error) => {
            error_ms.innerHTML = "Please Enter a valid city Name";
        });
    var error_ms = document.getElementsByClassName("validate_msg")[0];
    error_ms.innerHTML = "";
    get_text.reset();
});

Answer 2

You have to just check for the value which is coming from api whether it's present on your list or not. you can try this.

li.innerHTML=weatherinfo;

var ulid=document.getElementById("list_it");
var isPresent = false;
var items = ulid.getElementsByTagName("li");
    for (var i = 0; i < items.length; i++){
        if(items[i].innerHTML == li.innerHTML){
        alert("you already know the weather")
          isPresent = true;
   }
}
if(!isPresent){
   ulid.appendChild(li);
}