<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
{% for result in data %} {{result['image']}} {% endfor %}
</body>
</html>
[{
"image": " Intel Core i3-12100F OEM ",
"name": "https://c.dns-shop.ru/thumb/st1/fit/200/200/442241e1bcec691fb1d89f063769805c/12bea28d4c3a2ce839d01fe22f7687ac3d0e74a96ad26fb3f0ccfea92d8ce5e8.jpg",
"link": "https://www.dns-shop.ru/product/a1d8e652064fed20/processor-intel-core-i3-12100f-oem/",
"price": 8899,
"discount": null
}]
from django.http import HttpResponse
from django.shortcuts import render
from django.views.decorators.http import require_http_methods
import json
@require_http_methods(["GET"])
def index(request):
#return render_to_string('home/index.html', {})
with open('cpu.json', 'r', encoding='utf-8') as fh:
data = json.load(fh)
return render(request, 'home/index.html', {"data": data})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
{{data}}
</body>
</html>
const nextMonth = () => {
if (currMonth == 11) {
currMonth = 0;
currYear = currYear + 1;
} else {
currMonth = currMonth + 1;
}
createCalendar();
};
const prevMonth = () => {
if (currMonth == 0) {
currMonth = 11;
currYear = currYear - 1;
} else {
currMonth = currMonth - 1;
}
createCalendar();
};
document.querySelectorAll(".prev").forEach((button) => {
button.addEventListener("click", prevMonth, false);
});
document.querySelectorAll(".next").forEach((button) => {
button.addEventListener("click", () => {
console.log("next worked");
});
});
document
.querySelectorAll(".prev")
NodeList [td#prev.prev]
0
:
td#prev.prev
length
:
1
[[Prototype]]
:
NodeList
const getId = (id) => document.getElementById(id);
const getClass = (cn) => document.getElementsByClassName(cn);
const createCalendar = () =>
calendar(getId("calendar"), currDay, currMonth, currYear);
createCalendar();
getClass("prev")[0].addEventListener("click", prevMonth, false);
getClass("next")[0].addEventListener("click", nextMonth, false);
const myModule = (function() {
const privateVariable = 'Hello World';
function privateMethod() {
console.log(privateVariable);
}
return {
publicMethod: function() {
privateMethod();
}
}
})();
myModule.publicMethod();
import { Component, Input } from '@angular/core';
import { ProductsInterface } from '../../interfaces/products.interface';
@Component({
selector: 'card-component',
templateUrl: './card.component.html',
})
export class CardComponent {
@Input() public product!: ProductsInterface;
public getDiscount(price: number, discount: number): number {
return Math.ceil(((price - discount) / price) * 100);
}
}
<ng-template [ngIf]="product.discount"
><div class="product-badges">
<span class="badge onsale"
>{{ getDiscount(product.price, product.discount) }}%</span
>
</div></ng-template
>
<div class="w-3/12 flex flex-row">
<div class="ml-6 place-self-center">
<div class="text-xs text-888888 mb-5 leading-none">
Магазин: <span class="text-266cfb">dns</span>
</div>
<ul class="flex flex-row mb-9 items-baseline">
<ng-template [ngIf]="card.discount">
<li
class="text-96989c mr-1.5 text-lg line-through font-normal leading-none"
>
{{ card.discount }}₽
</li>
</ng-template>
<li class="text-272727 text-2xl font-semibold leading-none">
{{ card.price }}₽
</li>
</ul>
<button
class="uppercase bg-266cfb text-white mb-5 px-10 leading-9 text-sm font-semibold rounded transition delay-150 duration-300 ease-in-out hover:bg-272727"
>
Add to cart
</button>
<ul class="flex flex-row gap-2.5 justify-center">
<li
class="w-9 h-9 cursor-pointer bg-e8e8e8 rounded-full transition delay-150 duration-300 ease-in-out hover:bg-266cfb"
></li>
<li
class="w-9 h-9 cursor-pointer bg-e8e8e8 rounded-full transition delay-150 duration-300 ease-in-out hover:bg-266cfb"
></li>
<li
class="w-9 h-9 cursor-pointer bg-e8e8e8 rounded-full transition delay-150 duration-300 ease-in-out hover:bg-266cfb"
></li>
</ul>
</div>
</div>
Только надо учитывать, что работать с такими данными "слегка" сложнее. Добавление/удаление элементов, изменение их (если не мутировать) вызовут ряд трудностей.