Correctly putting the path of a json file to make an AJAX call

Question

I´m trying to access to a json file (timeseries.json) in order to load data in my application. I´m doing a AJAX call. I suspect the problem is in this line of my code:

req.open("GET",'JSON/timeseries.json',true);

The problem is that I don´t know how to put properly the path. I went to my explorer to copy the path of the file and I put it, but I don´t want the people to see my intermediate folders of my computer (because I have a repository in GitHub)

I have this error message from my internet browser (Chrome):

index.js:16 Access to XMLHttpRequest at 'file:///myfilepath' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

You can see an earlier version of my project at this code pen so you can get an idea of what it looks like visually.

javascript code:

var currentWeek;
var weekValue = currentWeek; //At first time weekValue points to the current week
var dailyTimePerProjectPerWeek;

function getData(){
req=new XMLHttpRequest();
req.onreadystatechange=function(){ 
  if (req.readyState === 4 && req.status === 200){ 
  dailyTimePerProjectPerWeek = JSON.parse(req.responseText); 
  } else if (req.readyState === 4 && req.status === 404){
    console.log(req.responseText);
  }

};
req.open("GET",'JSON/timeseries.json',true);
req.send();
currentWeek = dailyTimePerProjectPerWeek.length - 1;
}


function drawData(){

  chart.data = dailyTimePerProjectPerWeek[weekValue];
  chart.update();
}


function incrementWeek(){
 if(weekValue === dailyTimePerProjectPerWeek.length - 1){
   console.log("This is the current week");
 } else {
  weekValue += 1;
  drawData();
 }
}

function decrementWeek(){
 if(weekValue === 0){
   console.log("This is the oldest week of the time series");
 } else {
  weekValue -= 1;
  drawData();
 }
}



//Main Program
/*
var chart = new Chart(ctx, {
   type: 'bar',
   data: dailyTimePerProjectPerWeek[weekValue],
   options: {
      responsive: false,
      legend: {
         position: 'right' // place legend on the right side of chart
      },
      scales: {
         xAxes: [{
            stacked: true // this should be set to make the bars stacked
         }],
         yAxes: [{
            stacked: true // this also..
         }]
      }
   }
});
*/
getData();
console.log(dailyTimePerProjectPerWeek);

html code:

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Charts4DailyProgress</title>



      <link rel="stylesheet" href="css/style.css">


</head>

<body>


<body>
<h1>Weekly Time per Project</h1>
<div id="canvas-container">
<canvas id="ctx" width="1000"></canvas>
<button type="button" onclick="decrementWeek()">Previous Week</button>
<button type="button" onclick="incrementWeek()">Next Week</button>

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
  <script  src="js/index.js"></script>

</body>


</html>

json:

