How to Sort DOM elements according to the elements of another array?

Question

So I have been trying to make a sorting functionality that could sort all the cards(children divs) according to sorted_names array which sorts all the card names. The problem is that all the card names are getting sorted in their respective cards but not the cards themselves. Unable to perform DOM manipulation wrt sorted_names array.

const cards = document.querySelectorAll('.flip-card');
const cards_array = Array.from(cards);

async function get_NFT_data() {
  const options = {
    method: "GET",
    headers: { "x-cg-demo-api-key": "CG-NhdhrCZRnCSqdjMyf3XUu9k4" },
  };
  try {
    const response = await fetch('https://api.coingecko.com/api/v3/nfts/list?order=h24_volume_usd_asc&per_page=60', options);
    const data = await response.json();

    const names = [];
    for (let i = 0; i < data.length; i++) {
      names.push(data[i].name);
    }
    const sorted_names = names.sort();

    for (let i = 0; i < sorted_names.length; i++) {
      cards_array[i].querySelector('.flip-card-back').firstElementChild.innerHTML=`<p> ${sorted_names[i]}</p>`;
    }

  } catch (error) {
    console.log(error);
  }
}

get_NFT_data();

Answer 1

Please take the following code as a basis to adapt to fit your current usage.

const cards = document.querySelectorAll('.flip-card');
const parent_card = document.querySelector('.parent-card-container');

async function get_NFT_data() {
  const options = {
    method: 'GET',
    headers: { 'x-cg-demo-api-key': 'CG-NhdhrCZRnCSqdjMyf3XUu9k4' },
  };
  try {
    const response = await fetch(
      'https://api.coingecko.com/api/v3/nfts/list?order=h24_volume_usd_asc&per_page=60',
      options
    );
    const nfts = await response.json();

    const names = [];

    // Construct an array of objects representing name & parent
    for (let i = 0; i < nfts.length; i++) {
      const nft = nfts[i];
      const flip_back = cards[i]?.querySelector('.flip-card-back');
      const { name } = nft;
      if (flip_back) flip_back.innerText = name;
      names.push({ name, parent: flip_back?.parentNode });
    }

    // sorting on basis of the name
    names.sort((a, b) => {
      return a.name.localeCompare(b.name);
    });

    const childrenCards = Array.from(parent_card.children);
    for (const card of childrenCards) {
      card.remove();
    }

    for (const name of names) {
      const { parent } = name;
      if (parent) {
        parent_card.append(parent);
      }
    }
  } catch (error) {
    console.log(error);
  }
}

get_NFT_data();

However, I don't really understand why you would like to sort the HTML. I never had to sort HTML like you have described, I believe this is certainly a design problem in your app. You should present the same card X times, just fill the name, and you won't need to sort the HTML. I would not really consider this code as 'elegant' nor 'performant' since it requires many DOM manipulations and iterations.