Creating an Extjs model for a complex nested JSON structure

Take a look at this JSON structure

{
        "id": 123,
        "name": "Ed",
        "orders": [
            {
                "id": 50,
                "total": 100,
                "order_items": [
                    {
                        "id": 20,
                        "price": 40,
                        "quantity": 2,
                        "product": {
                            "id": 1000,
                            "name": "MacBook Pro"
                        }
                    },
                    {
                        "id": 21,
                        "price": 20,
                        "quantity": 3,
                        "product": {
                            "id": 1001,
                            "name": "iPhone"
                        }
                    }
                ]
            }
        ]
    }

These are my defined models

Ext.define("User", {
    extend: 'Ext.data.Model',
    fields: [
        'id', 'name'
    ],

    hasMany: {model: 'Order', name: 'orders', associationKey: 'orders'}
});

Ext.define("Order", {
    extend: 'Ext.data.Model',
    fields: [
        'id', 'total'
    ],

    hasMany  : {model: 'OrderItem', name: 'orderItems', associationKey: 'order_items'}
});

Ext.define("OrderItem", {
    extend: 'Ext.data.Model',
    fields: [
        'id', 'price', 'quantity'
    ],
    hasOne : {
        model: 'Product', 
        name: 'product', 
        associationKey: 'product'
    }
});

Ext.define("Product", {
    extend: 'Ext.data.Model',
    fields: [
        'id', 'name'
    ]
});

Upon loading the data into my store and inspecting the store record, I encounter this issue

https://i.sstatic.net/3jHOM.png

The Orders and related data are not being retrieved. Something seems amiss with the model definitions, but I'm unable to pinpoint the problem. Thanks for your help in advance.

Update Here's how my store is configured and the data is loaded

Ext.define('Company.store.TestOrders', {
    extend: 'Ext.data.Store',
    alias: 'store.testorders',
    model: 'User',
    data:[
    {
        "id": 123,
        "name": "Ed",
        "orders": [
            {
                "id": 50,
                "total": 100,
                "order_items": [
                    {
                        "id": 20,
                        "price": 40,
                        "quantity": 2,
                        "product": {
                            "id": 1000,
                            "name": "MacBook Pro"
                        }
                    },
                    {
                        "id": 21,
                        "price": 20,
                        "quantity": 3,
                        "product": {
                            "id": 1001,
                            "name": "iPhone"
                        }
                    }
                ]
            }
        ]
    }],
    storeId: 'TestOrders',
    proxy: {
        type: 'memory'
    }
});

Later on, I retrieve the data using the following method

Ext.getStores('TestOrders').getAt(0);

Answer №1

Are you searching for a way to retrieve orders and order items from a User store?

To access the orders collection from a user record, you can use the method record.orders(). The same goes for retrieving order items in an order collection record: order_record.order_items().

Take a look at this demo on sandbox

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

Serializing an array in AS3 for iOS and storing it for future use: a guide

I'm facing a challenge with trying to serialize and save a multidimensional array using SharedObjects. Despite my efforts, I keep encountering issues. While attempting to use JSON for serialization, the inability to handle data types poses a problem. ...

How can PHP CURL be used to refine JSON search outcomes?

I am facing an issue with filtering my curl JSON requests. Every time I make a request, the output list includes all links from the JSON (Link 1-3), when I only need Link 1 & Link 3. Could you please review my filtering example? $responseData = apiReques ...

tips for serializing a custom JSON structure

