Skip to main content
J
jmikesell1-Visitor
1-Visitor
August 24, 2018
Solved

Data URL instead of a XMLHTTPRequest, how?

  • August 24, 2018
  • 4 replies
  • 5855 views

Help mentions this as a way to access local resources loaded in downloaded/offline experiences. Does anyone know what this method looks like in practice? I've spent a few hours Googleing and trying stuff without success. I have been using XMLHTTPRequest to load a local file of JSON data, but as noted it doens't work offline.

 

So if i have a local file at "app/resources/Uploaded/myfile.json" how would load this to a variable using the "Data URL" method? I can say that below does not work.

myData= JSON.parse("data:,/app/resources/Uploaded/myfile.json")
// or
myData = JSON.parse("data:/app/resources/Uploaded/myfile.json")

 

Best answer by jmikesell

After trying every single method I could find on the internet I finally found one that does what I want. While @ClayHelberg proposed solution to use loadResourceScript does accomplish this it requires the object name to be in the JSON file which is not proper and makes it a JS file, as in the file needs to begin with myObjectName = { .... }, where a properly formatted JSON file should begin with just a curly brace "{". Having the name in the file creates dependencies between the JSON file and main JS file I don't want to manage. This was the benefit of my previous XMLHttp method you got to define the name of the object as you read it in.

 

So here is what worked for me, I have confirmed this works in both online and downloaded offline experiences.

 

$http.get('app/resources/Uploaded/test.json').success(function (data) {
 httpJSON = data;
 console.log('$http load = ', httpJSON); //test the load
});

 

4 replies

C
ClayHelberg18-Opal
18-Opal
August 27, 2018

Do you have control of the JSON files, and are they static? If so, you could try moving the variable assignment into the file and then load it as a regular JS file with $scope.app.nf.loadResourceScript().

J
jmikesell1-VisitorAuthor
1-Visitor
August 27, 2018

@ClayHelberg thanks in advance for the help.

I think i'm having scope problems with this method. I can see the object loaded via loadResourceScript in the global scope in debug but i can't access it from my experience JS.

 

So if this what my JSON file "myJSONFile.json" looks like:

myJSON = {
 "0": {
 "name": {
 "first": "Bill",
 "last": "Barner"
 }
 },
 "1": {
 "name": {
 "first": "Joe",
 "last": "Smoe"
 }
 }
};

And i do this in the Home.JS:

$scope.app.fn.loadResourceScript("Uploaded/myJSONFile.json");
//that loads in to global scope

console.log(myJSON); //but something like this doesn't work
C
ClayHelberg18-Opal
18-Opal
August 27, 2018

You might need to stash it in the $scope to make it visible. So instead of

myJSON = {
 ...
}

try this:

$scope.myJSON = {
 ...
}
W
whity16-Pearl
16-Pearl
September 13, 2018

Hey, I found your interesting post and tried it on my own. I took @jmikesell JSON file and safed it in the upload folder. 

I modified the code for the home.js a little bit:

 

$scope.readjson = function() {
$scope.app.fn.loadResourceScript("Uploaded/myJSONFile.json");
setTimeout(function () {
console.log(myJSON);
clearInterval(timerId);
}
, 500);
}

 

I found out, that, when calling the function once and without a time delay, you get an error:

"Uncaught ReferenceError: myJSON is not defined"

As soon, as you call it a second time or with a delay, everything works fine. 

C
ClayHelberg18-Opal
18-Opal
September 13, 2018

Yes, loadResourceScript() probably should have been defined to return a Promise, so you could write something like this:

$scope.readjson = function() {
  $scope.app.fn.loadResourceScript("Uploaded/myJSONFile.json")
 .then(function() { console.log(myJSON); });
}

The problem with the timeout approach is that it's not general. For example, if myJSONfile.json is very large, or if the data connection is slow, 500ms might not be long enough to ensure that the entire file is read and parsed.

 

After looking at it again, loadResourceScript() is probably not the best approach for this, due to these issues. It might be better to write your own version that handles the asynchronous loading better. Something like this:

$scope.asyncLoadScript = function (fname) {
 return new Promise((resolve, reject) => {
 if(fname) {
 var head = document.head || document.getElementsByTagName('head')[0],
 script = document.createElement('script');
 script.async = true;
 script.onload = resolve;
 script.onerror = reject;
 script.type = 'text/javascript';
 script.src=fname;
 head.appendChild(script);
 }
 });
}

Now you can use the promise to make sure your code doesn't try to use the JSON object before it's ready:

$scope.testJSON = function() {
 $scope.asyncLoadScript("app/resources/Uploaded/JSONTest.js")
 .then(function() { console.log(myJSON) }, 
 function() { console.log("Oops, something went wrong"); });
}

 

 

    W
    whity16-Pearl
    16-Pearl
    September 14, 2018

    Thanks, that works great!

    J
    jmikesell1-VisitorAuthorAnswer
    1-Visitor
    October 2, 2018

    After trying every single method I could find on the internet I finally found one that does what I want. While @ClayHelberg proposed solution to use loadResourceScript does accomplish this it requires the object name to be in the JSON file which is not proper and makes it a JS file, as in the file needs to begin with myObjectName = { .... }, where a properly formatted JSON file should begin with just a curly brace "{". Having the name in the file creates dependencies between the JSON file and main JS file I don't want to manage. This was the benefit of my previous XMLHttp method you got to define the name of the object as you read it in.

     

    So here is what worked for me, I have confirmed this works in both online and downloaded offline experiences.

     

    $http.get('app/resources/Uploaded/test.json').success(function (data) {
 httpJSON = data;
 console.log('$http load = ', httpJSON); //test the load
});

     

      C
      ClayHelberg18-Opal
      18-Opal
      October 2, 2018

      Yes, that's a much more elegant solution than mine. Nicely done!

      W
      whity16-Pearl
      16-Pearl
      November 30, 2018

      Is it also possible to write into the json-file?

      I tried this:

      $scope.jayson = function() {
      var jsonfile = $http.get('app/resources/Uploaded/test.json');
      var Username = $scope.app.mdl['CurrentSessionInfo'].svc['GetCurrentUser'].data[0].result;
      console.log("Trying to save. Username: "+Username);

      $http.post('app/resources/Uploaded/test.json',{'id': Username})
      .success(function(response) {
      $scope.usersData = response.users;
      });
      }

      but it throws an error: 

      ionic.bundle.min.js:135 POST http://localhost:3000/resource/TestTablet/dist/app/resources/Uploaded/test.json 405 (Method Not Allowed)

      C
      ClayHelberg18-Opal
      18-Opal
      November 30, 2018

      No, I don't think you'll be able to store a new JSON file from a script. If your goal is to persist some data across sessions, you will probably have better luck using the Thingworx connection to store data there. You could also try using localStorage, but I have no idea if that would work on devices running Vuforia View.

      Terms & ConditionsCookie settingsAccessibility statement