Transformation of data in Ext JS

Shop:

Ext.define('onlineStore.store.market', {
  model: 'Market',
  root: 'products',
  proxy: {
    type: 'ajax',
    url: 'http://localhost/onlineStore/data/market.json',
    reader: {
      type: 'json'
    }
  },
  autoLoad: true
});

Product Model:

Ext.define('Market', {
  extend: 'Ext.data.Model',
  fields: [
    {name: 'name', type: 'string'}
  ]
});

Products JSON:

{
  "success": true,
  "products": [
    {"productName": "Apple", "category": "Fruit", "price": "$0.99"},
    {"productName": "Banana", "category": "Fruit", "price": "$1.50"},
    {"productName": "Milk", "category": "Dairy", "price": "$2.99"}
  ]
}

I am trying to map the data from my products JSON file to the Market model by setting name in the model equal to the productName in the JSON data. I have been researching this issue but haven't found a solution yet. Can someone please assist me with this?

javascriptjsonextjsextjs4

Answer №1

To achieve this, you can utilize the convert method.

Here is how you can set it up in your model:

Ext.define('Person', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'fullname',  type: 'string'},
        {name: 'firstname', mapping: 'name.first'},
        {name: 'lastname',  mapping: 'name.last'},
        {name: 'city', defaultValue: 'unknown'},
        'state',
        {name: 'location', convert: function(v, record){
            return !record.data.city ? '' : (record.data.city + ', ' + record.data.state);
        }}
    ]
});

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

Several mistakes occurred involving auth0, react, apollo, babel, and webpack

I seem to be facing some challenges while trying to integrate auth0 into my project. Every time I fix one issue, another one pops up and it's always the same trio of errors: -require is not a function -window is not defined -missing class properties ...

javascriptreactjsexpressauth0apollo

Creating keys from extensive JSON data without having to manually match types using Typescript

Is there a way to efficiently parse and access the values in large JSON files using Typescript, without the need to manually define interfaces for all expected key/value pairs? In the past, working with small JSON files required only extracting a few spec ...

jsontypescript

jQuery: Revealing or concealing several divs upon selection alteration

When I populate a form, I want to display or hide multiple divs based on the OPTION selected in a DROPDOWN. Currently, my code works but the issue is that one div can be hidden or shown by multiple OPTIONS. As a result, these divs keep toggling between hi ...

javascriptjqueryhtmlcssselect

looking to display the latest status value in a separate component

I am interested in monitoring when a mutation is called and updates a status. I have created a component that displays the count of database table rows when an API call is made. Below is the store I have implemented: const state = { opportunity: "" } ...

javascriptvue.jsvuex

Disabling Immediate Row Checkbox in Angular Datatable Based on Column Data

Is there a way to prevent the checkbox in a row from being checked based on certain column data? In my datatable, I need to implement a condition where if firstname="Superman", then the checkbox for that particular row should be disabled to preve ...

javascriptjqueryangulardatatablesangular-datatables

Utilize React Hook Form to easily reset the value of an MUI Select component

I created a dropdown menu where users can select from "Item 1", "Item 2", and "Item 3". Additionally, there is a "Reset" button that allows users to clear their selection and make a new one. Below is the code I used: import React from ...

javascriptreactjstypescriptmaterial-uireact-hook-form

An easy guide to dynamically assigning a property using jQuery

I am currently utilizing the toastr plugin and I would like to dynamically set the options using a JSON object that is retrieved from an AJAX call. I am encountering some difficulties in setting the options property and value programmatically. Below is a s ...

javascriptjquerytoastr

Retrieve a specific portion of a deeply nested JSON object and display only the key-value pairs that pique my interest within that subset

I possess a deeply embedded json file: My goal is to extract and analyze only the subset I am interested in, specifically all content within the 'node' key. How can I achieve this? Extract the subset of this json file that contains "edges ...

jsonjq

Generating dynamic variable names in JavaScript

Looking for a similar solution. var item_<?php echo $variable->n ?> = <?php echo '32' ?> Trying to achieve something like this: var item_342 = '32' ...

phpjavascriptmetaprogramming

Having difficulty naming the request while using ajax to send data to a local server

I have set up an AJAX request to be sent to my PHP server: var xml = new XMLHttpRequest(); xml.open("POST", "request.php", true); xml.setRequestHeader('query','test'); xml.send(); Upon receiving the AJAX data in PHP, I am facing some ...

javascriptphpajax

What is causing my for/in loop to return null results, while the regular for loop works perfectly fine? (VISUALS included)

My goal is to iterate through an array of objects using a for/in loop in order to log specific properties of each object to the Chrome dev console. However, I am encountering issues as I keep getting null values. As a workaround, I attempted to use a regul ...

javascriptvue.js

Is there a way to display a bootstrap modal when the page is refreshed?

Is there a way to automatically display a Bootstrap modal box without the need for clicking anywhere? I want the modal to appear every time the page is refreshed, rather than requiring a click event. Can anyone provide guidance on achieving this? < ...

javascripthtmljquerycsstwitter-bootstrap

Reacting to the surprise of TS/JS async function behaving differently than anticipated

It appears that I'm facing a challenge with the small method; not sure if my brain is refusing to cooperate or what's going on. async fetchContacts() { await this.http.get('http://localhost:3000/contacts') .subscribe(res =& ...

javascripttypescriptasync-await

Exploring the use of jQuery's .filter() method to showcase JSON data

I am currently working on a webpage that includes images, details, and a search input option using JSON objects. The issue I'm facing is that the search function does not yield any results, even though the data from the JSON object displays correctly ...

jqueryjson

The jQuery carousel script is not functioning

Currently developing a jQuery slideshow for my website, and I stumbled upon a code that fits my requirements perfectly. I made some adjustments to the code from this source: . My specifications were that the code should be created from scratch, lightweight ...

javascriptjqueryhtmlslideshow

The browser fails to implement styling prior to a demanding workload

Is it possible to refresh a section of my webpage that contains numerous DOM elements? My ideal approach would be to hide the section using visibility: hidden;, then redraw it, and finally set visibility back to visible;. However, I've encountered an ...

javascripthtmlcssgoogle-chromedom

Achieving proper HTML element order?

Here is the HTML page I am working with: Click here to view the code on jsfiddle <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Extended UI</title> <style type="text/css"> .header{ padding-rig ...

javascriptjqueryhtmlcss

When trying to run the code locally, JS and Bootstrap seem to have trouble functioning together, despite

Check out my codepen project here: https://codepen.io/ldrumsl/pen/ZxdZwa Below is the JavaScript code: $('#datetimepicker1').datetimepicker(); $('#datetimepicker2').datetimepicker(); Downloaded index.html file content: <!DOCTYPE ...

javascriptcssbootstrap-4codepen

Adjusting the Size of a Symbol in Vega

I'm having trouble with the labels in my Vega graph extending beyond the symbols. How can I adjust the width of a symbol to accommodate longer labels? Update: Is there a method to increase the width of a symbol mark? Here is a Force Transform force- ...

jsonchartsvisualizationvega

How can I determine if my clients are utilizing the CDN or NPM versions of my JavaScript library?

At this moment, I'm contemplating releasing an open-source version of my library on NPM. My main concern is figuring out how to track the usage of my CDN or NPM by clients. Is there a method available to achieve this? ...

javascriptnpmnetworkingcdn