0

I have very little knowledge of REST API and Javascript. However, I now need to work on a REST API of a third party company which is sending emails for my company and to get the report data through the REST API.

The data can get through a GET method with an URL with TOKEN: https://www.probancemail.com/rest/stats/?&token={platformtoken}

Sample of JSON array as below:

{
"bounce":2,
"campaign_external_id":"RT1-",
"campaign_name":"RT1-Welcome1",
"click":19,
"delivered":333,
"open":69,
"sending_external_id":"RT-PWDE1-20170617",
"sendingtime_ts":1497650423000,
"sent":335,
"spam":0,
"template_external_id":"0193",
"unsub":6
}

What I need as a first step is to retrieve the JSON data from the third-party based on the URL with token, and parse the JSON data through Jquery and display it on the webpage as table(HTML). To achieve that, I have found the Jquery codes below:

<!DOCTYPE html>
<html>
<head>
<script>
var url = 'https://www.probancemail.com/rest/stats/?&token={platformtoken}'

$(document).ready(function () {
$.getJSON(url,
function (json) {
var tr=[];
for (var i = 0; i < json.length; i++) {
    tr.push('<tr>');
    tr.push("<td>" + json[i].campaign_name + "</td>");
    tr.push("<td>" + json[i].campaign_external_id + "</td>");
    tr.push("<td>" + json[i].sending_external_id + "</td>");
    tr.push("<td>" + json[i].sent + "</td>");
    tr.push("<td>" + json[i].delivered + "</td>");
    tr.push("<td>" + json[i].open + "</td>");
    tr.push("<td>" + json[i].click + "</td>");
    tr.push("<td>" + json[i].spam + "</td>");
    tr.push("<td>" + json[i].unsub + "</td>");
    tr.push('</tr>');
}
$('table').append($(tr.join('')));
});
</script>
</head>
<body>

<table></table>

</body>
</html>

However, this code doesn't work, I think it is because of the token, the GetJSON function doesn't get the JSON. However, I'm very new to this, so I don't have any insights.

Will you please take a look and help me figure out the problem? Any advice is welcomed! >> Maybe I shouldn't use Jquery even?

Thanks in advance!

Daisy PENG
  • 21
  • 1
  • 7

3 Answers3

0

I was not able to access the url, I got access denied, so i tried with different url, it works like this..

You can check your webservice whether it's returning anything, or if there's any CORS issue which is likely to happen

$(document).ready(function () {
var url = "https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=true"

$.getJSON(url,
function (json) {

var tr = $("<tr></tr>")
for (var i = 0; i < json.results.length; i++) {

var td = "<td>" + json.results[i].address_components[0].long_name+"</td>"
$(tr).append(td);
}

$('table').append($(tr));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<table></table>
Atiq
  • 396
  • 1
  • 3
  • 10
  • Hello Atiq thanks for your input! I have updated the code with your input and I got an error "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access." >I think it is related to the token? Is there a step I should add to authenticate the url before using it in the function? – Daisy PENG Jun 22 '17 at 08:33
  • it seems that the url that you're trying to access doesn't allow CORS access.. can you append "&callback=?" at the end of the url and try it again? – Atiq Jun 22 '17 at 08:45
  • Yes I have tried but it doesn't work...I don't understand because by entering the URL alone in the browser I can get the JSON in the webpage... Also, I have got the headers as well: Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Encoding gzip, deflate, br Accept-Language en-US,en;q=0.5 Connection keep-alive Cookie JSESSIONID=E531EFCA579352140AEC115BE6A451DD Host www.probancemail.com Upgrade-Insecure-Requests 1 User-Agent Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0 – Daisy PENG Jun 22 '17 at 09:10
0

you can test code like this:

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var data=[{
        "bounce":2,
        "campaign_external_id":"RT1-",
        "campaign_name":"RT1-Welcome1",
        "click":19,
        "delivered":333,
        "open":69,
        "sending_external_id":"RT-PWDE1-20170617",
        "sendingtime_ts":1497650423000,
        "sent":335,
        "spam":0,
        "template_external_id":"0193",
        "unsub":6
    },{
        "bounce":2,
        "campaign_external_id":"RT1-",
        "campaign_name":"RT1-Welcome1",
        "click":19,
        "delivered":333,
        "open":69,
        "sending_external_id":"RT-PWDE1-20170617",
        "sendingtime_ts":1497650423000,
        "sent":335,
        "spam":0,
        "template_external_id":"0193",
        "unsub":6
    }];
    var tr=[];
    for (var i = 0; i < data.length; i++) {
        tr.push('<tr>');
        tr.push("<td>" + data[i].campaign_name + "</td>");
        tr.push("<td>" + data[i].campaign_external_id + "</td>");
        tr.push("<td>" + data[i].sending_external_id + "</td>");
        tr.push("<td>" + data[i].sent + "</td>");
        tr.push("<td>" + data[i].delivered + "</td>");
        tr.push("<td>" + data[i].open + "</td>");
        tr.push("<td>" + data[i].click + "</td>");
        tr.push("<td>" + data[i].spam + "</td>");
        tr.push("<td>" + data[i].unsub + "</td>");
        tr.push('</tr>');
    }
    $('table').append($(tr.join('')));
})
</script>
</head>
<body>

<table></table>

</body>
</html>

or you can test your code by api write by yourself,this what you can do now.

ReggieLee
  • 1
  • 1
0

Follow this for the "No 'Access-Control-Allow-Origin' error

"No 'Access-Control-Allow-Origin' header is present on the requested resource"

Muhammad Shariq
  • 32
  • 4