Получение информации по машине по её id при переходе на другую страницу

Question

Добры день! Возможно у меня глупый вопрос но все же , у меня главная страница где отображены все авто, но допустим как реализовать процесс, чтобы можно было проваливаться в эти авто по id( смотреть их характеристики, типа описание товара )Первоначально данные я беру из Json с помощью Feth далее все эти данные пропускаю через foreach и с помощью html их отображаю но, не понимаю как сделать чтобы по нажатию по кнопки (id к ней привязал) переходило на другую страницу и там отображалась об выбранном авто(пробовал через Localstorage и getAttribute() но при переходе на другую страницу Localstorage и getAttribute() не передаёт id . Возможно я что то не правильно делаю) Подскажите как это можно исполнить сделать с помощью каких методов и т.д. на JS(и если возможно без запросов к базе на NODE js) . Заранее спасибо за ответ!

     const ROOT_LIST = document.getElementById('auto');
     const ROOT_LIST2=document.getElementById('header');
    let a= [];
     let Catalog=[];
    function auto (){
      let htmlCatalog2='';
      let htmlCatalog='';
      
      //console.log(Catalog);
      Catalog.forEach(({id,name,img}) => {
        
        htmlCatalog += `<li id='block'>
        <span>ID: ${id}</span>
        <span>Name: ${name}</span>
        <img src=${img} />
         <button id="${id}"><a href="index2.html">Характеристики</a></button> 
         <!--<button id="${id}">Характеристики</button>-->
    </li>
        `;
      
       
        
        
      });
      const html= `<ul>${htmlCatalog}</ul>`;
      ROOT_LIST.innerHTML=html;
    
      
      var button =  document.querySelectorAll('button');
      for(var i=0; i<button.length; i++){
         button[i].addEventListener('click', function(e){
        //console.log(e.target.getAttribute('id'));
        Car_id=e.target.getAttribute('id');
        
      
        for(let i=0;i<=Catalog.length;i++){
          console.log(i);
          if(i==Car_id){
            htmlCatalog2+= `<li id='block'>
            <span>ID: ${Catalog[2].id}</span>
            <span>Name: ${Catalog[2].name}</span>
            <img src=${Catalog[2].img} />
           
        </li>
            `;
          
           
            //console.log("есть данные")
            //console.log(Catalog[i].id)
            //console.log(Catalog[i].name)
        
            break;}
    
           else{
             console.log('данных нет');
           }
          }
          const html2 = `<ul>${htmlCatalog2}</ul>`;
          console.log(html2);
     ROOT_LIST2.innerHTML=html2;
    }
    
         )}
       
    
         
     
    }
    
    fetch ('Volvo.json')
    .then(response => response.json())
    .then(Telo =>{
      Catalog=Telo;
      auto();
    
    
    })
    .catch(error =>{
      console.log(error);
    });

Answer 1

Первый вариант:

В вашем коде есть тэг ссылки <a href=""></a>

В аттрибут href добавьте GET строку, например:

<a href='index2.html?car_id=${id}'>Характеристики</a></button>

При переходе на страницу /index2.html?car_id=1 вы сможете получить строку с параметрами через

let searchParams = new URLSearchParams(location.search);

//получить значение переданного car_id
let carId = searchParams.get("car_id")

Далее carId, как id автомобиля, сможете подставить этот ID в данные json, чтобы их отфильтровать на конкретную тачку.

Используйте для фильтрации метод от JS .filter()

Второй вариант:

Использовать Ajax запросы на своей странице, то есть весь контент будет отображаться всегда на одной странице, на главной '/' Данные на страницу будут подгружаться ответами из response -> data, например через fetch

В таком случае постраничной навигации не будет

БЛОГ НА HUSL

Получение информации по машине по её id при переходе на другую страницу

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