Creating a structure for a JSON array in ExtJS - step by step guide

Question

Creating a structure for a JSON array in ExtJS - step by step guide

The information retrieved from my server is in the following format:

["admin", "user", "developer", "super"]

I am working on transforming this data into a new model structure represented by:

Ext.define('RoleModel', {
      extend: 'Ext.data.Model',
      //fields: [{}]
});

This is how my store is structured:

 Ext.create('Ext.data.Store', {
      model: 'RoleModel',
      proxy: {
          type: 'ajax',
          url : '/roles',
          reader: {
              type: 'json'
          }
      },
      autoLoad: true
  });

Is there a way to correctly assign the single array received from the server to my RoleModel?

javascript json extjs

Answer 1

Answer №1

Before you can parse your JSON into your data model, it must be formatted as shown below:

[
    { "role": "admin"     },
    { "role": "user"      },
    { "role": "developer" },
    { "role": "super"     }
]

However, if you are using ExtJS 5.x, there is a more efficient way to handle the Ajax call by applying a transform on the proxy's reader. Here is an example:

Ext.create('Ext.data.Store', {
    model: 'RoleModel',
    proxy: {
        type: 'ajax',
        url : '/roles',
        reader: {
            type: 'json',
            transform: function(data) {
                return data.map(function(x){
                    return { role: x };
                });
            }
        }
    }
});

» Fiddle

Answer 2

Before you can parse your JSON into your data model, it must be formatted as shown below:

[
    { "role": "admin"     },
    { "role": "user"      },
    { "role": "developer" },
    { "role": "super"     }
]

However, if you are using ExtJS 5.x, there is a more efficient way to handle the Ajax call by applying a transform on the proxy's reader. Here is an example:

Ext.create('Ext.data.Store', {
    model: 'RoleModel',
    proxy: {
        type: 'ajax',
        url : '/roles',
        reader: {
            type: 'json',
            transform: function(data) {
                return data.map(function(x){
                    return { role: x };
                });
            }
        }
    }
});

» Fiddle

Answer 3

Answer №2

To solve my issue, I decided to include a role attribute in my model and implemented the following code snippet:

Ext.Ajax.request({
  url: '/roles',
  success: function(response){
    var jsonData = Ext.JSON.decode(response.responseText);
    var rolesArray = jsonData.map(function(r){ return {role: r}});
    store.loadData(rolesArray);
  }
});

Answer 4

To solve my issue, I decided to include a role attribute in my model and implemented the following code snippet:

Ext.Ajax.request({
  url: '/roles',
  success: function(response){
    var jsonData = Ext.JSON.decode(response.responseText);
    var rolesArray = jsonData.map(function(r){ return {role: r}});
    store.loadData(rolesArray);
  }
});

Creating a structure for a JSON array in ExtJS - step by step guide

Answer №1

Answer №2

Similar questions

Add the current date plus 48 hours to the content on a webpage (JavaScript maybe?)

A high volume of users connecting to the application causes Node.js and path.js to crash

Steps for Removing Multiple CSS Styles from an Element's Style:

What is the best way to declare a variable within a VueJS v-if condition without it being visible?

Is it possible to activate the jQuery .click() function for a button with specific text?

Converting Database Array to JSON in PHP

Linking a JSON or JSON array to a Grails object

Detecting When a User Reaches the Bottom of the Screen in REACTjs

Obtain similar words and related terms

I am encountering difficulty with importing this particular file

trouble with synchronizing multiple requests in node express mysql

I'm looking to instantiate a Backbone collection outside of a script - how can I do that?

Step by step guide on rotating a plane with texture by 90 degrees

Trigger a PHP function with an image's OnClick event

Choosing an option beforehand using angular-ui-select2 version 0.0.5

Is there a more efficient method to achieve the desired effect without making multiple calls to jQuery ajaxSuccess?

Creating a duplicate of a square in JavaScript

How can I dynamically populate a multiple select box with data from a PHP query and store it in a multidimensional array using jQuery?

Position the <a> to the right side of the div

The animation did not cause a transition to occur