Как сделать чтобы уникальный номер id,url,media показывался в тулзах в aplication Как на примере скриншота

Question

const cardData = {
      id: // ?????,

      media: card.parentNode.childNodes[1].attributes.src,

      section: card.children[2].innerText, //categories

      title: card.childNodes[3].children[0].innerText, //card__title

      abstract: card.childNodes[3].children[0].children[1].innerText, //card__description

      published_date: card.childNodes[3].children[1].children[0].innerText, //card__date

      url: card.childNodes[3].children[1].children[0],

      read: true, //Boolean
    };

            <div class="card" id-data="${id}" >
                <div class="wrap__img">
                  <img class="card__img is-reading" src="${src}" alt="${source}" />
                  <button type="button" class="card__favorite">
                    Add to favorite
                    <svg class="icon-heart unchecked">
                      <use class="icon" href="/icons.adfc4680.svg#empty-heart"></use>
                    </svg>
                    <svg class="icon-heart is-hidden-btn">
                      <use class="icon" href="/icons.adfc4680.svg#fill-heart"></use>
                    </svg>
                  </button>
                </div>
                <div class="news__card">
                <div class="news__card--info">
                <h2 class="card__title">${title.substr(0, 55)}</h2>
                <p class="card__description">${
                  abstract.substr(0, 100) + '...'
                }</p>
                </div>
                <div class="card__footer">
                  <span class="card__date">${published_date}</span>
                  <a class="card__ref"  target="_blank"
                  rel="noreferrer noopener">Read more</a>
                </div>
                </div>
                <div class="categories">${section}</div>
                <div class="read visually-hidden">Have read</div>

Answer 1

[![введите сюда описание изображения][1]][1] [1]: https://i.stack.imgur.com/LgwGi.jpg

это то что у меня сейчас а на первом скрине как должно быть

Answer 2

Как сделать так чтобы сохраненое в local storage не дублировалось как на скрине

import axios from 'axios';
import NewsApiService from '../api/api-news';
import fetchPopularNews from '../gallery';

const gallery = document.querySelector('.news__gallery');
console.log(gallery);

gallery.addEventListener('click', e => {
  const viewedRead =
    JSON.parse(localStorage.getItem(getPopularCardData())) || '[]';
  console.log(viewedRead);
  if (e.target.nodeName !== 'A') {
    return;
  }
});

async function getPopularCardData() {
  let response = await axios.get(
    'https://api.nytimes.com/svc/mostpopular/v2/emailed/7.json?api-key=ctrAXxxlZTZKIuOVxETyJyELWuuMaa5A'
  );
  console.log(response);
  const data = response.data.results;
  saveData(data);
}

const cardSave = [];
const card = {};

function saveData(data) {
  data.map(
    ({ media, source, title, abstract, published_date, url, section, id }) => {
      let src = media.length
        ? media.map(media => media['media-metadata'][2].url)
        : 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRvFBa3G11OUBYADP7ouSBgwiiRzSYorF4dfg&usqp=CAU';

      card['id'] = `${id}`;
      card['url'] = `${url}`;
      card['source'] = `${source}`;
      card['title'] = `${title}`;
      card['section'] = `${section}`;
      card['abstract'] = `${abstract}`;
      card['published_date'] = `${published_date}`;
      card['src'] = `${src}`;

      cardSave.push(card);
      console.log(card);
      localStorage.setItem(`news`, JSON.stringify(cardSave));
    }
  );
}

БЛОГ НА HUSL

Как сделать чтобы уникальный номер id,url,media показывался в тулзах в aplication Как на примере скриншота

Ответы (2 шт):