Adding URLs to JSON objects

Coding Help
1

Hello,

I am remixing this site: https://year-end-list.glitch.me and I’m wondering how to add a URL for each book. I know that I could add the link in the text description, but is there a way to add a clickable URL to the image or to each book object?

I am new to JSON, so any help would be greatly appreciated!

Thank you!
Parul

2

Add A href to the image linking to the page you want the image to transfer you too!

3

Thanks for the response!

The images are currently coming from the JSON file:

{
  "title": "Sabrina",
  "author": "Nick Drnaso",
  **"cover": "https://images.gr-assets.com/books/1513309376l/37533587.jpg",**
  "review": "Sabrina is the first graphic novel to ever be nominated for the Man Booker Prize. Illustrated in mostly muted colors, it has a fantastically compelling way of representing the black hole of fake Internet news.",
  "categories": ["fiction", "graphic"]
}\

Would I add the a href to this?

4

Can you send me an invite to the project in a Private Message. I Would like to see how you have this setup!

5

I don’t think I can send PM’s yet, because I am a new Glitch user. But I can send you the links to the Glitch sites.

Hope that works!

6

I Have opened up a DM with you!

7

I wonder how many people will come by this post, with the same issue, only to not be solved by a PMing fix

8

Yes, please fill in the blanks here when you’ve figured things out, so others can benefit from your findings!

1 Like
9

As soon as we have a solution, I will be posting it here!

@polk54 Will you be able to respond soon?

1 Like
10

I have added this to your json file

      "link": "https://www.theguardian.com/books/2018/jun/02/sabrina-nick-drnaso-review-graphic-novel",

and this to the html file where it is viewed

          var cover = `<a href=${favorite.link}><img class="cover" src=${favorite.cover}></img></a>`;

I have checked the webpage to see if I did this correctly, but nothing shows up, that could be my problem, or maybe you have done something to have this happen:

2 Likes
11

Thank you for taking a look and adding this code!

I think the reason nothing was showing up is because on the first item the word link was not in quotes, whereas in the second object it is in quotes (as shown in your code above). I added quotes to the first object and now it works! I really appreciate your help!!

12

Your very welcome! :slight_smile:

1 Like