Форум

Sigizmund2012 · #11 (**permalink**) 30.01.2020, 16:53

float: left; не работает вместе с display: inline;
"Property is ignored due to the display. With 'display: inline', the width, height, margin-top, margin-bottom, and float properties have no effect"

Ozzi38 · #12 (**permalink**) 30.01.2020, 16:53

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

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

Работает, потому что все данные в срипте. А у меня в задании отдельный файл. Как через отдельный файл json это сделать? Также изначально если не нажать кнопку, картинок нет и данные не загружаются, пустая страница, только кнопка есть.

Sigizmund2012 · #13 (**permalink**) 30.01.2020, 17:08

Через fetch:

document.addEventListener("DOMContentLoaded", function() {
        document.querySelector("#switch").addEventListener("click", userSort);
        function userSort() {
          fetch("restaurants.json")
            .then(response => response.json())
            .then(restaurants => {
              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("")}
            `;
            })
            .catch(error => {
              console.warn(error);
            });
        }
      });

Нужно создать файл restaurants.json, в котором:

[
  {
    "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"]
  }
]

Ozzi38 · #14 (**permalink**) 30.01.2020, 17:09

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

float: left; не работает вместе с display: inline;
"Property is ignored due to the display. With 'display: inline', the width, height, margin-top, margin-bottom, and float properties have no effect"

То есть это реализуемо только через html скрипт? и я никак не могу сделать функцию на кнопку отдельно в json файле?

<!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" />
	<script type="text/javascript">
	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"]
        }
      ];
          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>
    <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"]
        }
      ];

      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;
            return 0;
          });
          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>

А если в массиве будет данных штук 100, что делать? Мне за такой код 2 поставят ребят

Ну как вывести этот массив из json файла в html скрипт

Ozzi38 · #15 (**permalink**) 30.01.2020, 17:11

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

Через fetch:

document.addEventListener("DOMContentLoaded", function() {
        document.querySelector("#switch").addEventListener("click", userSort);
        function userSort() {
          fetch("restaurants.json")
            .then(response => response.json())
            .then(restaurants => {
              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("")}
            `;
            })
            .catch(error => {
              console.warn(error);
            });
        }
      });

Нужно создать файл restaurants.json, в котором:

[
  {
    "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"]
  }
]

Попробую, спасибо что помогаете!

Sigizmund2012 · #16 (**permalink**) 30.01.2020, 17:13

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

То есть это реализуемо только через html скрипт? и я никак не могу сделать функцию на кнопку отдельно в json файле?

Ответил выше, можно через fetch. Что такое css вас не учили ещё?

Ozzi38 · #17 (**permalink**) 30.01.2020, 17:23

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

Ответил выше, можно через fetch. Что такое css вас не учили ещё?

Да я просто уже не знал на какое сообщение прикрепить свой ответ, отлично знаю что такое css

Вообщем fetch крутая штука! Работает, осталось понять как реализовать, чтобы при при загрузки страницы отображался не сортированный список. Ведь сейчас показывает только при нажатии кнопки

Ozzi38 · #18 (**permalink**) 30.01.2020, 17:51

Спасибо всем огромное, кто помогал!

<!DOCTYPE html>
<html lang="en">
  <head>
      	<script type="text/javascript">
          fetch("restaurants.json")
            .then(response => response.json())
            .then(restaurants => {
              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("")}
            `;
            })
            .catch(error => {
              console.warn(error);
            });
    </script>
    <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">
  document.addEventListener("DOMContentLoaded", function() {
        document.querySelector("#switch").addEventListener("click", userSort);
        function userSort() {
          fetch("restaurants.json")
            .then(response => response.json())
            .then(restaurants => {
              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("")}
            `;
            })
            .catch(error => {
              console.warn(error);
            });
        }
      });
    </script>
  </body>
</html>

Sigizmund2012 · #19 (**permalink**) 30.01.2020, 18:37

Я бы перенёс первый скрипт, чтобы в коде он был ниже элемента с id "app", теоретически fetch может отработать быстрее, чем загрузится DOM и возникнет ошибка.

Форум

Справочник

Discord чат

Курсы javascript