How to append data from JSON file to HTML div?

Question

I am attempting to loop through the JSON file and append each instance of "sliderLink" to a preexisting DIV, however it appears it is not working.

I am getting the following error code in the console:

Access to XMLHttpRequest at 'http://www.coopertimewell.com/mainSlider.json' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

How do I fix this? But this seems to be working in jsbin

<div class="custom-container">
</div>

<script>
    //populate timeline select menu
    $(document).ready(function() {
        $.ajax({
            url: 'http://www.coopertimewell.com/mainSlider.json',
            type: 'GET',
            dataType: "json",
            crossorigin: true,
            success: fillInFields
        });
    });

    function fillInFields(data) {
        var pictureURLArray = [];
        $.each(data, function(index, value) {
            pictureURLArray.push(value.sliderLink);
        });
        var lengthDatabase = Object.keys(data).length;
        for (i = 0; i < lengthDatabase; i++) {
            $(".custom-container").append(pictureURLArray[i]);
        }
    };

</script>

@Justcode would you be able to show me your output? I am just getting a blank page. — CoopDaddio, Dec 25 '18 at 08:24
@adiga https://jsbin.com/ruxunolada/edit?html,js,output check this — Just code, Dec 25 '18 at 08:24
@Justcode for some reason I am not getting any output at all — CoopDaddio, Dec 25 '18 at 08:26
In the jsbin link you have shared, it's working fine. I'm able to see the links. Or do you want those images to be displayed instead of the links, inside your `div`? — adiga, Dec 25 '18 at 08:28
@Justcode when I copy and paste the HTML exactly into your link I get an error: "error" "@https://null.jsbin.com/runner:16:5 l — CoopDaddio, Dec 25 '18 at 08:29
Check [this](https://stackoverflow.com/questions/36568923/cors-error-with-ajax-request). — holydragon, Dec 25 '18 at 08:56
@holydragon changed to jsonp, and error did go away, but still no output. — CoopDaddio, Dec 25 '18 at 08:59
Then check [this](https://stackoverflow.com/questions/35553500/xmlhttprequest-cannot-load-xxx-no-access-control-allow-origin-header). — holydragon, Dec 25 '18 at 09:02

score 0 · Answer 1 · answered Dec 25 '18 at 08:43

0

You should check console of this request (F12 and choose Console tab)

$.ajax({
    url: 'http://www.coopertimewell.com/mainSlider.json',
    type: 'GET',
    dataType: "json",
    crossorigin: true,
    success: fillInFields
});

if have error like as: Access to XMLHttpRequest at 'http://www.coopertimewell.com/mainSlider.json' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

You should install Moesif Origin & CORS Changer extension for Chrome and setting like as below:

[ enter image description here ]

After that turn on this extension and try it.

answered Dec 25 '18 at 08:43

Trung

135
1
13

I have just checked, and yes I am in fact getting this error. Why is this and how do I fix it? – CoopDaddio Dec 25 '18 at 08:48
I don't know about that. But you can research by here:https://stackoverflow.com/questions/46522749/how-to-solve-redirect-has-been-blocked-by-cors-policy-no-access-control-allow – Trung Dec 25 '18 at 08:51
This only "solves" the problem on your own machine, you will encouter the same on other machine. – Hainan Zhao Dec 25 '18 at 09:17

score 0 · Answer 2 · answered Dec 25 '18 at 09:14

0

This is a question about how to support CORS. You should read the questions like this:Why does my JavaScript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?

Anyway, the simpliest fix for you is to change dataType: "json" to "jsonp".

answered Dec 25 '18 at 09:14

Hainan Zhao

1,962
19
19

I have tried to change the dataType from json to jsonp, and although this does remove the error I am still getting a blank page. – CoopDaddio Dec 25 '18 at 09:15

score 0 · Answer 3 · answered Dec 25 '18 at 09:27

So it turns out the actual URL was causing the issue.

Only change that I had to make:

$(document).ready(function() {
  $.ajax({
    url: 'mainSlider.json',
    type: 'GET',
    dataType: "json",
    crossorigin: true,
    success: fillInFields
  });
});

How to append data from JSON file to HTML div?

3 Answers3