Получить данные из JSON через JQuery ajax

191

02 мая 2019, 12:00

Как вывести данные из json через ajax jquery? Заранее благодарен за любую помощь.

<button class="add_new">Создать новый</button>
<div class="">
    <p>Фильтр</p>
    <input type="search" placeholder="Поиск">
    <div class="example">Здесь будут выведены JSON-данные</div>
    <div class="example">Здесь будут выведены JSON-данные</div>
    <div class="example">Здесь будут выведены JSON-данные</div>
    <div class="example">Здесь будут выведены JSON-данные</div>
</div>
{
"resp": {
    "direct": [
        {
            "id": 1,
            "name": "значение 1"
        },
        {
            "id": 2,
            "name": "значение 2"
        },
        {
            "id": 3,
            "name": "значение 3"
        }
    ]
}

}

$.getJSON('data/direct.json', function(xhr){
  var items = [];
  $.each(xhr, function(key, val){
    items.push('id="' + key + '">' + 'name' + '');
  });
  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});

Answer 1

// api для примера 
const API = 'https://jsonplaceholder.typicode.com/users'; 
 
// точка входа 
const $app = $('#app'); 
 
// создаем нужные элементы 
const $ul = $('<ul class="list" />'); 
const $li = $('<li class="list-item" />'); 
 
$.getJSON(API, function(response) { 
  // метод [].map() - https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/map 
  const items = response.map(function(user) { 
    // jQuery.fn.clone() 
    const item = $li.clone(); 
 
    item.text(user.name); 
 
    return item; 
  }); 
   
  $ul.append(items); 
  $app.append($ul); 
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
 
<div id="app"></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Реализация парсера инстаграм профилей node.js

Пишу парсер инстаграма с использованием его приватного апи, бэкэнд часть по сути уже готова и работает, хотел задать вопрос по поводу того,...

243

javascript

Открытое аккордеон меню

Есть меню на wordpress, использовал css menu walker для аккордеона, не могу понять как заставить родительский пункт меню быть открытым если открыта дочерняя...

213

javascript