Load Local JSON File - Example

MobiOne Archive

Examples, HOW-TOs

This topic has 3 replies, 4 voices, and was last updated 10 years, 6 months ago by mindvault.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
October 11, 2013 at 5:36 am #343275 Reply
support-michael
Keymaster
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.
January 26, 2014 at 5:14 pm #346417 Reply

EddyC
Participant

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.

March 3, 2014 at 7:51 am #347678 Reply
Brandon
Member
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" );
        });
}
```
April 27, 2014 at 10:11 am #349046 Reply

mindvault
Member

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

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

Load Local JSON File – Example

Attachments: