0

В JSON лежат 5 орехов, которые я перебираю посредством for...in и вывожу на страницу. Вопрос: как вывести только 3 ореха из 5 существующих? Буду рад любой помощи, упростил насколько это возможно. JSON файл:

{
  "cedarnut":{
      "name":"Кедровые орехи"
  },
  "hazelnut":{
      "name":"Фундук"
  },
  "pecan":{
      "name":"Пекан"
  },
  "almonds":{
      "name":"Миндаль"
  },
  "walnut":{
      "name":"Грецкие орехи"
  }
}

JS код:

window.onload = function(){
    loadNuts();
}

function loadNuts() {
//загружаю орехи на страницу
    $.getJSON('nuts.json', function (data) {
        var out = '';
        for (var key in data){
//перебираю все орехи из JSON и отрисовываю контейнер каждого ореха
            out+='<div class="nut">';
            out+='<h1>'+data[key]['name']+'</h1>';
            out+='</div>';
        }
//вывожу контейнеры орехов в один большой
        document.getElementById('nuts').innerHTML = out;
    })
}

HTML код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Eshop</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="nuts">
<!-- контейнер под орехи -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/nuts.js"></script>
</body>
</html>
1
  • очевидно, надо считать сколько ты уже вывел и когда вывел 3 - прерывать цикл
    – Grundy
    16 авг 2021 в 11:06

1 ответ 1

0

Например, завести переменную-счетчик и выходить из цикла при достижении значения 3:

function loadNuts() {
    // Загружаю орехи на страницу
    $.getJSON('nuts.json', function (data) {
        let out = '';
        let i = 0;
        
        // Перебираю все орехи из JSON и отрисовываю контейнер каждого ореха
        for (var key in data) {
            out +='<div class="nut">';
            out +='<h1>'+data[key]['name']+'</h1>';
            out +='</div>';
            i += 1;
            if (i >= 3) {
                break;
            }
        }
        // Вывожу контейнеры орехов в один большой
        document.getElementById('nuts').innerHTML = out;
    })
}
2
  • Гениально! Словно на языке это решение крутилось, да всё не знал как сказать. Нужно больше практики.. Спасибо тебе огромное, добрый человек!
    – playa
    16 авг 2021 в 11:28
  • @playa, пожалуйста :)
    – gil9red
    16 авг 2021 в 11:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.