Wikipedia Viewer Challenge Trouble

JavaScript
1

Hello, I’m kinda stuck on my wikipedia viewer challenge.
I figured it out how to get the data from the API, and made a for loop to display the content on the page, but somehow it didn’t load to the page.
What am I doing wrong?

Here’s the code:

    $(document).ready( function() {
	var userInput, url;

	function wikiSearch() {

	}

	$('#search').on('click', function(event) {
		event.preventDefault();

		userInput = encodeURIComponent($('#userInput').val());
		console.log(userInput); 
		wikiUrl = 'https://en.wikipedia.org/w/api.php?action=opensearch&search=' + userInput + '&format=json&callback=?';
		console.log(wikiUrl);

		$.ajax(
					{
						type: "GET",
						url: wikiUrl,
						async: false,
						dataType: "json",
						success: function(data) {
							$('.results').html('');

							for (var i = 0; i < data[1].lenght; i++) {
								$('.results').append('<li><a href="' + data[3][i] + '" target="_blank">' + data[1][i] + '</a><p>' + data[2][i] + '</p></li>');
							}
						}, //end success
						error: function(err){
							'<p>' + error + '</p>';
						}
					}); //AJAX call

	});
});

$('.random-btn').on('click', function(event) {
	event.preventDefault();
	window.open('https://en.wikipedia.org/wiki/Special:Random');
});

$("#mari").on('click', function(event) {
	event.preventDefault();
	window.open("https://twitter.com/mnhoffmann");
});
2

Have you taken a look at the browser console? You can find out there if you have some error.

If you’re doing this on codepen, can you share a link? It’s easier for others to help you that way :slight_smile:

3

here it is: https://codepen.io/mnhoffmann/pen/ayNBRg

4

I logged the data on the console, and I can see the data, but somehow, the loop isn’t working.

5

line 21: misspelled length.

$("#results").appendTo(li) will add #results element to the li element, instead of adding li element to results.

To avoid using + and escape characters for strings look into template literals.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
EX:

let x = "google.com";
let str = `<a href="${x}">Google</a>`;
console.log(str); // <a href="google.com">Google</a>
1 Like