Mapping Store Fields to JSON Properties in ExtJS: A Complete Guide

I am working with a JSON data object that includes exchange rates information:

{
  "disclaimer": "Exchange rates provided for informational purposes only and do not constitute financial advice of any kind. Although every attempt is made to ensure quality, no guarantees are made of accuracy, validity, availability, or fitness for any purpose. All usage subject to acceptance of Terms: https://openexchangerates.org/terms/",
  "license": "Data sourced from various providers; resale prohibited; no warranties given of any kind. All usage subject to License Agreement: https://openexchangerates.org/license/",
  "timestamp": 1475110853,
  "base": "USD",
  "rates": {
    "AED": 3.672983,
    "AFN": 66.5538,
    "ALL": 122.0421,
    "AMD": 473.5925,
    "ANG": 1.7763,
    "AOA": 165.571834,
    "ARS": 15.3169,
    "AUD": 1.299338,
    "AWG": 1.792667,
    "YER": 250.130999,
    "ZAR": 13.61321,
    "ZMK": 5252.024745,
    "ZMW": 9.831204,
    "ZWL": 322.387247
  }
}

Additionally, I have defined my model structure as shown below:

Ext.define('CurrencyConvert.model.CurrencyCode', {
    extend : 'Ext.data.Model',
    fields : [
        {
            name : 'code',
            value : 'string'
        },
        {
            name : 'rate',
            value : 'float'
        }
    ]
});

The challenge I am facing is that the currency code is also the property name for the actual rate. How can I set up my store in a way that allows me to retrieve both the code and the rate values for each currency?

For example, for "AED": 3.672983, I would like the code field to contain "AED" and the rate field to hold 3.672983.

javascriptjsonextjsdata-binding

Answer №1

One possible approach is as follows:

    Ext.define('CurrencyConvert.model.CurrencyType', {
        extend: 'Ext.data.Model',
        fields: [
            {
                name: 'type',
                type: 'string',
                convert: function(value, record) {
                    // Implement your conversion logic here
                }
            },
            {
                name: 'value',
                type: 'float',
                convert: function(value, record) {
                    // Implement your conversion logic here
                }
            }
        ]
    });

Answer №2

Ext.define('CurrencyConversion.model.CurrencyCode', {
    extend : 'Ext.data.Model',
    fields : [
        {
            name : 'currency_code',
            type : 'string'
        },
        {
            name : 'exchange_rate',
            type : 'float', 
            convert : function(value, record) {
                return currencyData.exchangeRates[record.get('currency_code')]
            }
        }
    ]
});

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

Is it possible to view the code within the .js files located in the api directory of NextJS using web browsers?

Is it possible to view the code of ".js files" in the "api folder" of NextJS using browsers? I came across a post on Stack Overflow where someone asked if Next.js API is back-end, and one of the answers stated: The back-end or server-side of Next.js res ...

javascriptnode.jsreactjsbrowsernext.js

Utilize JQuery's .load() function to transmit JSON data to your Flask server

I am attempting to utilize JQuery's .load() function in order to transmit data to my Flask server and then, with that information, display a <div> that is loaded into the element making the request. This is what my code snippet looks like: $(&qu ...

javascriptpythonjqueryjsonflask

What is the best method for storing numerical data for a Next.js/React website? Should you use a CSV file, make a backend API call, or download

I'm working on a nextjs website and I want to integrate a chart. Where would be the best place to store the data for this chart? Here are some options I've considered: Save a csv file in the public folder and retrieve it from there Store a csv f ...

javascriptreactjsapinext.js

Angular2 forms: creating validators for fields that are interconnected

Imagine a scenario where a form allows users to input either a city name or its latitude and longitude. The requirement is that the form must validate if the city name field is filled OR if both the latitude and longitude fields are filled, with the added ...

javascriptangularangular2-forms

Angular allows you to easily upload multiple files at once

I am currently facing an issue while attempting to upload multiple files. There seems to be an error somewhere in my code that I have yet to identify. The problem is that nothing is being displayed in the console, but the 'uploadData' appears to ...

javascriptphpangular

Ensure that Google Tag Manager (GTM) delays the pageview until the SPA URL title is available

I'm dealing with a React SPA that manages all the URL titles on the frontend, so the historyChange event registered on GTM captures the visited URLs along with their titles correctly. However, I've noticed that on the initial load of the SPA, su ...