[{

   "labels": ["M", "TU", "W", "TH", "F", "SA", "SU"],
   "datasets": [{
      "label": "Master Project. Second Part",
      "data": [300, 480, 360, 180, 240, 300, 480],
      "backgroundColor": "#D4AF37"
   }, {
      "label": "Guild Ideas - Learning Angular",
      "data": [60, 0, 240, 180, 120, 0, 60],
      "backgroundColor": "#C0C0C0"
   }, {
      "label": "Charts For Daily Progress",
      "data": [60, 180, 120, 180, 120, 120, 0],
      "backgroundColor": "#133a7c"
   }, {
      "label": "Project Manager",
      "data": [120, 180, 120, 120, 0],
      "backgroundColor": "#109618"
   }, {
      "label": "TOOYS",
      "data": [0, 180, 120, 0, 120, 0, 0],
      "backgroundColor": "#990099"
   }, {
      "label": "Web Pc Explorer",
      "data": [0, 0, 120, 180, 0, 120, 0],
      "backgroundColor": "#54161F"
   }, {
      "label": "Mind Maps Program",
      "data": [0, 0, 180, 180, 0, 0, 0],
      "backgroundColor": "#708238"
   }, {
      "label": "Chain System",
      "data": [0, 0, 180, 0, 0, 0],
      "backgroundColor": "#E86100"
   }, {
      "label": "Code Generator",
      "data": [60, 0, 0, 0, 0, 0],
      "backgroundColor": "#F81894"
   }, {
      "label": "Electronic Brain",
      "data": [0, 0, 0, 0, 0, 0, 240],
      "backgroundColor": "#6cc4ee"
   }]
}, {
   "labels": ["M", "TU", "W", "TH", "F", "SA", "SU"],
   "datasets": [{
      "label": "Master Project. Second Part",
      "data": [0, 480, 360, 180, 240, 300, 480],
      "backgroundColor": "#D4AF37"
   }, {
      "label": "Guild Ideas - Learning Angular",
      "data": [0, 0, 240, 180, 120, 0, 60],
      "backgroundColor": "#C0C0C0"
   }, {
      "label": "Charts For Daily Progress",
      "data": [0, 180, 120, 180, 120, 120, 0],
      "backgroundColor": "#133a7c"
   }, {
      "label": "Project Manager",
      "data": [0, 180, 120, 120, 0],
      "backgroundColor": "#109618"
   }, {
      "label": "TOOYS",
      "data": [0, 180, 120, 0, 120, 0, 0],
      "backgroundColor": "#990099"
   }, {
      "label": "Web Pc Explorer",
      "data": [0, 0, 120, 180, 0, 120, 0],
      "backgroundColor": "#54161F"
   }, {
      "label": "Mind Maps Program",
      "data": [0, 0, 180, 180, 0, 0, 0],
      "backgroundColor": "#708238"
   }, {
      "label": "Chain System",
      "data": [0, 0, 180, 0, 0, 0],
      "backgroundColor": "#E86100"
   }, {
      "label": "Code Generator",
      "data": [0, 0, 0, 0, 0, 0],
      "backgroundColor": "#F81894"
   }, {
      "label": "Electronic Brain",
      "data": [0, 0, 0, 0, 0, 0, 240],
      "backgroundColor": "#6cc4ee"
   }]
}, {
   "labels": ["M", "TU", "W", "TH", "F", "SA", "SU"],
   "datasets": [{
      "label": "Master Project. Second Part",
      "data": [300, 480, 360, 180, 240, 300, 0],
      "backgroundColor": "#D4AF37"
   }, {
      "label": "Guild Ideas - Learning Angular",
      "data": [60, 0, 240, 180, 120, 0, 0],
      "backgroundColor": "#C0C0C0"
   }, {
      "label": "Charts For Daily Progress",
      "data": [60, 180, 120, 180, 120, 120, 0],
      "backgroundColor": "#133a7c"
   }, {
      "label": "Project Manager",
      "data": [120, 180, 120, 120, 0],
      "backgroundColor": "#109618"
   }, {
      "label": "TOOYS",
      "data": [0, 180, 120, 0, 120, 0, 0],
      "backgroundColor": "#990099"
   }, {
      "label": "Web Pc Explorer",
      "data": [0, 0, 120, 180, 0, 120, 0],
      "backgroundColor": "#54161F"
   }, {
      "label": "Mind Maps Program",
      "data": [0, 0, 180, 180, 0, 0, 0],
      "backgroundColor": "#708238"
   }, {
      "label": "Chain System",
      "data": [0, 0, 180, 0, 0, 0],
      "backgroundColor": "#E86100"
   }, {
      "label": "Code Generator",
      "data": [60, 0, 0, 0, 0, 0],
      "backgroundColor": "#F81894"
   }, {
      "label": "Electronic Brain",
      "data": [0, 0, 0, 0, 0, 0, 0],
      "backgroundColor": "#6cc4ee"
   }]
}, {
   "labels": ["M", "TU", "W", "TH", "F", "SA", "SU"],
   "datasets": [{
         "label": "Master Project. Second Part",
         "data": [300, 480, 360, 180, 240, 300, 0],
         "backgroundColor": "#D4AF37"
      }, {
         "label": "Guild Ideas - Learning Angular",
         "data": [60, 0, 240, 180, 120, 0, 0],
         "backgroundColor": "#C0C0C0"
      },
      {
         "label": "Master Homework",
         "data": [60, 90, 60, 90, 120, 0, 0],
         "backgroundColor": "#39FF14"
      }, {
         "label": "Charts For Daily Progress",
         "data": [60, 180, 120, 180, 120, 120, 0],
         "backgroundColor": "#133a7c"
      }, {
         "label": "Project Manager",
         "data": [120, 180, 120, 120, 0],
         "backgroundColor": "#109618"
      }, {
         "label": "TOOYS",
         "data": [0, 180, 120, 0, 120, 0, 0],
         "backgroundColor": "#990099"
      }, {
         "label": "Web Pc Explorer",
         "data": [0, 0, 120, 180, 0, 120, 0],
         "backgroundColor": "#54161F"
      }, {
         "label": "Mind Maps Program",
         "data": [0, 0, 180, 180, 0, 0, 0],
         "backgroundColor": "#708238"
      }, {
         "label": "Chain System",
         "data": [0, 0, 180, 0, 0, 0],
         "backgroundColor": "#E86100"
      }, {
         "label": "Code Generator",
         "data": [60, 0, 0, 0, 0, 0],
         "backgroundColor": "#F81894"
      }, {
         "label": "Electronic Brain",
         "data": [0, 0, 0, 0, 0, 0, 0],
         "backgroundColor": "#6cc4ee"
      }
   ]
}, {
   "labels": ["M", "TU", "W", "TH", "F", "SA", "SU"],
   "datasets": [{
         "label": "Master Project. Second Part",
         "data": [0, 30, 45, 0, 0, 0, 0],
         "backgroundColor": "#D4AF37"
      }, {
         "label": "Guild Ideas - Learning Angular",
         "data": [0, 0, 0, 0, 0, 0, 0],
         "backgroundColor": "#C0C0C0"
      },
      {
         "label": "Master Homework",
         "data": [0, 0, 0, 0, 0, 0, 0],
         "backgroundColor": "#39FF14"
      }, {
         "label": "Charts For Daily Progress",
         "data": [0, 0, 216, 0, 0, 0, 0],
         "backgroundColor": "#133a7c"
      }, {
         "label": "Project Manager",
         "data": [0, 0, 0, 0, 0, 0, 0],
         "backgroundColor": "#109618"
      }, {
         "label": "TOOYS",
         "data": [0, 0, 0, 0, 0, 0, 0],
         "backgroundColor": "#990099"
      }, {
         "label": "Web Pc Explorer",
         "data": [0, 0, 0, 0, 0, 0, 0],
         "backgroundColor": "#54161F"
      }, {
         "label": "Mind Maps Program",
         "data": [0, 0, 0, 0, 0, 0, 0],
         "backgroundColor": "#708238"
      }, {
         "label": "Chain System",
         "data": [0, 0, 0, 0, 0, 0],
         "backgroundColor": "#E86100"
      }, {
         "label": "Code Generator",
         "data": [0, 0, 0, 0, 0, 0],
         "backgroundColor": "#F81894"
      }, {
         "label": "Electronic Brain",
         "data": [0, 0, 0, 0, 0, 0, 0],
         "backgroundColor": "#6cc4ee"
      }, {
         "label": "Learning Git",
         "data": [0, 0, 50, 0, 0, 0, 0],
         "backgroundColor": "#f9e4b6"
      }, {
         "label": "Preparation for the master class",
         "data": [0, 0, 0, 0, 0, 0, 0],
         "backgroundColor": "#5D4037"
      }, {
         "label": "ZeroPlayers",
         "data": [0, 0, 300, 0, 0, 0, 0],
         "backgroundColor": "#CD7F32"
      }
   ]
}]

