I created a table which shows the country details dynamically from the API. Now I'm trying to add a button at the end of the table which on clicked should show additional details (continents, latlng, official, timezones) in popup from the API related to that country but I'm getting all the country details when I click any of the button. How to fix that. I need to show only the country details that is present on the same row if the button on that row is clicked. I'll also share the fiddle link https://jsfiddle.net/manosurya91/1tk3dsyL/15/

HTML code:
<table>
        <thead>
          <tr>
            <th>S.NO</th>
            <th>Country</th>
            <th>Capital</th>
            <th>Currency</th>
            <th>Population</th>
            <th>Flag</th>
            <th>More details</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    <div  id="popup-1">
      <div ></div>
      <div >
        <div >
          <div >Country details</div>
          <button onclick="togglePopup()" >&times;</button>
        </div>
        <div ></div>
      </div>
JS code:
const tableBody = document.querySelector("table tbody");
const searchInput = document.querySelector("#search-country-captial");
const popup = document.querySelector(".popup");
const popupBody = document.querySelector(".popup-body");

let response, data;
const countryList = async function (url) {
  response = await fetch(url);
  data = await response.json();
  console.log(data);
  tableBody.innerHTML = data
    .map((country, i) => {
      return `<tr>
        <td>${i   1}</td><td>${country.name.common}</td>
        <td>${country.capital[0] || "-"}</td>
      <td>${
        Object.entries(country.currencies)[0]
          ? Object.entries(country.currencies)[0][1].symbol
          : "-"
      }</td>
      <td>${country.population}</td>
      <td><img src="${country.flags.svg}"/></td>
      **<td><button  onclick="togglePopup()">More details</button></td>**
      </tr>
      `;
    })
    .join("");
};

**function togglePopup() {
  popupBody.innerHTML = data.map((country, i) => {
    return `<p>Country: ${country.name.common}</p>
        <p>Continent: ${country.continents}</p>
        <p>Latitue: ${country.latlng[0]}, Longiture: ${country.latlng[1]}</p>
        <p>Official: ${country.name.official}</p>
        <p>TimeZone: ${country.timezones}</p>`;
  }).join("")
  popup.classList.toggle("active");
}**
countryList(
  "https://restcountries.com/v3.1/all?fields=name,capital,currencies,flags,population,continents,latlng,official,timezones"
);

CodePudding user response：

You were mapping through an array of all countries and were setting inner html to all countries from an array.

You need to get data from the table for a specific country and then find this country in an array of all countries you're fetching.

if (e.target.className !== "details") {
      popup.classList.toggle("active");
      return;
}

const countryName =
    e.target.parentElement.parentElement.children[1].textContent;

const [country] =  data.filter(country => country.name.common === 'Kuwait')
      
      popupBody.innerHTML = `<p>Country: ${country.name.common}</p>
                <p>Continent: ${country.continents}</p>
                <p>Latitue: ${country.latlng[0]}, Longiture: ${country.latlng[1]}</p>
                <p>Official: ${country.name.official}</p>
                <p>TimeZone: ${country.timezones}</p>`;
              
      popup.classList.t

oggle("active");
  

This code works you only need to replace 'Kuwait' with the common country name you get from your DOM.

CodePudding user response：

create full table and fetch the data into your table from API, like you were doing before. After this add button <button id="btn" onclick="toggleHide()"></button> and then give an class to the table element which element you want to display on click on button for example I give toggle class to table element which I want to show on click

function toggleHide() {
var hide = document.getElementsByClassName('toggle');
hide.style.display = 'none'; 
if (hide.style.display == 'none') {
    hide.style.display == 'block';
} else {
    hide.style.display == 'none';
}
}