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

Increasing the size of elements with jQuery animate method

I've been utilizing the animate function in jQuery to dynamically resize a content area upon hovering over the element. Although the script is functioning correctly, I'm facing a challenge in preventing the script from resizing the content multi ...

javascriptjqueryjquery-animate

execute a rigorous compilation during the ng build angular process

I am currently working on a project using angular-cli and I have configured my package.json with the following scripts: "scripts": { "ng": "ng", "build": "ng build --base-href /test/", "prod": "ng build --prod --base-href /test/" } According to the ...

javascriptangulartypescriptnpmangular-cli

Does the built-in waiting mechanism in Protractor automatically handle promises?

While browsing through Stack Overflow, I stumbled upon this response in a discussion about Protractor tests and asynchronous solutions: 'AFAIK expect waits internally for the related promises.' I have tried looking through the official Protract ...

javascriptseleniumpromiseprotractor

Dimming the background of my page as the Loader makes its grand entrance

Currently, I am in the process of developing a filtering system for my content. The setup involves displaying a loader in the center of the screen whenever a filter option is clicked, followed by sorting and displaying the results using JQuery. I have a v ...

javascriptjquerycssajaxhtml

The native javascript modal fails to appear

I'm attempting to implement the functionality from this Codepen demo into my project. I've copied over the HTML, CSS, and JavaScript code: <!DOCTYPE HTML> <html> <head> <script> var dialog = docume ...

javascripthtmlcss

Swapping out JSON.simple in favor of Jackson

Looking to switch from JSON.simple to Jackson in the code snippet below: JSONObject request = new JSONObject(); request.put("String key", /String value/); request.put("String key", /int value/); ... The updated version using Jackson: ObjectMapper mapper ...

javajsonjackson

Having trouble with my AJAX request and can't figure out why. Anyone available to take a look and help out?

I have successfully implemented this AJAX script on various pages in the past without any issues. <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery.validate.min.js"></script& ...

javascriptjqueryhtmlajaxforms

Dynamic Content Sorting with JavaScript and jQuery

I am presenting various courses that are available, and I am utilizing JavaScript/jQuery to display or hide them based on element classes. You can view the page here. Currently, the script conceals all content on the page and then reveals items that matc ...

javascriptjqueryhtml

Updating dynamic parameter in a NextJS 13 application router: A complete guide

In my route user/[userId]/forms, I have a layout.tsx that includes a Select/Dropdown menu. The dropdown menu has options with values representing different form IDs. When the user selects an item from the dropdown, I want to navigate to user/[userId]/form ...

javascriptnext.jsnext.js13

The method this.$refs.myProperty.refresh cannot be invoked as it is not a valid

I have added a reference value 'callingTable' to a vue-data-table (using vuetify) like so: <v-data-table :headers="callingTableHeaders" :items="getCallingDetails" class="elevation-1" ref="callingTable&quo ...

javascriptvue.jsvuetify.js

Is it possible to utilize a keyboard listener to activate a tooltip upon being invoked?

I've created a basic pie chart that shows a tooltip when you click on a pie wedge. Now, I want to achieve the SAME functionality, but for div elements located OUTSIDE of the pie chart. Situation: A user focusing on the 'Cat 1' div and ...

javascriptjqueryd3.jscharts

Do JSON objects and DTOs share the same characteristics?

Is there a distinction between JSON objects and DTOs (data transfer objects), or are they essentially the same thing? When working with a REST architecture, HTTP requests from the client can be sent as JSON data and then deserialized into CLR objects on th ...

jsondto

Observing for form input in Nuxt.js

There is a form on my webpage, which includes the following elements: <div v-if="this.userdata.address == ''">Please enter your address</div> Your address <input type="text" v-model="userdata.address" ...

javascriptvue.jsnuxt.js

Using React and Material-UI to dynamically populate a table with data retrieved from

Material ui table utilizes data in a specific format. rows: [ createData(1, "dashboard", "details"), createData(2, "product", "product details"), ].sort((a, b) => (a.id < b.id ? -1 : 1)) When the API responds with data stored in st ...

javascriptreactjsmaterial-ui

Finding elements based on their position using Javascript

I'm searching for an optimal method to identify all elements located within a specific range of pixels from the top of the page. Currently, I have implemented a straightforward test called inRange function inRange(el, from, to) { var top = el.offs ...

javascriptjquerysorting

An error with jQuery occurred in the client's post response, resulting in a 400 POST HTTP/1.1 error

I am struggling to identify the issue with my code, especially since I'm not very familiar with jQuery. The goal is to create an HTML form for storing car data based on this template: The source code for the HTML form can be found here. Upon clickin ...

javascriptjqueryajaxflaskflask-restful

What is the best way to instantiate a dynamic object within a literal?

I am dealing with an object that contains multiple fields, mainly consisting of constant string values. However, I also need to incorporate a variable that is determined by the current state. const {order} = this.state; myObject={{ fieldA: 2, fiel ...

javascriptreactjsmaterial-ui

Trouble integrating JSON data with Newtonsoft.Json library in WPF applications

Currently, I am working on extracting data from the office365 API that returns responses in JSON format. My aim is to store specific data such as Id and DisplayName into variables for further use, but I seem to be struggling with the process. I came across ...

c#jsonwpfjson.netoffice365api

Implementing role-based authentication in Next.js using Next-auth and Firebase

Currently, I'm in the process of integrating role-based authentication using NextAuth.js into my Next.js application. Despite following the provided documentation meticulously, an error (in profile snippet and callback snippet which I copied from next ...

javascriptfirebasenext.jsjwtnext-auth

The combination of useEffect and Client component has the power to greatly

As a newcomer to React development, I've encountered a blocking error in my code that isn't being detected by Visual Studio Code. Here's the code snippet for my NavBar component: import React, { useState, useEffect } from "react"; import Ima ...

javascriptreactjsnext.jsreact-hooks