Форум

Ozzi38 · #1 (**permalink**) 30.01.2020, 04:19

Как сделать, при нажатии кнопки, сортировку 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('')
    
    }
    `
    }

ksa · #2 (**permalink**) 30.01.2020, 07:22

Сообщение от Ozzi38

Просто сортировку сделать просто, а вот как сделать чтобы только при нажатии кнопки сортировалось?

Сделай сортировку в событии click какого-либо элемента на странице...

Ozzi38 · #3 (**permalink**) 30.01.2020, 14:06

Сообщение от ksa

Сделай сортировку в событии click какого-либо элемента на странице...

Пожалуйста можете показать как это реализовать. У меня не получилось через клик, может чтото не так делаю

ksa · #4 (**permalink**) 30.01.2020, 14:38

Сообщение от 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>

Ozzi38 · #5 (**permalink**) 30.01.2020, 14:51

--- Избыточное цитирование ---

А как можно в alert сортировать? Если alert используется для сообщений и еще проблема то что если в HTML вставить скрипт то он не видет массив restaurants

Ozzi38 · #6 (**permalink**) 30.01.2020, 15:03

--- Избыточное цитирование ---

Вот так можно?

<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 · #7 (**permalink**) 30.01.2020, 15:14

Сообщение от Ozzi38

А как можно в alert сортировать?

Никак...

Сортировать нужно вместо alert.

ksa · #8 (**permalink**) 30.01.2020, 15:15

Ozzi38, ты ведь ранее чего писал?

Сообщение от Ozzi38

Просто сортировку сделать просто

А теперь это для тебя проблема?

Ozzi38 · #9 (**permalink**) 30.01.2020, 15:19

Сообщение от ksa

Ozzi38, ты ведь ранее чего писал?

А теперь это для тебя проблема?

В самом Json файле если сделать сортировку то работает, а если Html то не видет массив. Я так понимаю только вы видите и понимаете как это сделать. Помогите студенту пожалуйста

Sigizmund2012 · #10 (**permalink**) 30.01.2020, 16:50

<!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>

У меня работает

Форум

Справочник

Discord чат

Курсы javascript