XMLHttpRequest - Parsing out attributes - JS

Question

First off, this is a complete newbie question. I don't really have much idea of what I'm doing.

I have an API that returns the top 10 fund raisers from JustGiving. I can get the XML info to display, however it just dumps everything out all together. This is what JS I have so far:

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.justgiving.com/{appid}/v1/event/{eventID}/leaderboard?currency=gbp/", true);
xhr.responseJSON;
xhr.send();

xhr.onreadystatechange = processRequest;

function processRequest(e) {
    if (xhr.readyState == 4 && xhr.status == 200) {
      document.write(xhr.responseText);
    }
}

I have been look for hours at different ways to get this information output into something I can manipulate on a web page. Something that can be wrapped in a div.

Pretty sure its this I need to modify...

document.write(xhr.responseText);

Please help or point me in the right direction. Or if I've gone completely in the wrong direction let me know. There is probably already a solution out there, but as my knowledge is very limited I'm probably wording all my searches wrong.

The documentation for the API is https://api.justgiving.com/docs/resources/v1/Leaderboard/GetEventLeaderboard

Many thanks in advance.

This depends on what the API returns, is it JSON, XML or something else completely? You'll have to add an example of the data returned — adeneo, May 23 '17 at 15:17
^seconded, you mentioned that it's giving you XML. If we could see that data, we might be able to advise better on how to parse that data. — R. McManaman, May 23 '17 at 15:20
Sure @adeneo @R. McManaman . It is meant to return XML or JSON. Not sure how you tell it which you would prefer. The documentation for the API is [link](https://api.justgiving.com/docs/resources/v1/Leaderboard/GetEventLeaderboard) The output I see on codepen has no xml or json attributes or formatting. Just basic text. Example below: `http://images.justgiving.com/image/trainer-no-branding_web.jpg?imagetype=frpphoto&trymigrate=true&sourcepath=StockJason` — Ash, May 23 '17 at 15:28

score 0 · Answer 1 · answered May 23 '17 at 15:33

0

Since you're in JS, I'd avoid working with XML if at all possible.

The JustGiving API should also be able to provide a JSON response, if you include the appropriate header on your request.

Something like:

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.justgiving.com/{appid}/v1/event/{eventID}/leaderboard?currency=gbp/", true);

// Add accept header to indicate you want JSON
xhr.setRequestHeader("Accept", "application/json");
xhr.send();

xhr.onreadystatechange = processRequest;

function processRequest(e) {
    if (xhr.readyState == 4 && xhr.status == 200) {

      // Parse the JSON in the response
      document.write(JSON.parse(xhr.responseText));
    }
}

answered May 23 '17 at 15:33

Dave Allen

126
3

I'm curious why you recommend OP not use XML when working with JS? Not claiming that he should do otherwise, just trying to learn something I'm obviously ignorant of. – R. McManaman May 23 '17 at 15:35
There's nothing wrong with XML, it's just personal preference due to simplicity of parsing when working in Javascript. JSON is easily parsed into JS objects with a call to JSON.parse, whereas handling XML can be a little more involved. Both approaches will give the same data though, just comes down to personal taste! – Dave Allen May 23 '17 at 15:45
When I tried this method it wouldn't output anything. it just displays "[object Object]". Any ideas what I'm doing wrong? – Ash May 23 '17 at 15:51
@Underdog89 You're sure you're hitting the API correctly, right? – R. McManaman May 23 '17 at 15:56
@DaveAllen After today, I'm not sure! Here is the API documentation [link](https://api.justgiving.com/docs/resources/v1/Leaderboard/GetEventLeaderboard) Does this give you the info needed? – Ash May 23 '17 at 16:00
2

`[object Object]` would be the correct output, it's an object. You just have to output it somewhere that can read the object, the console comes to mind. – adeneo May 23 '17 at 16:05

XMLHttpRequest - Parsing out attributes - JS

1 Answers1