Çözüldü Rest country API komşu ülke bilgisi alamamak

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
Mehmet Ali KORKMAZ

Mehmet Ali KORKMAZ

Kilopat
Katılım
30 Eylül 2014
Mesajlar
27
Daha fazla  
Cinsiyet
Erkek
Merhaba, restcountry API üzerinden bir sitede ülkeleri arama kısmına yazıp listeliyorum, liste sonucu aradığım ülkenin bilgileri ve komşu ülkeleri çıkıyor. Benim sorunum buraya kadar sıkıntı yok. Fakat yapmak istediğim şey ise bulunan ülkenin komşu ülkelerinden herhangi birisine tıkladığım zaman tıkladığım ülkenin bilgilerini ve onun komşu ülkelerinin çıkmasını istiyorum. Bunun içerisinden çıkamadım bir türlü aşağıda sırasıyla, sitenin görünümü ve HTML ve JS kodlarını paylaşacağım.

country.png


Mesela yukarıda attığım sitede ben şöyle yapmayı düşündüm, komşu ülkeye tıkladıktan sonra ülkenin adını Search kısmına aktarıp Click yaparak çalışmasının daha kolay olacağını düşündüm fakat hiçbir şekilde onu oraya aktaramıyorum. Aşağıdaki kodlar yukarıdaki şekilde çalışıyor, olması için bir işlem yapmıştım fakat "is not a function" cümlesini okumaktan sinir oldum ve sildim. Temiz, yalın, çalışır halini paylaşıyorum;

bu HTML

HTML: 
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

 <!-- Font Awesome -->
 <link
 rel="stylesheet"
 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
 integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
 crossorigin="anonymous"
 referrerpolicy="no-referrer"
 />
 <!-- Custom CSS -->
 <link rel="stylesheet" href="style.css" />
 <!-- Custom JS -->
 <script src="script.js" defer></script>
 <title>Document</title>
 </head>
 <body>
 <header id="home" class="main-header">
 <div class="navbar">
 <h1 class="country">
 <i class="fa-solid fa-globe"></i>
 <span class="title">COUNTRIES</span>
 </h1>
 <nav class="input-group">
 <ul>
 <li><a href="#countries">Countries</a></li>
 </ul>
 <input
 id="txtSearch"
 type="text"
 class="form-control"
 placeholder="Search Country"
 />
 <button id="btnSearch" type="button" class="btn btn-primary">
 <i class="fa-solid fa-search"></i>
 </button>
 </nav>
 </div>
 <div class="content">
 <div class="info">
 <h2>
 Bu sayfada ülkelerin başkenti, nüfusu, para birimi ve aratılan.
 ülkenin komşu ülkeri yer almaktadır.
 </h2>
 <p>
 Bulunduğunuz ülkenin bilgilerini almak için butona tıklamanız.
 yeterli.
 </p>
 <button id="btnLocation" type="button" class="btn btn-danger">
 Click.
 </button>
 </div>
 </div>
 <div id="details">
 <div class="card">
 <div class="card-header">Arama Sonucu</div>
 <div class="card-body">
 <div class="row" id="country-details">
 <!-- <div class="col-4">
 <img src="img/de.png" alt="" class="img-fluid" />
 </div>
 <div class="col-8">
 <h3 class="card-title">Germany</h3>
 <hr />

 <div class="row">
 <div class="col-4">Nufüs:</div>
 <div class="col-8">83.2 milyon</div>
 </div>
 <div class="row">
 <div class="col-4">Resmi Dil:</div>
 <div class="col-8">German</div>
 </div>
 <div class="row">
 <div class="col-4">Başkent:</div>
 <div class="col-8">Berlin</div>
 </div>
 <div class="row">
 <div class="col-4">Para Birimi:</div>
 <div class="col-8">Euro (€)</div>
 </div>
 </div> -->
 </div>
 </div>
 </div>
 <div class="card">
 <div class="card-header">Komşu Ülkeler</div>
 <div class="card-body">
 <div class="row" id="neighbors">
 <!-- <div class="col-2">
 <div class="card">
 <img src="img/de.png" class="card-img-top" />
 <div class="card-body">
 <h6 class="card-title">Germany</h6>
 </div>
 </div>
 </div> -->
 </div>
 </div>
 </div>
 </div>
 </header>
 </body>
</html>

Bu da JS kodları;

JavaScript: 
document.querySelector("#btnSearch").addEventListener("click", () => {
 let text = document.querySelector("#txtSearch").value;
 document.querySelector("#details").style.display = "block";
 getCountry(text);
});

let taskInput = document.querySelector("#txtSearch"); // edittask.