javascriptreactjsgoogle-analyticssingle-page-applicationgoogle-tag-manager

PHP function for encoding data as JSON may cause forward slashes to be escaped

Every day, my PHP script scrapes a database and sends a json feed to another process. We are currently working on creating a list called types within this process. $sql = "SELECT id AS slug, name, CONCAT('[', IF (clos ...

phpjson

A guide on effectively mocking functions in Jest tests with Rollup.js

I am currently in the process of developing a React library called MyLibrary, using Rollup.js version 2.58.3 for bundling and jest for unit testing. Synopsis of the Issue The main challenge I am facing is with mocking a module from my library when using j ...

javascriptreactjsunit-testingjestjsrollupjs

Adjust font size using jQuery to its maximum and minimum limits

My jQuery script enables me to adjust the font-size and line-height of my website's CSS. However, I want to restrict the increase size to three clicks and allow the decrease size only after the increase size link has been clicked - ensuring that the d ...

javascriptjquerycssfontsfont-size

Creating objects based on interfaces

After looking at this straightforward code: interface int1 { aa: string, bb: number, } const obj1:int1 = {} //#1 function fun(param_obj:int1) { //#2 } I am curious as to why the compiler throws an error: Type '{}' is missing the fol ...

javascripttypescript

Encountered a 'Topology is closed' error while using EJS

After creating my profile.ejs page, I encountered an error upon reloading the page. Can someone help me understand what's causing this issue? Below is all the code I've used. My setup includes Node.js and Express as the server technologies. I cam ...

javascriptnode.jsmongodbexpressejs

Sorting JavaScript Objects By Date

My goal is to arrange my array of objects with date values in descending and ascending order. Here is the code I am using: function comp(a, b) { return new Date(a.jsDate) - new Date(b.jsDate); } function compNewestFirst(a, b) { return new Date(b.jsD ...

javascriptarrayssortingdateobject

What is the best approach to sending numerous queries from a single endpoint using Express?

I am attempting to perform multiple database queries and create an object that stores each response from the database in a specific field. Below is the code I have written: router.post('/search', (req, res) => { var collection = db.get(). ...

javascriptnode.jsrestexpress

I am looking to personalize a Material UI button within a class component using TypeScript in Material UI v4. Can you provide guidance on how to achieve this customization?

const styling = { base: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', border: 0, borderRadius: 3, boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', color: 'white', height: 48, ...

javascriptreactjstypescriptmaterial-ui

Navigating with buttons in the Material UI Drawer

I have implemented a Material UI drawer with some modifications. The original code used buttons, but now I want to navigate to a new page when a button is clicked. For example, clicking on the 'INBOX' button should take me to a page '/new&ap ...

javascriptreactjsreact-routermaterial-ui

Jquery double-click Event Not Functioning Properly

I've been attempting to toggle the visibility of my footer navbar while also changing the chevron icon. When the navbar is hidden, I want the chevron pointing up to be displayed, and when the navbar is shown, I want the chevron pointing down to be dis ...

javascriptjqueryhtmlcsstwitter-bootstrap

The challenge of vertically aligning text in a dynamically generated div

Currently, I am in the process of developing a straightforward application that allows for the dynamic addition of students and teachers. I am dynamically adding divs with a click function. To these dynamically created divs, I have assigned the class "us ...

javascripthtmlcss

An error will be thrown if you try to pass an array attribute of an object as a prop to a React component

I'm trying to grasp why passing an array attribute of a data object into a Component as a prop is causing issues. Is this due to my understanding of how React functions, or are there potential pitfalls in this scenario? Any insight would be greatly ap ...

javascriptreactjs

Unable to retrieve JSON data from the remote URL

I have been attempting to retrieve information from but unfortunately, I am not receiving any data in return. Despite this, I can see the data in my response tab using Google Chrome. My attempts include running it on both a webserver and locally for test ...

javascriptajaxjsonjsonp

Using JSON as a variable solely for determining its type and guaranteeing that the import is eliminated during compilation

In my TypeScript backend project with Node as the target runtime, I have a JSON file that is auto-generated within my repository. I use the following code to import the JSON file in order to get the type of the JSON object: import countries from '../g ...

node.jsjsontypescriptes6-modules