CODEWITHSUNDEEP
htmljsonurl
Johny Stark
Johny Stark

Reputation: 35

display JSON data from URL and publish on webpage

I have no idea about JSON, please don't assume i know everything about java or json or ajax and I have a spreadsheet from Google sheets and I was able to convert the sheet data into a JSON URL (https://script.googleusercontent.com/macros/echo?user_content_key=RFP2beVz0BOAadC8lOHQi_-dajE5DI1oGW6ItREi66KTWjeP4twxaElm3krjtYa3QGuvmf_8gtYA-iMqW17UV8_5kB6YeGDjOJmA1Yb3SEsKFZqtv3DaNYcMrmhZHmUMWojr9NvTBuBLhyHCd5hHa1ZsYSbt7G4nMhEEDL32U4DxjO7V7yvmJPXJTBuCiTGh3rUPjpYM_V0PJJG7TIaKp5Mo6IQPCUHsaGMF-VMB9PySb3cSNzXDiUtZyp4RMiB6CFaNdOtIlSkpnu9Yad3Py8KiW3k6MDkf31SIMZH6H4k&lib=MbpKbbfePtAVndrs259dhPT7ROjQYJ8yx) and this is the result enter image description here and I what I need to is to display that data like this:

enter image description here

I know I may have to use some CSS somewhere for some styling, I just need to be told where. The important thing is how to use my JSON data which is NOT stored on my pc and use it as a base for my HTML element.

My plan is to later on integrate my google calendar to my spreadsheet and only use the spreadsheet to change the data on my website without having to log into my web and do things there at all after achieving this.

Upvotes: 0

Views: 1839

Answers (1)

Harmeet
Harmeet

Reputation: 35

Your question is quite broad but might only require you to learn a bit of jQuery and JavaScript (for handling JSON). In the interest of time, I can only provide a high level answer for now...

You can create your html file with an ul (unordered list) element to hold your list. In the html file, you can use jQuery to make the GET request to the JSON link you gave. The jQuery function you use to make the request will include a callback that will return a JavaScript object representing your data. For parsing this data into an object in JavaScript, I'd recommend the following link to the jQuery documentation for a JSON request.

Next, you'll want to update your HTML list. I'd recommend reading the following answer for how to push to your list via jQuery. The basic idea is that you give id's to your html elements and then jQuery allows you to modify these html elements from your JavaScript. In your case you can create li (list item) elements and append them to your ul element, accessing this ul element through the id we mentioned earlier.

You can include your CSS for each list item using the HTML link element, ie:

<link rel="stylesheet" href="li-style.css">

Upvotes: 1

Related Questions