How to code JavaScript to access image from JSON file?

Question

I'm supposed to create a loops to output several images with styling. I'm having trouble with the correct syntax and path to the images.

I have tried doing this with relative path (see below JavaScript file) but I still can't see the output of the images on the html.

This is my JSON file (photos.json)

const content = `
{
      "id":"3a5c5da5-5a12-4d2b-b0dd-abc28eaf810b",
      "title":"British Museum",
      "description":"The library in the British Museum in London. The British Museum Reading Room, situated in the centre of the Great Court of the British Museum, used to be the main reading room of the British Library. In 1997, this function moved to the new British Library building at St Pancras, London, but the Reading Room remains in its original form at the British Museum.",
      "location":{
         "iso":"GB",
         "country":"United Kingdom",
         "city":"London",
         "cityCode":2643743,
         "continent":"EU",
         "latitude":51.519148,
         "longitude":-0.126826
      },
      "filename":"5855729828.jpg",
      "colors":[
         {
            "hex":"#a9b490",
            "name":"Norway"
         },
         {
            "hex":"#bab984",
            "name":"Pine Glade"
         },
         {
            "hex":"#71735c",
            "name":"Finch"
         },
         {
            "hex":"#332625",
            "name":"Wood Bark"
         },
         {
            "hex":"#b99a5d",
            "name":"Barley Corn"
         }
      ]
   }
...

This is my HTML file. And I'm not supposed to add anything onto this file.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Lab 8</title>
   <link href="https://fonts.googleapis.com/css?family=Oswald:300,500" rel="stylesheet">   
   <link rel="stylesheet" type="text/css" href="css/lab08.css" />


</head>
<body>
<main id="test4">
  <header>
    <h1>Test Your Knowledge #4</h1>
  </header>  
  <section>
      <script src="js/photos.json"></script>
      <script src="js/lab08-test04.js"></script>

  </section>
</main>
</body>
</html>

And this is my Javascript file so far... The html is in the main folder, the images are in another folder named "images", so I tried to use images/img.jpg path to get the image on JavaScript but failed, please help.

const photos = JSON.parse(content);

document.write('<img src="' + photos[0].filename + '">');

That does not work but this code does, but i dont wanna do this way cus i have to use loops:

document.write('<img src="images/5855729828.jpg">');

Thanks!

@ChrisG oh sorry forgot to add on my JSON file, its the ```const content = ` ```on the very top — Scooby, Sep 19 '19 at 07:05
So it's not a JSON file then, and `content` is an object already. Your code gives `SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data` When we fix that, the next problem is that `content` isn't an Array, so there's no `content[0]`. — Chris G, Sep 19 '19 at 07:11
@Mustahsan i tried ```document.write('');``` but console says file not found. And when I checked with this ```document.write('');``` it works — Scooby, Sep 19 '19 at 07:14
@DeemAh `photos` isn't an array, according to your data here. It's just one object. Also, never concatenate arbitrary data directly into HTML like that. You're opening yourself up to potential XSS attacks and invalid HTML. Set the appropriate attributes instead. (For example, `const i = new Image(); i.src=photo.filename;`.) Also, don't use `document.write()`. If someone in this class is teaching you these methods, frankly they don't know what they're talking about and I'd be very suspicious of what they're teaching you. — Brad, Sep 19 '19 at 07:16
Your data is already object therefore no need to parse it, you can use directly use document.write('
' + '' + content.title); — Casper, Sep 19 '19 at 07:18
1. rename the photos file to `photos.js`, since it isn't JSON. 2. is `content` an array now or isn't it? You have ellipses at the end, suggesting the file continues. Does it maybe start with `content = [{`? 3. Once you can access the content data, you need to create `` elements using `document.createElement()` and append them to an existing HTML element. Do *not* use `document.write`, ever. If you instructor told you to use it, leave the course. — Chris G, Sep 19 '19 at 07:23
@Brad i tried ```const i = new Image(); i.src = photos.filename;``` but on the console it still says file not found, but this works ```document.write('');``` the problem is that the JSON file only gives me the file name and not the full path, i dont know how to implement it in the code — Scooby, Sep 19 '19 at 07:23
@DeemAh You'll need to concatenate the prefix then. `'some/path/prefix/' + photo.filename` — Brad, Sep 19 '19 at 07:24
I'm wondering if there is a `photos.filename` in the first place... see my previous two comments. — Chris G, Sep 19 '19 at 07:25
@ChrisG when i did ```console.log(photos[0].filename);``` it shows the file name — Scooby, Sep 19 '19 at 07:26
@Brad so how should i write it? Like this? ```document.write('img src="images/' + photos[0].filename);``` — Scooby, Sep 19 '19 at 07:29
Ok, so it's all about the path now. If `` works, then so should `document.write('');` But yeah, don't use `document.write`. — Chris G, Sep 19 '19 at 07:30
@DeemAh Please read the advice I and ChrisG gave you above... stop using `document.write()`. — Brad, Sep 19 '19 at 07:30
Yeah I won't use ```document.write()``` i was just doing it so I could see output, once I see it I will change it — Scooby, Sep 19 '19 at 07:33
Here's how to do it properly: https://jsfiddle.net/khrismuc/k5adzch2/ — Chris G, Sep 19 '19 at 07:35

Ahmad Hilman · Answer 1 · 2019-09-19T07:21:17.987

-2

i've tried again using your json, result is 5855729828.jpg may be you can try again

<script src="content.json"></script>
<script type="text/javascript">
    let test = JSON.parse(content);
    document.write('<img src="'+test.filename+'">');
   console.log(test.filename);
</script>

edited Sep 19 '19 at 07:21

answered Sep 19 '19 at 07:15

Ahmad Hilman

89
11

yeah result is only the file name, i have to find a way to implement the path as well in the javascript file – Scooby Sep 19 '19 at 07:24
Please don't use `document.write()`, and definitely don't concatenate the path directly into HTML. – Brad Sep 19 '19 at 07:24

score -2 · Answer 2 · answered Sep 19 '19 at 07:23

-2

Try this: in Html file add:<img src="" id="imgtag" /> and in js file add this code:

const imgtag = document.querySelector("#imgtag");
imgtag.src = content.filename

answered Sep 19 '19 at 07:23

Cosmin Ciolacu

318
2
15

cant change html or json file, only JS file – Scooby Sep 19 '19 at 07:25
Try this:`const img = document.createElement("img"); img.src=content.filename` – Cosmin Ciolacu Sep 19 '19 at 07:35
He still needs to append `img` to the document, and it turns out the main issue was the missing `images/` part in the `src.` – Chris G Sep 19 '19 at 07:37

How to code JavaScript to access image from JSON file?

2 Answers2