PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Saturday, October 15, 2022

[FIXED] How to set the button which was created using DOM to show only the details of the current row

 October 15, 2022     dom, html, javascript     No comments   

Issue

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 class="popup" id="popup-1">
      <div class="overlay"></div>
      <div class="content">
        <div class="popup-header">
          <div class="title">Country details</div>
          <button onclick="togglePopup()" class="close-button">&times;</button>
        </div>
        <div class="popup-body"></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 class="details" 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"
);

Solution

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.



Answered By - Oliwier
Answer Checked By - Cary Denson (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing