-1

This is my JSON file:myjson.json

{
    "events" : [
        { "location" : "San Francisco, CA", "date" : "May 1", "map" :"JSON/num1.jpg"},
        { "location" : "Austin , TX", "date" : "May 15", "map" :"JSON/num2.jpg"},
        { "location" : "New York , NY", "date" : "May 30", "map" :"JSON/num3.jpg"}
    ]
}

Here is my main file:P1.html

<!DOCTYPE html>
<html>

<body>
    <h2>JSON User Account Example</h2>

    <script>
        var xhr = new XMLHttpRequest();

        xhr.onload = function () {
            console.log("xhr.status: " + xhr.status);
            if (xhr.status === 200) {
                responseObj = JSON.parse(xhr.responseText);
                var newContent = '';
                var i;
                for (i = 0; i < responseObj.events.length; i++) {
                    newContent += '<div class="event">';
                    newContent += '<img src="' + responseObj.events[i].map + '"';
                    newContent += 'alt="' + responseObj.events[i].location + '" />';
                    newContent += '<p><b>' + responseObj.events[i].location + '</b><br>';
                    newContent += responseObj.events[i].date + '</p>';
                    newContent += '</div>';
                }
                document.getElementById("myuser").innerHTML = newContent;
            }
        };

        xhr.open("GET", "JSON/myjson.json", true);
        xhr.send(null);
    </script>
    <div id="myuser"></div>
</body>

</html>

When I run the code the only thing that show is the title other than that, nothing. I can't figure it out. The JSON file is located in the same folder as the html file. I don't understand why it doesn't show on the web browser.

I changed the folder name to JSON to make it simpler and applied all those changes everyone pointed out. All the files are in the same folder and server and still, it does not load the images. frustrated.

So I just checked the developer tool in the browser and this is what I got:

Access to XMLHttpRequest at 'file:///C:/Users/OneDrive/Desktop/Stack/2021/JSON/myjson.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, brave, chrome-untrusted, https.

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Bobby
  • 19
  • 5
  • `responseObj - JSON.parse(xhr.responseText);` Should that be an `=` sign there as opposed to a dash / hyphen? – Rob Moll May 20 '21 at 18:47
  • In addition to @RobMoll: your path `\JSON Practice\myjson.json` looks strange. unescaped spaces can be problematic and as usually server paths uses slashes, not backslashes. – Sven Eberth May 20 '21 at 18:52
  • Also make the 'myuser' element a div or you'll be putting divs inside a `p`. – wazz May 21 '21 at 11:44

1 Answers1

-1

Update the json data to use forward slashes for the images, as mentioned in the comments. Same with the path below in xhr.open.

Also need to move the open and send statements outside of the .onload.

// code deleted.
wazz
  • 4,953
  • 5
  • 20
  • 34
  • thanks for your reply. I made all the modifications and still its not loading the images on my browser. ive tried two different browsers to check compatibililty. strange.. – Bobby May 21 '21 at 21:11
  • It has nothing to do with the browser. Update your question with the changes you've made (and add the word "EDITED", so people know it's been changed). Make sure you have updated the slashes *in the JSON file*. I bet the problem is either the slashes or the location of the images folder. Edit: also note, I've removed the slash in the `xhr.open` line. It should work but it does depend on the directory structure. – wazz May 21 '21 at 21:30
  • ok so updated the post as you said. I applied all the changes per all user on here. it still dont load. I dont get it.. It must be some syntax problem?????? – Bobby May 22 '21 at 00:03
  • You said in your update that "The JSON file is located in the ***same*** folder as the html file." This means that you should be saying `xhr.open("GET", "myjson.json", true);` *not* `"JSON/myjson.json"`. If the images are in the same folder, do the same thing (remove `JSON/`). If the images are in a folder called JSON, try `/JSON/num1.jpg` (that will look in: root > JSON folder), or `JSON/num1.jpg` (no slash). – wazz May 22 '21 at 01:36
  • I just noticed the error you're getting. What a waste. Your files have to be on your machine. ONEDRIVE is not a local server................................... – wazz May 22 '21 at 01:42
  • ahh man. thank you so much for your help you put me in the right direction. – Bobby May 22 '21 at 03:25