I am at a loss as to why you think the error message you got has led you to think you got the path wrong. — Quentin, Dec 13 '18 at 09:01
@Quentin: Because I put the path (http:///c:/mypath/timeseries.json) and I don´t get this error. But I do not want to put the absolute path to prevent people from seeing the intermediate folders of my computer on GitHub. — Mr. Baldan, Dec 13 '18 at 09:08
`http:///c:/mypath/timeseries.json` should give you an error about not being about to find an ip address for the server with the hostname `c` (unless you have given a server on your LAN that hostname, which would be … odd). — Quentin, Dec 13 '18 at 09:10
@Quentin: Yes, that´s truth. I get another error but at least, this is different. I get this error message: "GET http://mypath/Charts%20For%20Daily%20Progress/JSON/timeseries.json net::ERR_NAME_NOT_RESOLVED getData @ index.js:16 (anonymous) @ index.js:69 " — Mr. Baldan, Dec 13 '18 at 09:19
While it is different, I would consider "I can't find that" to be a step backwards from "I can find that, but won't let you read it" — Quentin, Dec 13 '18 at 09:23
@Quentin: Well... I would consider to solve first the step "I can´t find that" by putting a valid relative path.It is not true? — Mr. Baldan, Dec 13 '18 at 09:41
`JSON/timeseries.json` **is** a valid relative path, that's why moving away from it to "I can't find that" is a step backwards. — Quentin, Dec 13 '18 at 09:44
@Quentin: Then We should close this question...isn´t it? I should to open a new one trying of analyze this error (Only in case it is necessary) — Mr. Baldan, Dec 13 '18 at 10:05
I closed the question an hour ago … as a duplicate of one that explains the error! — Quentin, Dec 13 '18 at 10:06

Correctly putting the path of a json file to make an AJAX call

0 Answers0