Creating a writer for nested JSON arrays in ExtJS 4

Question

Creating a writer for nested JSON arrays in ExtJS 4

I'm currently tackling the challenge of working with JSON data that has a nested structure in ExtJS4. I kindly request not to provide responses similar to what can be found here as it is not the correct solution for me. My approach involves using expandData: true along with model mappings, which has been effective for me.

The specific issue I am encountering pertains to a field that consists of an array of objects. Here is a snippet of my code:

Ext.define('EdiWebUI.model.Document', {
  extend: 'Ext.data.Model',
  fields: [
    {name: 'document_header_documentReceiveDateTime', mapping: 'document.header.documentReceiveDateTime', type: 'string'},
    {name: 'document_header_documentProcessDateTime', mapping: 'document.header.documentProcessDateTime', type: 'string'},
    {name: 'document_header_documentID', mapping: 'document.header.documentID', type: 'string'},
    ...
    {name: 'lines', type: 'auto'},
    ...
    {name: 'attachments_documentFile_fileName', mapping: 'attachments.documentFile.fileName', type: 'string'},
    {name: 'attachments_documentFile_content', mapping: 'attachments.documentFile.content', type: 'string'}
  ],
  hasMany: [
    {model: 'DocumentLines', name: 'lines', associationKey: 'lines'}
  ],
  proxy: {
    type: 'rest',
    url: '/document',
    reader: {
      type: 'json',
      root: 'data'
    },
    writer: {
      expandData: true,
      writeAllFields: true,
      nameProperty: 'mapping'
    }
  }
});

