Как получить значение из JSON в каждый блок с одним классом?

146

12 мая 2019, 14:00

Есть блок .example, всего их 9. Как в каждый блок вынести значение name из JSON.

Застопорился на том что в каждый блок с классом .example выводит все значения из массива.

<div class="exmp__block">
    <div class="example"></div>
    <div class="example"></div>
    <div class="example"></div>
    <div class="example"></div>
    <div class="example"></div>
    <div class="example"></div>
    <div class="example"></div>
    <div class="example"></div>
    <div class="example"></div>
</div>

$.getJSON('data/directories.json', function(data){
    //console.log(data);
    var i = 0;
    var name = data.response.directories;
    //var blockArr = document.querySelectorAll('.main_block');
    for( i = 0; i <= name.length; i++) {
        console.log(name.length);
        $('.main_block').append(name[i].name);
        console.log(name[i].name);
    };
});
{
    "response": {
        "directories": [
            {
                "id": 1,
                "name": "значение1"
            },
            {
                "id": 2,
                "name": "значение2"
            },
            {
                "id": 3,
                "name": "значение3"
            },
            {
                "id": 4,
                "name": "значение4"
            },
            {
                "id": 5,
                "name": "значение5"
            },
            {
                "id": 6,
                "name": "значение6"
            },
            {
                "id": 7,
                "name": "значение7"
            },
            {
                "id": 8,
                "name": "значение8"
            },
            {
                "id": 9,
                "name": "значение9"
            }
        ]
    }
}

Answer 1

Было 2 ошибки одна в условии i <= name.length; вторая в выводе

$('.main_block').append(name[i].name);
   console.log(name[i].name);

Если есть ошибки пишите

$.getJSON('data/directories.json', function(data){
  var name = data.response.directories;
  var blockArr = document.querySelectorAll('.main_block');
  for(var i = 0; i < Math.min(name.length, blockArr.length); i++) {
    $(blockArr[i]).html(name[i].name);
  };
});

Answer 2

я это вот так делаю обычно

т.е всё как у вас только в цикле прохожу по блокам и потом вывожу name

а функцию init регистрирую в ready

function init() { 
  $.getJSON("main.json", out); 
} 
 
function out(data) { 
  var out = ''; 
  for (var key in data) { 
    out += '<div class="card">' 
    out += '<h2>' + data[key].name + '<h2>' 
    out += '</div>' 
 
  } 
  $(".biling").html(out) 
} 
 
$(function() { 
  init(); 
})

пример json

{ 
  "main": { 
    "name": "name", 
    "family": "family", 
    "stage": "40", 
    "country": "counter", 
    "city": "city", 
    "experience": "4", 
    "img": "img/user.jpg" 
  } 
}