Handle Large Arrays with the JSON editor

Large Array

Depending on the size of your JSON file you want to edit with the JSON Editor you can push the Javascript engine of your browser towards its limits (i.e. timeout). In a testing environment 900 records with meta information about the markers on a map in OpenLayers map exceeded the capacity of the JSON editor.

The solution is a wrapper for the JSON editor. Jeremy Dorns JSON editor is used for single records (a hash/object) of the array only. A record in this example is representing a single geolocation on map with a JSON record attached to this geolocation. To avoid the javascript timeout for large arrays a wrapper class can be created that lets you navigate and select the JSON the record from the large array.

Create a Wrapper Class

First you will create a wrapper class for large array with the following methods

    var vLAE = new LargeArrayEditor()

The LargeArrayEditor is a JavaScript-Class with the following attributes and methods

     this.la = [{...},...,{...}] // Attribute: large array of record this.la[0] is an object/hash
     this.current = 0; // Attribute: is the current index of the 

     this.first()  // Method: set current=0
     this.last()  // Method: set current=this.la.length-1
     this.next()  // Method: this.current++ if this.current < this.la.length-1
     this.prev()  // Method: this.current-- if this.current > 0
     this.edit()  // Method: call the JSON Editor for current record in editor

Use font-awesome icons for calling the methods of the LargeArrayEditor. By calling the JSON editor just a single record (hash/object) of the array the javascript timeout problem in a browser is solved and you are able to handle large arrays with the JSON editor.