Help needed with Wikipedia viewer

Help needed with Wikipedia viewer
0

#1

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>

#2

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


#3

My bad. I was working from the local server.

Wikipedia Viewer


#4

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.


#5

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


#6

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!


#7

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