Ext.define('DocumentLines',{
  extend: 'Ext.data.Model',
  fields: [
    {'name': 'line_lineItem_lineNumber', mapping: 'line.lineItem.lineNumber', type: 'string'},
    {'name': 'line_lineItem_orderedQuantity', mapping: 'line.lineItem.orderedQuantity', type: 'string'},
    {'name': 'line_lineItem_orderedUnitPackSize', mapping: 'line.lineItem.orderedUnitPackSize', type: 'string'},
    ...
});

Reading JSON data in this format works efficiently:

{
  "data": {
    "document": {
      "header": {
        "documentReceiveDateTime": "2014-03-25T08:34:24",
        "documentProcessDateTime": "2014-03-25T08:44:51",
        "documentID": "83701540",
        ...,
        "lines": [
          {
            "line": {
              "lineItem": {
                "lineNumber": "1",
                "orderedQuantity": "5.000",
                "orderedUnitPackSize": "1.000"
              }
            }
          },
          {
            "line": {
              "lineItem": {
                "lineNumber": "2",
                "orderedQuantity": "4.000",
                "orderedUnitPackSize": "1.000"
              }
            }
          }
        ]
        ...

However, I am facing issues with the writer when attempting to save the document. My output appears as follows:

{ lines: 
   [ { line_lineItem_lineNumber: 1,
       line_lineItem_ean: '4352345234523',
       line_lineItem_orderedQuantity: '45'} ],

(other parts of the document are expanded correctly)

Therefore, I pose the following question: Is there a way to make it function according to my requirements? ...or should I resort to implementing a workaround on the server side (which I am currently doing)...

Thank you in advance.

javascript arrays json extjs4 writer

Answer 1

Answer №1

When faced with this decision, you have two paths to choose from:

The recommended method involves utilizing the store's capabilities: define your dataWriter and implement a custom function to generate the desired json.
If you prefer an alternative approach, you can bypass the store for updating records by creating the json yourself and using an Ajax request to update specific records.

Both options involve the use of Ajax, but the first option is typically preferred.

To implement the data writer, consider defining it within the same file as the store, like so:

Ext.define('MyApp.custom.Writer',{
    /*
     * Formats the data for each record before sending it to the server. 
     * Override this method to customize the data format.
     */
    getRecordData: function(record) {
        var data = {};
        /*
         * Analyze and structure your record data as needed here...
         */
        data.lines = [];
        return data;
    }
});

It appears that there may be an extra layer of complexity in your Json data, as the "lineItem" may not be necessary given the existing one-to-one relationships between line -> lineItem and lineItem -> corresponding object. This could be a separate issue to address.

Answer 2

When faced with this decision, you have two paths to choose from:

The recommended method involves utilizing the store's capabilities: define your dataWriter and implement a custom function to generate the desired json.
If you prefer an alternative approach, you can bypass the store for updating records by creating the json yourself and using an Ajax request to update specific records.

Both options involve the use of Ajax, but the first option is typically preferred.

To implement the data writer, consider defining it within the same file as the store, like so:

Ext.define('MyApp.custom.Writer',{
    /*
     * Formats the data for each record before sending it to the server. 
     * Override this method to customize the data format.
     */
    getRecordData: function(record) {
        var data = {};
        /*
         * Analyze and structure your record data as needed here...
         */
        data.lines = [];
        return data;
    }
});

It appears that there may be an extra layer of complexity in your Json data, as the "lineItem" may not be necessary given the existing one-to-one relationships between line -> lineItem and lineItem -> corresponding object. This could be a separate issue to address.

Answer 3

Answer №2

I have utilized the solution provided previously, but I would like to simplify the process for others attempting the same task.

Although Dr. Leevsey's code above was effective for me, it had a drawback of encapsulating everything within an array. In my project, it proved more beneficial to have the function return an object (with child objects) instead of always returning an array, especially when the base object is not an array.

Below is the revised code:

Ext.define('MyApp.util.customWriter',
{
    extend: 'Ext.data.writer.Json',
    getRecordData: function (record, operation) {
        var data = record;
        var me = this;
        
        var toObject = function (name, value) {
            var o = {};
            o[name] = value;
            return o;
        };
        
        var itemsToObject = function (item) {
            for (prop in item) {
                if (Array.isArray(item[prop])) {
                    me.getRecordData(item[prop]);
                }
                else {
                    if (item.hasOwnProperty(prop)) {
                        var nameParts = prop.split('.');
                        var j = nameParts.length - 1;
                        if (j > 0) {
                            var tempObj = item[prop];
                            for (; j > 0; j--) {
                                tempObj = me.toObject(nameParts[j], tempObj);
                            }
                            item[nameParts[0]] = item[nameParts[0]] || {};
                            Ext.Object.merge(item[nameParts[0]], tempObj);
                            delete item[prop];
                        }
                    }
                }
            }
        };

        if (!Array.isArray(data)) {
            data = data.getData();
            itemsToObject(data);
        }
        else {
            var dataLength = data.length;
            for (var i = 0; i < dataLength; i++) {
                itemsToObject(data[i]);
            }
        }

        return data;
    }
});

Answer 4

I have utilized the solution provided previously, but I would like to simplify the process for others attempting the same task.

Although Dr. Leevsey's code above was effective for me, it had a drawback of encapsulating everything within an array. In my project, it proved more beneficial to have the function return an object (with child objects) instead of always returning an array, especially when the base object is not an array.

Below is the revised code:

Ext.define('MyApp.util.customWriter',
{
    extend: 'Ext.data.writer.Json',
    getRecordData: function (record, operation) {
        var data = record;
        var me = this;
        
        var toObject = function (name, value) {
            var o = {};
            o[name] = value;
            return o;
        };
        
        var itemsToObject = function (item) {
            for (prop in item) {
                if (Array.isArray(item[prop])) {
                    me.getRecordData(item[prop]);
                }
                else {
                    if (item.hasOwnProperty(prop)) {
                        var nameParts = prop.split('.');
                        var j = nameParts.length - 1;
                        if (j > 0) {
                            var tempObj = item[prop];
                            for (; j > 0; j--) {
                                tempObj = me.toObject(nameParts[j], tempObj);
                            }
                            item[nameParts[0]] = item[nameParts[0]] || {};
                            Ext.Object.merge(item[nameParts[0]], tempObj);
                            delete item[prop];
                        }
                    }
                }
            }
        };

        if (!Array.isArray(data)) {
            data = data.getData();
            itemsToObject(data);
        }
        else {
            var dataLength = data.length;
            for (var i = 0; i < dataLength; i++) {
                itemsToObject(data[i]);
            }
        }

        return data;
    }
});

Creating a writer for nested JSON arrays in ExtJS 4

Answer №1

Answer №2

Similar questions

Using jQuery to implement translation on scroll

Retrieve data from Laravel's configuration files located in the app/config/package directory

Get the name of the array using JavaScript

What is the best way to implement or disable a function when toggling a switch in pure JavaScript?

Sign up with identical username and email on WordPress

Tips for editing events in the "react-big-calendars" component

iOS Group object persistence issue persists

What is the reason behind the sudden "explosion" in this simulation?

Modify HTML by replacing two consecutive tags using JavaScript

Generating a dynamic form by utilizing a JavaScript JSON object

Reactivity in Vue on dynamically generated HTML elements

What could be causing my variable to not be stored correctly by my useState hook?

JavaScript: Utilize MooTools to extract a string containing a specific class and then pass it through a parent function

Exploring the power of async/await in combination with map or foreach

Ways to retrieve the final appearance of element m in array n

Exploring the World of Google API JSON Parsing Using jQuery

JavaScript - Clear the localStorage when closing the final tab of a website

Using Node.js to implement GET, POST, and DELETE functionalities

What are the steps to showcase a webcam stream in GLSL by leveraging Three.js?

When nodemon is executed, it encounters an "Error: Cannot find module" issue, indicating that it may be searching in the incorrect directory