Создание и добавление блоков данных с помощью jQuery

Question

Я создаю веб-приложение, которое запрашивает 10 записей в Википедии, используя API медиадиапии и отображает каждый из них в блоках.

Вот JSON:

https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=Shakira&limit=10&profile=fuzzy

То, что я хочу сделать, это отобразить эти записи все в блоках один друг под другом. Итак, я думал использовать for loop для повторения каждой записи, а затем с помощью jQuery добавить каждый блок, расположенный сверху вниз. Как бы я это сделал?

Вот мой codepen для простоты: http://codepen.io/tadm123/pen/oBqwYZ

Моей попытка итерации и добавлять записи в блоки:

for(var i=0;i<10;i++) 
{ 
    title = a[1][i]; 
    descr = a[2][i]; 
    link =a[3][i]; 

    var b = $('<a href = "' + link '"><div class="panel panel-info"><p class="panel-heading">' + title + '</p><p class="panel-body">' + descr + '</p></div></a>'); 

    $('#block').append(b); 
} 

Я был бы признателен за любую помощь. Благодарю.

Answer 1

Что у вас есть, кажется, работает, за исключением того, что вы не получили + после link в var b. И b может быть просто нормальной переменной - нет необходимости обертывать ее в jQuery.

$.getJSON("https://cors-anywhere.herokuapp.com/http://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=Shakira&limit=10&profile=fuzzy", function(a) { 
 

 
    for (var i = 0; i < 10; i++) { 
 
    var title = a[1][i], 
 
     descr = a[2][i], 
 
     link = a[3][i], 
 
     b = '<a href = "' + link + '"><div class="panel panel-info"><p class="panel-heading">' + title + '</p><p class="panel-body">' + descr + '</p></div></a>'; 
 

 
    $('#block').append(b); 
 
    } 
 

 
});

.form { 
 
    text-align: center; 
 
    margin: 50px; 
 
    font-size: 20px; 
 
} 
 

 
.glyphicon { 
 
    font-size: 20px; 
 
} 
 

 
.panel { 
 
    margin: auto; 
 
    width: 1000px; 
 
    border-radius: 
 
} 
 

 
.panel-heading { 
 
    font-size: 20px; 
 
    text-align: center; 
 
} 
 

 
.panel-body { 
 
    font-size: 15px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 

 
<div class="form"> 
 
    <input type="text" placeholder="Search for..."> 
 
    <button class="glyphicon glyphicon-search" aria-hidden="true"></button> 
 
</div> 
 

 

 
<div id="block"></div>

Answer 2

Вы можете перебрать массив с Foreach:

a.forEach(function(row){ 
    title= row[1]; 
    descr = row[2]; 
    link =row[3]; 

    var b = $('<a href = "' + link +'"><div class="panel panel-info"><p class="panel-heading">' + title + '</p><p class="panel-body">' + descr + '</p></div></a>'); 

    $('#block').append(b); 
});