GETting JSON data cross-site using JavaScript or JQuery

Question

I am trying to GET some JSON data from the following url. I am having trouble making this work.

You see, I am trying to integrate the school's lunch menu through NutriSlice. We are using a digital signage system called RiseVision, and they have an HTML widget. This, of course, means I can only use HTML and JavaScript - makes things more difficult for me.

My code is as follows:

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-2.2.0.js"></script>
</head>
<body>

    <div>test</div>

    <script>

    $.ajax({type: "get",
            url: "https://brf.nutrislice.com/menu/api/digest/school/black-river-falls-high-school/menu-type/lunch/date/2018/10/16/",
            data: {method: "getQuote",format: "json",lang: "en"},
            dataType: "jsonp",
            jsonp: "jsonp",
            jsonpCallback: "myJsonMethod"
    }); 

    function myJsonMethod(response){
  $("div").append(" " + response);
}
    </script>
</body>
</html>

Nothing ever works for this. Nothing gets returned. Why? I'm not sure what I am doing wrong. The link I attached above shows the Django page for the API I'm looking at here.

Your help is very much appreciated! :)

EDIT:

var obj = jQuery.parseJSON( response );
    $("div").append(" " + obj.menu_items[0]);

Further clarification: Here is an example JSON from the data I need.

{"date":"2018-10-16","menu_items":["Taco Meat","Shredded Cheddar","Tortilla Chips","Tortilla Shell"],"images":["https://client-food-images.nutrislice.com/images/WD/WDeTEDdT2YDit97pdpUq7T/1474319790_787275__taco.jpg.1024x0_q85.jpg","https://client-food-images.nutrislice.com/images/eR/eRQamewxbJbFdAAbkUa5UK/1472157292_144997__ShrededCheddarCheese-IGH.jpg.1024x0_q85.jpg","https://client-food-images.nutrislice.com/images/4N/4NrHbqSdtFSa9HjQTM4WwT/1472157795_18851__tortillachips-m.jpg.1024x0_q85.jpg","https://client-food-images.nutrislice.com/images/wx/wx7bT4QGjLD8wNuK9oMtki/1473879858_737966__tortilla.jpg.1024x0_q85.jpg"],"holiday_text":null}

score 0 · Answer 1 · answered Oct 16 '18 at 17:49

0

This will work

$.ajax({
    type: "get",
    url: "https://brf.nutrislice.com/menu/api/digest/school/black-river-falls-high-school/menu-type/lunch/date/2018/10/16/",
    data: {
        method: "getQuote",
        format: "json",
        lang: "en"
    },
    dataType: "json",
    success: function(response) {
        console.log(response); // check the console
        $(".s").append(" " + response)// this will not work properly
    }
});

keep in mind that you are trying to add a json object to an html document, that is not going to show well, you would have to take those data and use them in such a way that they are displayed correctly in the div

answered Oct 16 '18 at 17:49

Ivo Facundo

95
1
8

Alright, so why won't something like this work? (See edit in post) – Autumn Rowan Oct 16 '18 at 18:00
The response in the callback success is already a json, you dont need to parse it. Try with $("div").append(" " + response.menu_items); – Ivo Facundo Oct 16 '18 at 18:07
That doesn't work. It's confusing me heavily lol. I put the JSON in question in the post as an edit. – Autumn Rowan Oct 16 '18 at 18:21
The API you are calling have not allowed the cross-domain calls. https://stackoverflow.com/questions/50873764/cross-origin-read-blocking-corb – Rojen Oct 16 '18 at 18:28
The docs say this: HTTP 200 OK Allow: GET, HEAD, OPTIONS Content-Type: application/json Vary: Accept – Autumn Rowan Oct 16 '18 at 18:33
check this out i can do it from mi local, and i can saw the output https://imgur.com/a/eZfNrsh – Ivo Facundo Oct 16 '18 at 18:39

score 0 · Answer 2 · answered Oct 16 '18 at 17:57

0

Check the console (right click on page then inspect element). You will probably see something like this:

Seems you are running into a protection specifically designed to prevent what you are trying to do, which is to send, from an unknown location, a request for the page's data. I am not an expert on CORB but hopefully this points you in the right direction.

answered Oct 16 '18 at 17:57

jahneff

63
1
5

It is definitely meant to be accessed though :/ I do see some header info in this link....https://brf.nutrislice.com/menu/api/digest/school/black-river-falls-high-school/menu-type/lunch/date/2018/10/16/?format=api – Autumn Rowan Oct 16 '18 at 18:03
I would guess it is your browser. Look up how to disable CORB in whatever browser you use and see if that works? Maybe [this](https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome) will help – jahneff Oct 16 '18 at 18:07

score 0 · Answer 3 · answered Oct 17 '18 at 00:14

change dataType: "jsonp", to dataType: "json",. It's json, not jsonp
remove the line jsonp: "jsonp", or change to jsonp: false,
change jsonpCallback: "myJsonMethod" to success: myJsonMethod. make sure remove double quotes around myJsonMethod.
in your myJsonMethod function, change $("div").append(" " + response); to $("div").append(" " + response.menu_items[0]);

You will see 'test Taco Meat' on your screen.

GETting JSON data cross-site using JavaScript or JQuery

3 Answers3