[support-michael]

Load Local JSON File

This example demonstrates how to load package a json file with your application and then load it at runtime. The application includes 2 buttons:
1) a load button that will fetch the the data.json file and display a count of the number of objects read in a textarea widget
2) a clear button that will reset the textarea See attachment screen1-60.png
The project source code is attached at the end of this article.

Add JSON file to project
This is the contents of the data.json file that will be packaged with the application:

[
  {"key":"123",
   "value": "abc"},
  {"key":"456",
   "value": "def"},
  {"key":"789",
   "value": "ghi"}
]

See attachment add-json-file.png

Load JSON File
1. Bind OnClick-RunJavaScript action to the function loadJsonData() See attachment runjssnippet.png

Implement loadJsonData() in the load-local-json_custom.js file

function loadJsonData() { 
    var jqxhr = $.getJSON( "data.json", function(data) {
          console.log( "success" );
          $('textarea').val("number of objects read: " + data.length); 
        })
          .done(function() {
            console.log( "done - success" );
          })
          .fail(function() {
            console.log( "error" );
                    $('textarea').val("Error loading json file"); 
          })
          .always(function() {
            console.log( "complete" );
          });
}

Project Source Code
See attachment local-json-file.zip

Attachments:

You must be logged in to view attached files.

[EddyC]

It’s great. Thank you for providing “load-local-json-file ” example code, Wayne.

I have another question from this example. I tried to see all data of this json file on the textarea using mobione but I don’t know why I only get the result ( object, object) instead of the original data. Could you please show me how to read all data on the textarea?

Thank you in advance.

[Brandon]

If you are just trying to read the text in the textarea try this:
(note:code is off the top of my head, untested.)

myVar = $('#m1-load-local-json-textArea1').val();
//myVar now contains the text that is in the textArea1 widget

If you are trying to read the actual data returned into the text area try this:

 function loadJsonData() { 
   var jqxhr = $.getJSON( "data.json", function(data) {
        console.log( "success" );
        $('textarea').val(data); 
      })
        .done(function() {
          console.log( "done - success" );
        })
        .fail(function() {
          console.log( "error" );
                    $('textarea').val("Error loading json file"); 
        })
        .always(function() {
          console.log( "complete" );
        });
}

[mindvault]

Can you use the same to load a json stored in the cloud?

[Author]

Posts