What is the best way to properly format the retrieved JSON string using Ext JS?

After receiving the JSON data shown below, I need to change the formatting of the string values in the 'code' field. For example, 'TOTALPENDING' should display as "Pending Bonus" and 'TOTALLEFT' as "Current Bonus". How can I make this conversion?

{
    "success": true,
    "msg": "OK",
    "count": 5,
    "data": [
        {
            "bookerid": 103083420,
            "code": "TOTALPENDING",
            "totalcount": 1
        },
        {
            "bookerid": 103083420,
            "code": "TOTALLEFT",
            "totalcount": 2
        },

The ViewModel retrieves data through ViewModel stores;

 stores: {
        bookStore: {
            model: 'MyApp.model.base.BookStatModel',
            autoLoad: true,
            session: true,
            proxy: {
                url: MyApp.Globals.getUrl() + '/bonustrans/stat/book',
                type: 'ajax',
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                }
            }
        },
javascriptjsonstringextjsformat

Answer №1

To accomplish this task, you will need to utilize the convert configuration within the model.

In the provided FIDDLE, a demonstration using grid, store, and model has been created. It is intended to assist and guide you in achieving your desired outcome.

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.define('Book', {
            extend: 'Ext.data.Model',
            fields: ['bookerid', {
                name: 'code',
                convert: function (v, rec) {
                    switch (v) {
                    case 'TOTALPENDING':
                        v = 'Pending Bonus';
                        break;
                    case 'TOTALLEFT':
                        v = 'Current Bonus';
                        break;
                    default:
                        v = '';
                        break;
                    }
                    return v;
                }
            }, 'totalcount'],
        });

        Ext.define('TestViewModel', {
            extend: 'Ext.app.ViewModel',
            alias: 'viewmodel.test',
            stores: {
                books: {
                    model: 'Book',
                    proxy: {
                        type: 'ajax',
                        url: 'book.json',
                        reader: {
                            type: 'json',
                            rootProperty: 'data',
                            keepRawData: true
                        }
                    },
                    autoLoad: true
                }
            }
        });

        // Remaining code snippet omitted for brevity

    }
});

JSON FILE

