A Few Beginner Problems

Code Feedback
1

Hello

I’ve got a few beginner problems. I haven’t yet tried the search function, I am just trying to insert the main page and all I get is [object Object].

http://codepen.io/jameswinfield/pen/RRgZLZ

I haven’t even got a clue how to do the search - I’ve looked at other projects that people have completed but everyone seems to use AJAX and I don’t know AJAX, hence trying to use JSON.

I say I haven’t got a clue but I do know I need to make the following url - https://en.wikipedia.org/w/api.php?action=opensearch&search=XXXXXXXXXXXXXX&limit=10&namespace=0&format=jsonfm which I can do, no problems (well perhaps).

But unlike the past two tasks I cannot find what I need to use to input a title, text, etc - it should be something like:

$.getJSON("https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json&callback=?", function(json) {

var text = json.XXXXXXXXX;

$(’#input2’).text(text);

But I don’t know what the XXXXXXXX is. There doesn’t seem to be any documentation that assists with this part.

Can anyone point me in the right direction please?

Thanks
James

2

Hi James,

You are actually using AJAX when you try to get JSON from a server, so you already know more than you think! The step you’re looking for is

var text = JSON.stringify(json)

The text won’t make any sense until you make a search with a search term, but you’re well on your way.

3

why we stringify it when it is json already?
we can access properties of object? I here access it directly [ http://codepen.io/ustvarno/pen/bpXMNN?editors=1010 ]

i’m not sure actually how it works can u explan why to use stringify?

4

In the $.getJSON() callback, write console.dir(json);

Open up the dev console, and you should see a navigable object showing the structure of the response. An alternative is to get the keys of your response object with

var keys = Object.keys(json);

then log out the keys - however, this will only show you the top level properties.

To provide another example, copy and paste this into your dev console:

var obj = { food: 'apple', colors: ['red', 'green'] };
console.dir(obj);

and explore the object. You can practice accessing the properties by typing into your console

obj.food;

or

obj.colors[1];

5

In this case, it’s really just a way to see the data. It’s not an important part of finishing the app. It may be more informative to just

console.log(json)
6

Thanks for your advice - I’ve made quite a bit of progress though now need to work out how to get my search input to work! http://codepen.io/jameswinfield/pen/wWZYjw. A job for after lunch.

My main issue remains not knowing where to get the title from, ie on the weather app I would use data.weather.humidity - I cannot find anything on the Wikipedia API to help with this.

7

Wikipedia’s API documentation is pretty poor. As always, check out

console.log(text)

You’ll be surprised at how close you are to being done.

8

Ok I’ve just found the console button at the bottom of Codepen. But it doesn’t log anything out http://codepen.io/jameswinfield/pen/wWZYjw?editors=1111

9

Use searchinput = $("#search").val(); instead of searchinput.replaceWith($("#search").val());

10

Thanks Ben - and I was using the variable in local scope rather than global scope. Progress!!!

11

¡Mia culpa! I should have made sure you knew what that meant. Your browser has a development console that will receive all of these console.log() messages, as well as others. You can find your browser’s instructions for your operating system at this link (Linux would use the Windows instructions).