30.01.2020, 04:19
|
Интересующийся
|
|
Регистрация: 30.01.2020
Сообщений: 10
|
|
Сортировка по алфавиту json данных
Как сделать, при нажатии кнопки, сортировку name в массиве restaurants. Просто сортировку сделать просто, а вот как сделать чтобы только при нажатии кнопки сортировалось? Помогите с кодом пожалуйста, форумчане!!
<html>
<head>
<script type="text/javascript" src="restaurants.json"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
</script>
<button id="switch">Try it</button>
<div id="app"></div>
</body>
</html>
.image-list {
position:relative;
float: left;
display:inline;
}
.image-styles {
margin:15px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.image-title {
background:red;
width:80%;
position:absolute;
bottom:15px;
left:15px;
color:#f7f7f7;
text-align:center;
padding:2px;
opacity:0.6;
filter:alpha(opacity=60);
/* For IE8 and earlier */
}
window.onload = function() {
var restaurants = [
{
"blurhash": "UHH_GGD*Iq?u}?x]%MxuSgf+D*NL-.IVE3ac",
"city": "Helsinki",
"currency": "EUR",
"delivery_price": 390,
"description": "Gourmet burgerit Australiasta",
"image": "https://prod-wolt-venue-images-cdn.wolt.com/55f71c7ec04ebe16e6859aa7/121b9eccc7d813b541aa42a164fdf4ed",
"location": [
24.938988983631134,
60.173556527576
],
"name": "Woolshed \u2013 Australian Gastropub",
"online": true,
"tags": [
"gourmet",
"hamburger"
]
},
{
"blurhash": "ULLNY-4:%MRh~WI[E0?cO=D%eSbv$xaK%Loy",
"city": "Helsinki",
"currency": "EUR",
"delivery_price": 390,
"description": "Tuoretta ja herkullista ruokaa",
"image": "https://prod-wolt-venue-images-cdn.wolt.com/56fb827bad0ea370a6ab1cfc/4834fbf85136d709765adc096d8739f8",
"location": [
24.947304725428694,
60.16990544139176
],
"name": "Picnic Yliopistonkatu",
"online": true,
"tags": [
"sandwich",
"salad"
]
},
{
"blurhash": "UHNJ8q0KBGIpNMpIi]S6oxspD%nz%Mxt%2sk",
"city": "Helsinki",
"currency": "EUR",
"delivery_price": 390,
"description": "Liekill\u00e4 grillatut hampurilaiset",
"image": "https://prod-wolt-venue-images-cdn.wolt.com/5a43b26f47f236000d931ef8/17f135df32054eea1867cc4a5425c7a5",
"location": [
24.94093894958496,
60.1678058413693
],
"name": "Burger King Mannerheimintie",
"online": false,
"tags": [
"hamburger",
"chicken"
]
}
];
restaurants.sort(function(a, b){
if (a.name.toLowerCase() < b.name.toLowerCase())
return -1;
if (a.name.toLowerCase() > b.name.toLowerCase())
return 1;
alert(a.name);
})
document.getElementById("app").innerHTML = `<h1>Restaurants (${restaurants.length} results)</h1>
${restaurants.map(function(bars) {
return `
<div class="image-list">
<img class="image-styles" src="${bars.image}">
<h2 class="image-title">${bars.name}</h2>
</div>
`
}).join('')
}
`
}
|
|
30.01.2020, 07:22
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
Сообщение от Ozzi38
|
Просто сортировку сделать просто, а вот как сделать чтобы только при нажатии кнопки сортировалось?
|
Сделай сортировку в событии click какого-либо элемента на странице...
|
|
30.01.2020, 14:06
|
Интересующийся
|
|
Регистрация: 30.01.2020
Сообщений: 10
|
|
Сообщение от ksa
|
Сделай сортировку в событии click какого-либо элемента на странице...
|
Пожалуйста можете показать как это реализовать. У меня не получилось через клик, может чтото не так делаю
|
|
30.01.2020, 14:38
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
Сообщение от Ozzi38
|
У меня не получилось через клик
|
Как вариант...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded',function(){
document.querySelector('#switch').addEventListener('click',userSort);
function userSort(){
alert('Вот тут и сортируй');
};
});
</script>
</head>
<body>
<button id="switch">Try it</button>
</body>
</html>
|
|
30.01.2020, 14:51
|
Интересующийся
|
|
Регистрация: 30.01.2020
Сообщений: 10
|
|
--- Избыточное цитирование ---
А как можно в alert сортировать? Если alert используется для сообщений и еще проблема то что если в HTML вставить скрипт то он не видет массив restaurants
Последний раз редактировалось ksa, 30.01.2020 в 15:13.
|
|
30.01.2020, 15:03
|
Интересующийся
|
|
Регистрация: 30.01.2020
Сообщений: 10
|
|
--- Избыточное цитирование ---
Вот так можно?
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded',function(){
document.querySelector('#switch').addEventListener('click',userSort);
function userSort(){
restaurants.sort(function(a, b){
if (a.name.toLowerCase() < b.name.toLowerCase())
return -1;
if (a.name.toLowerCase() > b.name.toLowerCase())
return 1;
alert(a.name);
})
};
});
</script>
Пишет Uncaught ReferenceError: restaurants is not defined
at HTMLButtonElement.userSort
Последний раз редактировалось ksa, 30.01.2020 в 15:13.
|
|
30.01.2020, 15:14
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
Сообщение от Ozzi38
|
А как можно в alert сортировать?
|
Никак...
Сортировать нужно вместо alert.
|
|
30.01.2020, 15:15
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
Ozzi38, ты ведь ранее чего писал?
Сообщение от Ozzi38
|
Просто сортировку сделать просто
|
А теперь это для тебя проблема?
|
|
30.01.2020, 15:19
|
Интересующийся
|
|
Регистрация: 30.01.2020
Сообщений: 10
|
|
Последний раз редактировалось Ozzi38, 30.01.2020 в 15:29.
|
|
30.01.2020, 16:50
|
|
Профессор
|
|
Регистрация: 16.07.2014
Сообщений: 267
|
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.image-list {
position: relative;
float: left;
display: inline;
}
.image-styles {
margin: 15px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.image-title {
background: red;
width: 80%;
position: absolute;
bottom: 15px;
left: 15px;
color: #f7f7f7;
text-align: center;
padding: 2px;
opacity: 0.6;
filter: alpha(opacity=60);
/* For IE8 and earlier */
}
</style>
</head>
<body>
<button id="switch">Try it</button>
<div id="app"></div>
<script type="text/javascript">
var restaurants = [
{
blurhash: "UHH_GGD*Iq?u}?x]%MxuSgf+D*NL-.IVE3ac",
city: "Helsinki",
currency: "EUR",
delivery_price: 390,
description: "Gourmet burgerit Australiasta",
image:
"https://prod-wolt-venue-images-cdn.wolt.com/55f71c7ec04ebe16e6859aa7/121b9eccc7d813b541aa42a164fdf4ed",
location: [24.938988983631134, 60.173556527576],
name: "Woolshed \u2013 Australian Gastropub",
online: true,
tags: ["gourmet", "hamburger"]
},
{
blurhash: "ULLNY-4:%MRh~WI[E0?cO=D%eSbv$xaK%Loy",
city: "Helsinki",
currency: "EUR",
delivery_price: 390,
description: "Tuoretta ja herkullista ruokaa",
image:
"https://prod-wolt-venue-images-cdn.wolt.com/56fb827bad0ea370a6ab1cfc/4834fbf85136d709765adc096d8739f8",
location: [24.947304725428694, 60.16990544139176],
name: "Picnic Yliopistonkatu",
online: true,
tags: ["sandwich", "salad"]
},
{
blurhash: "UHNJ8q0KBGIpNMpIi]S6oxspD%nz%Mxt%2sk",
city: "Helsinki",
currency: "EUR",
delivery_price: 390,
description: "Liekill\u00e4 grillatut hampurilaiset",
image:
"https://prod-wolt-venue-images-cdn.wolt.com/5a43b26f47f236000d931ef8/17f135df32054eea1867cc4a5425c7a5",
location: [24.94093894958496, 60.1678058413693],
name: "Burger King Mannerheimintie",
online: false,
tags: ["hamburger", "chicken"]
}
];
restaurants.sort(function(a, b) {
if (a.name.toLowerCase() < b.name.toLowerCase()) return -1;
if (a.name.toLowerCase() > b.name.toLowerCase()) return 1;
alert(a.name);
});
document.addEventListener("DOMContentLoaded", function() {
document.querySelector("#switch").addEventListener("click", userSort);
function userSort() {
restaurants.sort(function(a, b) {
if (a.name.toLowerCase() < b.name.toLowerCase()) return -1;
if (a.name.toLowerCase() > b.name.toLowerCase()) return 1;
alert(a.name);
});
document.getElementById("app").innerHTML = `<h1>Restaurants (${
restaurants.length
} results)</h1>
${restaurants
.map(function(bars) {
return `
<div class="image-list">
<img class="image-styles" src="${bars.image}">
<h2 class="image-title">${bars.name}</h2>
</div>
`;
})
.join("")}
`;
}
});
</script>
</body>
</html>
У меня работает
|
|
|
|