hey guys,
I’ve been struggling with this project three days now. I’d google around and search the forums here. I tried so many ways to attack and still it no luck.
So I’ve decided to ask for help. Can anyone point me in the right direction ? Will be thankful. Here’s my code:
$("#search-button").on("click",function(){
var $searchWord = $("#search-box").val();
var $url ="https://en.wikipedia.org/w/api.php?action=opensearch&search=" + encodeURI($searchWord) + "&limit=5&format=json&callback=?";
var getSearchResults = function(){
$.ajax({
url:$url,
type: 'GET',
dataType:'jsonp',
success: function(data){
//Here i'm looping through the array individually to get the results
$.each(data[1], function (index, $T){
var $title = '<div> <h2>' + $T + '</h2> </div>';
$(".search-results").append($title);
});
$.each(data[2] , function (index, $D ){
var $description = '<div> <p>' + $D+ '</p> </div>';
$(".search-results").append($description);
});
$.each(data[3] , function (index, $L){
var $link = '<a href=' + $L + ' + target ="_blank"> view here </a>';
$(".search-results").append($link);
});
but i need to do it in one nested for each loop to format the results to something like this:
$.each(data, function (){
$.each(this, function (index, $value ) {
var $title = '<div> <h2>' + $T + '</h2> </div>';
var $description = '<div> <p>' + $D+ '</p> </div>';
var $link = '<a href=' + $L + ' + target ="_blank"> view here </a>';
});
});
}// end of success function
});//end of ajax function
}; //end of getSearchResults function
getSearchResults();
});//end of search click event
The JSON I’ve received from the api is this when I console.log(data);
:
[“hey”, Array[5], Array[5], Array[5] ]
p.s : I am trying to display the results from the wiki API request received to format it properly like :
<div >
<h2><a href="link to wiki page"> Title goes here</h2>
<p>Description goes here</p>
</div>