How can I format the JSON data as shown below? "Tyre": { "title": "Tyre", "cls": "TyreCondition", "items": [ { "firstItem": [ { "titl ...

Unexpected server failure when connecting via socket.io to Node.js http-proxy

I'm encountering an issue with my Nodejs proxy server related to the dreaded socket hang up error. The server crashes every time I refresh the browser on 'app.example.com'. The connection seems fine and the page loads correctly, but the cra ...

The Importance of Selenium Events and Patience

Currently, I am using Selenium to automate some testing for our company's website, but encountering issues along the way. TestItemFromSearch: (driver, part, qty) => { Search.SearchItem(driver, part); driver.findElement(By.id('enterQty ...

Why is the imported package not being recognized in the namespace declaration of my Node.js TypeScript file?

Currently, I am utilizing the WebStorm IDE developed by JetBrains to modify a TypeScript file within a Node.js v8.6.0 project. The JavaScript version set for this project is JSX Harmony. In the beginning of the TypeScript source file, there is an import st ...

Ways to eliminate a comma in a list without resorting to the replace method

I've encountered an issue with my original data containing commas. This data is in the form of a JSON object. When I read a file containing my JSON object using a BufferedReader, I add the output to a list. Although everything seems to be working fi ...

Effortlessly organize keys using `jq`, but make sure to prioritize the "id" key if it exists

Is it possible to organize the keys of a JSON using jq, while ensuring that keys labeled "id" remain at the top level of each tree? It's helpful to have a method for comparing JSON files easily, and standardizing key order and structure is an effectiv ...

Transfer various field values to jQuery

I am looking to send multiple field values to jQuery for validation, but currently only receiving the value of the changed field. How can I pass both field values to jQuery? Enter some text: <input type="text" name="txt1" value="Hello" onchange="myF ...

"Unlock the power of Meteor: dynamically serve up the specific range of items

I am facing a challenge with my vast collection of over 5000+ records. I aim to display the records in groups of 10 for easier viewing. How can I update the data dynamically to achieve this? Here is what I have attempted so far: In my server.js file : M ...

JavaScript: Changing the names of all object keys

As a beginner, I am struggling to rename some objects in my key using a map function. Below is my current array: "platforms": [ { "id": 6, "name": "PC (Microsoft Windows)" }, { "id": 11, "na ...

What is the best way to notify the user about the input in the textbox?

Imagine you have a button and an input field. How could you notify the user of what is in the input field when the button is pressed? Please provide a simple explanation of your code. ...

choosing from dropdown menu items

Learn HTML <table> <tr> <td>ENTER PRINCIPLE AMOUNT</td> <td><input type="text" name="principle" size="7"></td> </tr> <tr> <td>ENTER RATE OF INTEREST</td> <td><input type="text" na ...

Altering various HTML components with every swipe of SwiperJS

I am new to working with JavaScript and I have integrated a Swiper JS element into my HTML page. Here is the current code I am using: <head> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css&quo ...

Tips for creating a responsive Youtube embedded video

Check out this website for a good example: If you take a look, you'll notice that the header youtube video is responsive - it automatically resizes when the window size changes. Here are the <iframe> codes: <iframe id="bluetube-player-1" fr ...

Retrieving journal web addresses using the CORE API

I am currently working on pulling journal data from the CORE API in React, specifically focusing on obtaining the title and URL of each journal. My goal is to create clickable links that direct users to the specified URLs. { "identifiers": [ ...

clearing all input fields upon submission in React Native

I need help resolving an error that occurs when I try to clear text input fields on a button press. Instead of clearing the fields, it throws an undefined error because I am trying to set the value as {this.state.inputTextValue} and then clear it using set ...

What is the best way to eliminate a nested object from an object within CakePHP?

The CakePHP API is returning results in the following format: { "status": "OK", "themes": [ { "Theme": { "id": "20", "user_id": "50", "name": "dwdwdw", "language_c ...

The iframe is displaying a MIME warning for pdfmake: Resource being interpreted as a Document but transferred with MIME type application/pdf

We are developing a single-page application using Vue.js. Our goal is to generate a PDF on the client side, and we have chosen pdfMake from npm for this purpose. As per the documentation, to display the generated PDF within an <iframe>, you can simp ...

Steer clear of cross-domain solutions

Currently, I am developing a web application that allows customers to integrate it into their websites by linking to a JavaScript file on my server. Despite the application reading all JavaScript files from my server, I encounter an error when attempting t ...