Unable to load JSON information into an ExtJS grid

I have exhausted all the solutions I found (there are many on Stackoverflow) in an attempt to fix my extjs store issue. Despite ensuring that the grid is displayed correctly, the data still refuses to show up. Feeling perplexed, I am sharing the "store" code that I created based on the advice from this platform. I cannot figure out why the data isn't populating the grid. If you require additional details to assist me, please feel free to inquire.

store: Ext.create('Ext.data.Store', {
    autoLoad: true,
    storeId: 'StoreName',
    fields: ['id','name'],
    data : JsonObject,
    model: 'ModelName',
    proxy: {
        type: 'memory',
        reader: {
        type: 'json',
        record: 'JsonRoot'
    }
}

})

The grid loads in a new window via an ajax call. The code snippet for the new window is as follows:

Ext.create('Ext.window.Window', {
                    title: 'GridTitle',
                    height: 200,
        width: 400,
        layout: 'fit',
        items: {  
        xtype: 'grid',
                    border: false,
        columns: [
                    {
            text     : 'id',
                            flex     : 1,
            sortable : true,
            dataIndex: 'id'
        },
        {
                text     : 'name',
            width    : 300,
            sortable : true,
            dataIndex: 'name'
        }],

I suspect that the column section might not be getting recognized by ext.js, as it fails to index the name and id of the data passed in the json format.

Answer №1

The answer turned out to be much easier than expected, making me feel a bit silly for not realizing sooner.

reader: {
         format: 'json',
     root: 'jsonData'
        }

Instead of:

reader: {
         format: 'json',
     record: 'jsonData'
        }

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

In the realm of JavaScript, what happens when a function yields yet another function while also welcoming another function as an argument?

After following a Node & Express project tutorial on YouTube, I encountered the following code snippet in an async JavaScript file: const asyncHWrapper = (fn) => { return async (req, res, next) => { try { await fn(req, res, next); } c ...

Error encountered in Node.js: Attempting to modify headers after they have already been sent to the client

When attempting to create a login function and sending post requests using Postman, everything works fine with the correct email and password. However, if I try to send the wrong password, I encounter an error message stating that either the email or passw ...

Tips for sending data to a server in an object format using the POST method

Could someone kindly assist me? I am attempting to post user data in an object format, but it is not submitting in the desired way. Please, can someone help as I do not want it to create a new object. Here is how I would like it to be submitted: {"birthda ...

Transform JSON data into valid GeoJSON format using the geojson.min.js library

I have JSON data with a column called geo_coordinates, and I am using the Leaflet library to display GeoJSON. Unfortunately, Leaflet cannot read geo_coordinates because it does not recognize it as type Point along with its coordinates. After searching for ...

The search functionality for the MongoDB module is not functioning properly within my Next.js application

Working on my nextjs application, I have encountered an issue with using the mongodb node module to find all documents in one of my collections. Despite successful usage of .findOne and .updateOne for other pages like login and password reset, when I use . ...

Accessing an object from an AngularJS controller in an external function

I previously inquired about this issue and received a suggestion to add a service, but it did not solve the problem. I am trying to access a variable from a controller ($scope) within an external function. Below is a snippet of the example: app.controll ...

Avoiding the use of if statements in Javascript

I've recently started learning Javascript and I'm facing an issue with my code. I want to create a functionality where clicking on an image on one page redirects you to another page and shows a specific div based on the clicked image. To achieve ...

Fixing a Dropdown Problem in Codeigniter

I have encountered a problem with the Dropdown pop-up feature. Specifically, when I click on the "Add New" option in the Dropdown, the pop-up window fails to open. Here is the code for the Dropdown: echo form_dropdown('Birth_Certificate_Storage_id[& ...

The problem I'm facing is that all the data is being received, except for the name, when I start with the success

When I add parameters to the success URL, all data comes through, but when I add a name, it gives an error. I've noticed that if I remove the spaces between letters, it works fine. However, I want to make it function properly. Can you assist me with t ...

Passing a value from the Trigger button to the Modal button in Angular-UI Bootstrap

Seeking some help. I am working with angular-ui-bootstrap alongside php and mysql. My goal is to pass a value from a list of links (dynamically generated from php mysql) to a modal button each time the modal is loaded. HTML // The link below is generated ...

React button synchronization issue with start stop functionality

My React timer module has one input field and three buttons: Start (to begin the timer), Pause (to temporarily stop the timer), and Stop (to completely halt the timer). The issue I am encountering is that when I input a value, start the timer, then press t ...

Displaying geoJSON data from a variable instead of a file is a feature implemented by

Let's say I have a geoJSON data stored in a variable or parsed as an object: // GeoJSON stored as an object var segment = segment; // GeoJSON saved as a JSON string var json = JSON.stringify(segment); Now, the challenge is to display this geoJSON o ...

Is it feasible to maintain a persistent login session in Firebase without utilizing the firebase-admin package through the use of session cookies?

Currently, I am integrating Firebase into my next.js application for user login functionality. The issue I am facing is that users are getting logged out every time they switch paths within the site. Even though their session cookie has not expired, if the ...

Learn how to display only certain elements when triggered by the click of another

I have developed a tab system where each tab contains a unique set of questions and answers. The structure of the tabs is exactly as I envisioned, but I am facing challenges with toggling the display of answers when their respective questions are clicked. ...

Array vs Single Object - Comparing AngularJS / Javascript Data Structures (Basic)

My array is very basic [ { ticketId: 1, name: "John", }, { ticketId: 124, name: "Ads" } ] I have displayed the data in a dropdown menu <ul class="dropdown-menu"> <li ng-repeat="ticket in tickets"> <a h ...

Guide for executing Gulp tasks in a sequence one by one

Here is an example snippet: gulp.task "coffee", -> gulp.src("src/server/**/*.coffee") .pipe(coffee {bare: true}).on("error",gutil.log) .pipe(gulp.dest "bin") gulp.task "clean",-> gulp.src("bin", {read:false}) .pipe c ...

This JavaScript function is designed to strip HTML elements from a given

"p" tags are disappearing after running the javascript, but they are needed for structuring purposes. Is there a way to retain the html tags in the hidden/secondary text block even after the javascript manipulation? function AddReadMore() { //This lim ...

How can I make a clickable button or link within an anchor tag that is still able to be right-clicked?

Hey there, I'm currently working on a notification dropdown menu where each <li> contains a link or an <a> tag. I'm aiming to create something similar to Facebook's notification system. However, the challenge lies in trying to ...

Storing POST Request Data in Express

I want to use a single API endpoint for both GET and POST requests. My goal is as follows: Send multiple POST requests to /api/users with data like: {'id': 2, is_valid: 'true'} Retrieve this data by fetching the same API URL later on ...

What is the trick to ensuring that the bind submit function always works consistently instead of sporadically?

I am attempting to compare two values (min - max) from two input fields. If the min value is greater than the max value, an alert message should be displayed... The issue arises when I correct the max value and submit again, as it continues to show the sa ...