JSON not working ~ can anybody catch what I'm doing wrong here?

JavaScript
1

I have been trying to fix my code for couple of days now, but still couldn’t find what’s missing. I’ve even tried on other people’s code that work on their Codepens, but funny enough that it doesn’t work on mine - even though it was all correct ~ lol

So, what do I do with this project now?

2

Can you cleanup your code a little bit. There are many comments that distract me. Also what errors are you getting?

3

The ajax call its working. If you take a look into the devtools console you will see the response you get here:

success: function(data){
       console.log(data); 
      },

Now you just have to take the data response, iterate through it and display it.

4

image
image1920×1080 171 KB

I cleaned up all the comments, deleted extra comma. I still get the same error :confused:

5

As you can see from my console log, stating a reason for the error that :

Reason: CORS header ‘Access-Control-Allow-Origin’ missing

So I googled it and I have the following options:

  1. Add .htaccess file to my domain ~ how? :confused:
    jquery - CORS header 'Access-Control-Allow-Origin' missing - Stack Overflow

  2. Get a permission from Wikipedia ~ seriously? :thinking:
    javascript - The CORS Header 'Access-Control-Allow-Origin' is missing - Stack Overflow

6

To get a response your url must be like:

url: 'https://en.wikipedia.org/w/api.php?action=opensearch&search=' + searchTerm +'&callback=?',
7

Thanks, but it’s still not working. This time, with 404 error (not found lol)

image
image1920×1080 126 KB

8

use the console in browser devtools. you will see the console.log(data) response in there. codepen’s console is limited.

9

That is already my browser’s console

(Pls look again lol - It’s taken up the whole bottom side of the whole screen showing all other firefox warnings and not just taking bottom side of the output display )

10

First clean up your mixed content issue. This may be triggering additional security measures (you’re loading a background image via http).

11

Thank you :slight_smile: That is actually a very good point indeed! I just changed to loading an image with ‘https’ instead. But I still get the same error :confused:

image
image1920×1080 238 KB