Display information on a web page from an API

Coding Help
,
1

Good evening everyone,

I write this message to ask your help regarding a project that deals with the display of information on a web page which come from an API. More precisely, it’s about showing the destination and the waiting times of trains from Lyon train station. I’ve wrote down on a code already and I don’t know what’s wrong with it. If someone could help me, that’d be wonderful.

Here’s the API : https://api-ratp.pierre-grimaud.fr/v4/schedules/metros/1/gare-de-lyon/R

Here’s the html code :

Assignment 2 
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
/>

<link rel="stylesheet" href="style.css" />

Metros' destinations and waiting times 

<div class="row">
  <p id="destination" class="six columns">
    Destination
  </p>
  <p id="message" class="six columns">
    Waiting time
  </p>
</div>
<div id="schedules" class="container"></div>
<p>
  Data can be found here :
  <a
    href="https://api-ratp.pierre-grimaud.fr/v4/schedules/metros/1/gare-de-lyon/R" target="_blank"
  >
    Datalink</a
  >
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>

Here’s the JS code :

$.getJSON(
“https://api-ratp.pierre-grimaud.fr/v4/schedules/metros/1/gare-de-lyon/R”,
function(json) {
console.log(json.features[0].destination.message);
var schedules = json.features;

for (var i = 0; i < schedules.length; i = i + 1) {
  var schedules = schedules[i];
  var html=

‘

’ +
schedules.properties.destination +
‘

’ +
schedules.properties.message +
“

”
$("#schedules").append(html)

  ;
}

}
);

Thank you very much in advance !

2

Would you mind formatting your JavaScript?

Other than that, you seem to be on the right track (get it), but I have a feeling you might be getting messed up by CORS errors. I’d love to see what JavaScript errors you are getting in the console.

3

I don’t know how to format my JavaScript. But I’m going to give you the final web page so you just have to inspect the page, go to sources and see the code for the ‘main.js’ file.

Here’s the link : https://designing-with-web-assignment-2.glitch.me/

One error I saw was the fact that the 0 in this line ( console.log(json.features[0].destination.message)) is not recognized or understood but I don’t know how to fix the problem…

I have to finish this assignment for tomorrow at midnight so if you have any idea to write the code in another way and make it work, I’d really be grateful if you shared it.

4

I’m seeing an error in the console, I’ll do my best to explain them:

Uncaught TypeError: json.features is undefined

The script is looking for the features key in the JSON response from the API, but can’t find it as it doesn’t exist. I believe you will want to replace that with result (possibly even result.schedules)

Firefox gives you a very nice and visual way to view JSON:

5

I tried to replace “features” by “result” and “result.schedules” in the JS and it didn’t work. Do I have to replace some stuff in the HTML file as well ? Maybe you could make the code work and then show me where I was wrong ? Because I have to finish this evening and this is still not working…

6

I’ve coded the whole thing again starting from scratch and it worked !

Here’s the link to the web page if you are interested :https://assignment-2-final.glitch.me/

Thanks for your help !

1 Like
7

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.