async function getCountry(country) {
 try {
 const response = await fetch(
 "https://restcountries.com/v3.1/name/" + country.
 );

 if (!response.ok) throw new Error("ülke bulunamadı");
 const data = await response.json();
 renderCountry(data[0]);

 const countries = data[0].borders;
 if (!countries) throw new Error("komşu ülke bulunamadı.");

 const response2 = await fetch(
 "https://restcountries.com/v3.1/alpha?codes=" + countries.toString()
 );

 const neighbors = await response2.json();

 renderNeighbors(neighbors);
 } catch (err) {
 renderError(err);
 }
}

function renderCountry(data) {
 document.querySelector(".info").style.display = "none";
 document.querySelector("#country-details").innerHTML = "";
 document.querySelector("#neighbors").innerHTML = "";

 let html = `
 <div class="col-4">
 <img src="${data.flags.png}" alt="" class="img-fluid" />
 </div>
 <div class="col-8">
 <h3 class="card-title">${data.name.common}</h3>
 <hr />

 <div class="row">
 <div class="col-4">Nufüs:</div>
 <div class="col-8">${(data.population / 1000000).toFixed(
 1
 )} milyon</div>
 </div>
 <div class="row">
 <div class="col-4">Resmi Dil:</div>
 <div class="col-8">${Object.values(data.languages)}</div>
 </div>
 <div class="row">
 <div class="col-4">Başkent:</div>
 <div class="col-8">${data.capital[0]}</div>
 </div>
 <div class="row">
 <div class="col-4">Para Birimi:</div>
 <div class="col-8">${
 Object.values(data.currencies)[0].name
 } (${Object.values(data.currencies)[0].symbol})</div>
 </div>
 </div>

 `;

 document.querySelector("#details").style.opacity = 1;
 document.querySelector("#country-details").innerHTML = html;
}

function renderNeighbors(data) {
 let html = "";

 for (let country of data) {
 html += `
 <div class="col-2">
 <div class="card">
 <img src="${country.flags.png}" class="card-img-top" />
 <div class="card-body">
 <h6 class="card-title">${country.name.common}</h6>
 </div>
 </div>
 </div>

 `;
 }

 document.querySelector("#neighbors").innerHTML = html;
}

function renderError(err) {
 console.log(err.message);
}
 
Son düzenleyen: Moderatör:
Çözüm
K
renderNeighbours fonksiyonunu şu şekilde güncelleyin.
JavaScript: 
function renderNeighbors(data) {
  let html = "";

  for (let country of data) {
    html += `
            <div class="col-2" style="cursor: pointer;" onclick="getCountry('${country.name.common}')">
                <div class="card">
                  <img src="${country.flags.png}" class="card-img-top" />
                  <div class="card-body">
                    <h6 class="card-title">${country.name.common}</h6>
                  </div>
                </div>
              </div>
  
    `;
  }

  document.querySelector("#neighbors").innerHTML = html;
}
Tarihe göre sırala Puana göre sırala
renderNeighbours fonksiyonunu şu şekilde güncelleyin.
JavaScript: 
function renderNeighbors(data) {
  let html = "";

  for (let country of data) {
    html += `
            <div class="col-2" style="cursor: pointer;" onclick="getCountry('${country.name.common}')">
                <div class="card">
                  <img src="${country.flags.png}" class="card-img-top" />
                  <div class="card-body">
                    <h6 class="card-title">${country.name.common}</h6>
                  </div>
                </div>
              </div>
  
    `;
  }

  document.querySelector("#neighbors").innerHTML = html;
}
 
Artı 0 Eksi
Çözüm
kaan.w dedi:
renderNeighbours fonksiyonunu şu şekilde güncelleyin.
JavaScript: 
function renderNeighbors(data) {
  let html = "";

  for (let country of data) {
    html += `
            <div class="col-2" style="cursor: pointer;" onclick="getCountry('${country.name.common}')">
                <div class="card">
                  <img src="${country.flags.png}" class="card-img-top" />
                  <div class="card-body">
                    <h6 class="card-title">${country.name.common}</h6>
                  </div>
                </div>
              </div>
 
    `;
  }

  document.querySelector("#neighbors").innerHTML = html;
}
Genişletmek için tıkla...
Çok teşekkür ederim işi çok uzatıyormuşum demekki ben :)
 
Artı 0 Eksi

Benzer konular

5
JavaScript  JavaScript fetch API ile atılan istekler doğru mu?
2
Mesaj
13
Görüntüleme
799
kaan.w
K
saliholoji
Javascript (Node.js) saat bilgisi alma
Mesaj
6
Görüntüleme
1.119
saliholoji
saliholoji
BehknQux
JavaScript  E-Devlet API entegrasyonu
Mesaj
2
Görüntüleme
3.444
SiskinCocuk
SiskinCocuk
CodeBot
  • Çözüldü
Çözüldü  JavaScript ile metni kaydetme
Mesaj
3
Görüntüleme
2.139
CodeBot
CodeBot
0
JavaScript JSON fetch API - post ile veri oluşturma
2
Mesaj
12
Görüntüleme
2.227
sahin0640
sahin0640

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı