使用jQuery創建和附加數據塊

Question

我正在創建一個web應用程序，該應用程序使用mediapedia API查詢10個wikipedia條目並以塊的形式顯示每個條目。

這裏的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); 
});