{
    "success": true,
    "msg": "OK",
    "count": 5,
    "data": [{
        "bookerid": 103083420,
        "code": "TOTALPENDING",
        "totalcount": 0
    },{
        "bookerid": 103083421,
        "code": "TOTALLEFT",
        "totalcount": 15
    },{
        "bookerid": 103083422,
        "code": "TOTALPENDING",
        "totalcount": 12
    },{
        "bookerid": 103083423,
        "code": "TOTALLEFT",
        "totalcount": 10
    },{
        "bookerid": 103083424,
        "code": "TOTALLEFT",
        "totalcount": 16
    }]
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

As the user types, the DD/MM/YYYY format will automatically be recognized in the

In my React component, I have an input box meant for entering a date of birth. The requirement is to automatically insert a / after each relevant section, like 30/03/2017 I am looking for something similar to this concept, but for date of birth instead of ...

javascriptreactjsinputecmascript-6

Convert a Material UI component into a string representation

I've been tasked with using a tool that creates a terminal interface within the browser. Our goal is to display HTML content, including Material components. The tricky part is that the tool requires input as strings. I discovered a package called jsx- ...

javascriptreactjsmaterial-ui

Instructions for turning an HTML table cell into an editable text box

Essentially, I'm looking to enable users to click on the table and edit the text within it. I found inspiration from this Js Fiddle: http://jsfiddle.net/ddd3nick/ExA3j/22/ Below is the code I've compiled based on the JS fiddle reference. I tho ...

javascriptjqueryhtmlhtml-table

Integrating redux-form with the react-widgets DateTimePicker component

I am currently working on a project using ReactJS with Redux and I am trying to incorporate a form similar to the one shown in this example: Most of the components are working well, but I am encountering an issue with the DateTimePicker due to the momentL ...

javascriptreactjsreduxredux-formreact-widgets

Struggling to implement sparklines for real-time data in the AngularJS adaptation of the SmartAdmin template

Currently, I am embarking on a project that involves utilizing the AngularJS version of the SmartAdmin Bootstrap template foundhere. Within this project scope, I am required to integrate sparklines into various pages. I have successfully implemented them ...

javascriptangularjssparklinessmartadmin

Unveiling the power of Next.js: Learn how to efficiently fetch pages using the traditional pages router

I'm currently working on a Next.js application with next version 13.4.13. The app follows the traditional pages directory structure. Within this setup, there are 2 main pages organized as follows: /pages/light /pages/heavy The light page is quite ...

javascriptnext.jsnextjs-dynamic-routing

Capturing a JSON file directly from a web browser for integration into a Visual Basic 6 application

In Firefox (or any other browser), I can retrieve data every six seconds from a device called Saturn South ESBox on my local LAN by visiting "http://esbox/api/devices". This data is in JSON format. However, manually copying this file every minute for 24 ho ...

jsonvb6

Creating 3D models in three.js

Working with a 3D point cloud data in three.js, I have successfully added points to a Geometry using Vector3. Now I am looking to create surfaces from these points. for(var key in dt) { var hole = dt[key]; var pX = hole['x'] - planeMinX; var pY ...

javascriptthree.jswebgl

Simultaneously extracting information from 2 APIs with ForkJoin: Undefined Exception encountered

Seeking to retrieve data from 2 APIs using ForkJoin. Utilizing forkjoin for asynchronous data access. Successfully retrieved homeTeamName and awayTeamName, encountering error while accessing lines: core.js:1521 ERROR ReferenceError: allline is not define ...

jsonangularapifork-join

What is the best way to extract JSON data from PHP and showcase it in an Android TextView?

I am developing an android application that will showcase information on textviews based on JSON data retrieved from a php website. Below is an example of the JSON data currently visible on the php page: [{"ID":"1","temperature":"33","max_humidity":"33"," ...

phpandroidmysqldatabasejson

The dropdown menu in Mantine is malfunctioning, even though I copied and pasted the exact code from

While following a tutorial, I encountered an issue with the Mantine Menu and Dropdown components. The tutorial creator did not wrap the React App inside the MantineProvider, which resulted in errors when trying to use the Dropdown component. Even after add ...

javascriptreactjsnode.jsexpressmantine

What is the best way to ensure that this JavaScript code functions properly when dealing with business operating hours

Using this javascript code allows me to check if a business is open based on its operating hours. It's effective for times like 17:00-23:00, but how can I modify it to work for hours past midnight, such as 0:30 or 1:00 in the morning? var d = new D ...

javascriptangularjsdatetimetime

Transforming cURL output to JSON format

I'm currently attempting to utilize a cURL method for sending POST data to an external server with the requirement that it returns data formatted in JSON code. Currently, the only format being returned is XML which is not suitable for further processi ...

phpjsoncurl

Unable to retrieve link text following readFile function. Selector functions properly in Chrome console

My goal is to extract hyperlink text. Using the google chrome console with my selector, I am able to retrieve a list of 15 link texts as desired. However, when I execute my code with the same selector, the el.text returns undefined in console.log while th ...

javascriptnode.jscheerio

What could be causing my bootstrap-switch to malfunction?

Here is the snippet of code I am working with: jQuery.each($('.onoffswitch-checkbox'), function(i, slotData) { console.log($(slotData).bootstrapSwitch('state')) }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1 ...

javascriptjqueryhtmlbootstrap-switch

Navigating the Basics: Understanding the Four Quadrant Selection Grid in a Material UI & React Pop-Up Form

Sorry if these questions seem silly. I'm diving into React & Material-UI without a mentor to guide me, relying on documentation and tutorials. Is there a better place for quick beginner questions? Maybe a chat forum or Slack group? Not sure if Stack i ...

javascriptreactjsformsmaterial-ui

“What is the most effective way to verify the presence of an element within a numerical array using Twig

If we have an array stored in a variable (let's name it arr) in Twig and it looks like this: foo: [ { title: 'foo', id: 1 }, { title: 'bar', id: 2 }], bar: [ { some: 23, required: true }, { some: 12, ...

arraysjsontwig

Retrieving data from the database into a DIV using ajax

Here is the code snippet I am using to retrieve values from my database at regular intervals: <script type="text/javascript"> $(document).ready(function(){ var j = jQuery.noConflict(); j(document).ready(function() { j(".refreshMe ...

javascriptphpjqueryajax

Encountering a TypeError when attempting to pass the onChange function as props to Grandchildren due to 'this' being undefined

Struggling to pass an onChange function from parent to grandchild component and encountering an error. TypeError: this is undefined The code snippet causing the issue: const TaskTable = React.createClass({ getInitialState: function() { return {dat ...

javascriptreactjs

Enhancing Symfony's performance through optimized Ajax response time

When using Symfony2, I am experiencing differences in loading times for AJAX requests between development and production environments. In development, it takes 1 second to load, while in production it only takes 500 milliseconds for a simple call: Here is ...

javascriptphpjqueryajaxsymfony