Help needed with Wikipedia viewer

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>

What isn’t working? (a link to your codepen would be helpful)

My bad. I was working from the local server.

Wikipedia Viewer

The WikiMedia API is super confusing. Try using action=query&list=search&srsearch=<searchTermHere> instead of opensearch. That’ll get you results formatted in JSON.

1 Like

Yea its a headache but thanks a lot gonna try it now.

I agree, the JSON you get back in this project is a complete mess.

Try this search: var url = “https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&rvprop=content&titles=” + title + “&callback=?”;

with title being passed in by the user.

In your success callback you’ll have data of course. data.query.pages is what you’ll need for your project.

Good luck!

Thanks for the assistance guys @PortableStick, @slocodemonkey, @bagrounds.
I should be able to tackle it from here :slight_smile: