tips for implementing JSON loading in Ext JS

While attempting to load values from a web service, I encountered the following error message: "ChatStore.data.items[i] is undefined."

The mapping code for extjs is as follows:

ChatStore = new Ext.data.JsonStore({
         storeId: 'ChatStore1',
         fields: [
                    {name: "pic_url", mapping: "sender_pic_url"}, 
                   {name: "first_name", mapping: "first_name"},
                    {name: "last_name", mapping: "last_name"},
                    {name: "message_text", mapping: "message_text"},
                    {name: "time", mapping: "time"}

                ]        

     }); 

Here is the code used to load data from the web service:

Ext.Ajax.request({
        url: 'webservice call',
         params: Ext.encode('{"sender_user_id":"' + suid + '","receiver_user_id":"' + ruid + '"}'),
         headers: { 'Content-type': 'application/json;charset=utf-8' },
        success: function (result, request) {

            retData = (result.responseText);
            alert(retData);
             retData = eval("(" + retData + ")");
             if (retData.status == 'success') {


                 //ChatStore.loadData(retData.result.messages);
                 //ChatStore.loadData(retData.result);
                 for (var i = 0; i < retData.result.messages.length; i++) {
                     if (retData.result.messages[i].message_from == "YES") {

                         ChatStore.data.items[i].data.pic_url = retData.result.sender_pic_url;
                         ChatStore.data.items[i].data.first_name = retData.result.sender_name;


                    }
                     else {
                        ChatStore.data.items[i].data.pic_url = retData.result.receiver_pic_url;
                         ChatStore.data.items[i].data.first_name = retData.result.reciever_name;
                    } 

                     ChatStore.data.items[i].data.message_text = retData.result.messages[i].message_text;
                    ChatStore.data.items[i].data.time = retData.result.messages[i].time;

                }
                // ChatPanel.render('divchat');

                 messagePanel.hide();
                ChatPanel.show();
            }


             else { alert('error loading first radius'); }

         },
        failure: function (result, request) {

             alert("Error: " + result.statusText);
         }

         });  
return false;
}

Here is the result obtained from the webservice:

{
    "status": "success",
    "message": "Messages are listing below",
    "result": {
        "sender_name": "Paul",
        "reciever_name": "Clay",
        "sender_pic_url": "Images/f1.jpg",
        "receiver_pic_url": "Images/f2.jpg",
        "messages": [
            {
                "message_from": "YES",
                "message_text": "hi, how r u?",
                "time": "12:00am"
            },
            {
                "message_from": "NO",
                "message_text": "hi, where are you?",
                "time": "1:00am"
            },
            ...
        ]
    }
}

I am unsure of where things went wrong in this process.

Answer №1

It's important to follow the proper approach when assigning items to the store.items array. Currently, it is undefined and this method is not recommended.

To populate the store with items, you can either specify a Json proxy object in the store so that it loads automatically, or

You can use the store.add() function to add new items.

Based on your code, it seems like you are using the store.load() method. Could you provide more details on how you load data and communicate with the server?

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

Tips on setting dynamic headers in tabulator

Is there a way to dynamically set the header name passed from JSON? Additionally, how can I hide multiple columns in Tabulator instead of just one? I would also like to be able to show/hide multiple columns on button click. These questions pertain to a co ...

Using jQuery to locate the href attribute within a TD element with a specific

Update URL <td class="posts column-posts"><a href="edit.php?tshowcase-categories=ops&amp;post_type=tshowcase">2</a></td> Current URL: <span class="view"><a href="https://blog.company.com/team/tshowcase-categories/ops ...

Loading Data in CodeMirror using XMLHttpRequest (XHR)

Is there any progress in loading the content into CodeMirror using XHR? ...

Serializing works fine, but when attempting to deserialize, a MismatchedInputException is thrown

My initial experience with JSON is posing some challenges. While serializing my objects works smoothly, I encounter a MismatchedInputException when attempting to deserialize. The issue arises as Jackson struggles to deserialize an array in my WateringSched ...

Error displaying city data in Laravel through Ajax dropdown

I am encountering issues with ajax for a dropdown city. Clicking on the province section is not displaying city data. Screenshoot: https://i.sstatic.net/Z13ez.png Regency.php namespace App; use Illuminate\Database\Eloquent\Model; use ...

Web application error: Karma and Webpack cannot locate Angular controller

After following a blog post on setting up an Angular project with webpack, I used an associated boilerplate on Github. Although the app is functioning properly, Karma seems to have trouble finding the controller it needs to test. // karma.config.js modul ...

Encountering a "400 Bad Request" error when using Ajax within WordPress

I've been trying to submit a form using Ajax within a plugin. I had two plugins, the first one was initially working but has stopped now and I can't seem to find any errors. I don't think the issue lies in the code itself, but I'm feeli ...

What could be the reason for my function failing to return true?

I have a function that can check if a script is loaded: function checkURLExistence(url){ $.ajax({ url: url, success: function(data){ //alert(url + ' exists'); console.log(url + ' exists'); return ...

Unexpected Results from WordPress Ajax Request

Currently, I am utilizing the snippets plugin in conjunction with Elementor. To implement an ajax function as a snippet, I have set it up like so: add_action( 'wp_ajax_get_slug_from_id', 'get_slug_from_id' ); add_action( 'wp_ajax_n ...

Flotr2 bar graph - incorrect data formatting detected

After carefully analyzing the ajax call, I am successfully inserting values and implementing tricks into an array. $.ajax({ async: false, //a crucial trick for this operation url: '/Test/Test.jsp', dat ...

I created an image that can be clicked on, but unfortunately it only functions properly on the

I am currently working on creating an image that can be clicked to cycle through different images all within the same frame. While I have managed to get it to work, I am facing a limitation where it only responds to one click. count = 1; function myF ...

What is the best way to attach a Label to a THREE.Mesh object?

I'm looking to show the name of a Three.js Three.Mesh as a label when hovering over the mesh. Does anyone know how to achieve this in Three.js? Could someone provide an example code snippet for this? ...

Using Jquery's closest technique to target a class located outside of the parent div

I am having trouble accessing a class outside of its parent div $(document).on('click', '.delete_photo', function(event){ var del_id = $(this).attr('id'); $.ajax({ type:'POST', cache: false, url:&apo ...

Encountered an issue while parsing JSON using PHP

Having trouble interpreting the specific term in my JSON result. This is a sample of my JSON result: If "curriculum" has "__class": "chapter", I expect to see: <h2>Title from chapter</h2> and if "__class": "lecture" is present, I'm loo ...

Issue in CakePHP after modifying the directory of Index

I'm currently working on a project using CakePHP and have come across an issue. Our team developed an Ajax function that sends data to a PHP function responsible for adding a folder (known as "ordner" in German) to the database. Initially, everything ...

Transforming a string into JSON with proper sanitization

When web scraping, the website returns a string like this on get request: jQuery18305426675335038453_1429531451051({"d":[{"__metadata":"cool"}]}) The complete code snippet is provided below: var baseUrl = "http://SOMEURL.COM?spatialFilter=nearby(52.4795 ...

The error message TS2304 is indicating that the name 'Set' cannot be found in electron-builder

I am trying to utilize the AppUpdater feature in electron-builder for my Electron Application. Upon importing the updater in my main.ts file: import { autoUpdater } from "electron-updater" An error is triggered when running the application: node_module ...

Retrieve the JSON data along with its corresponding keys

My goal is to showcase JSON data that looks like this: var jsonData = ({ "respond": 1, "paging": { "stillmore": 0, "perpage": "10", "callpage": "1", "next": 0, "previous": 0, ...

Retrieving the file name from the line number within the trace stack or Error object

I'm working on enhancing my error handling in Node.js/express. Does anyone know a method to retrieve the filename and line number where an error occurs in my code? error-handler.js, utilizing console.trace, only handles errors at the route level...n ...

What are the steps to approve an Amazon Pay request for retrieving a "get checkout session"?

Exploring the integration of Amazon pay as a payment option for customers on my website has led me to encounter some challenges with understanding the request headers required for calling the Amazon Pay API. Attempting a request to 'https://pay-api.a ...