Блог

Я пытаюсь создать веб-сайт, у меня есть API, который извлекает список продуктов и выдает мне файл JSON, содержащий всю необходимую мне информацию. Чего я хотел добиться, так это создать отдельную страницу для каждого продукта — динамически (так как файл JSON будет меняться). Возможно ли это с помощью javascript/html?

Спасибо

Конечно. Именно так создаются все розничные сайты.

Я предлагаю вам начать изучать некоторые фреймворки javascript, такие как ReactJS или Angular. Короче говоря, после того, как JSON получен с сервера, он передается тому, что мы называем компонентом, в качестве реквизитов (свойств). Компонент содержит некоторый jsx или html, который формирует «скелет» пользовательского интерфейса. Объекты в JSON (я предполагаю, что каждый объект является продуктом) заполняют скелет.

Это пример очень, очень базовой структуры для одного продукта. Вы можете использовать for цикл или map метод для перебора JSON, чтобы отобразить сведения о каждом продукте в следующем формате:

В следующем фрагменте реквизит может выглядеть следующим образом {productImage:"imgur.com/blabal.png",productTitle:"Product X",price:3000}

 function product(props){

return(
<div className="product-container">
<img className="product-image" src={props.productImage}
<span className="product-title">{props.productTitle}</span>
<span className="product-price">{props.price}

lt;/span>

......

</div>

)

}

 

Каждый продукт будет иметь свой собственный объект со своим собственным  productImage  ,  productTitle  и  price  среди прочего вы решите его добавить.
Таким образом, у вас будет 1000 продуктов (1000 предметов). Вы передадите продукты один за другим в приведенный выше фрагмент (в качестве реквизита), и в нем будут показаны все продукты. Вместо того, чтобы писать 1000 фрагментов для каждого продукта.
Очевидно, что я не могу научить вас реагировать на один ответ. Я настоятельно рекомендую вам изучить React. Вы можете найти множество учебных пособий на Youtube. То, что вы хотите сделать, очень просто.