What is the best way to load an ExtJS combobox with a JSON object that includes an array

After retrieving the following JSON from the backend:

{
    "scripts": [
        "actions/rss",
        "actions/db/initDb",
        "actions/utils/MyFile",
        "actions/utils/Valid"
    ],
    "success": true
}

The JSON data is stored as follows:

this.store = new Ext.data.JsonStore({

    proxy: new Ext.data.HttpProxy({
        url: "http://www.example.com",
        method: 'POST'
    }),
    baseParams: {
        appId: "hsvdvndcnwvwbasxcwyc"               
    },
    root: 'scripts',
    fields: ['value']

});

A combobox element is created as shown below:

this.aField = new Ext.form.ComboBox({
    fieldLabel      : 'action',
    name        : 'actionName',
    anchor      : "95%",                     
    allowBlank      : false,
    emptyText       : "Select action",            

triggerAction   : 'all',
lazyRender      : true,
mode            : 'remote',
    store           : this.store,
valueField      : 'value',
displayField    : 'value'
});     

Although the response is received successfully, the dropdown list of my combobox is empty. It displays 10 blank lines corresponding to the number of items in the JSON. I believe the issue lies within the 'fields' property of the JSON Store. Can someone provide guidance on what should be included there for it to function correctly?

Appreciate any help!

Answer №1

Consider adjusting the code for "JSON store:" by adding root: 'scripts' inside the reader object, including the type, and incorporating the reader in the proxy.

The updated JSON store: code should resemble the following:

this.store = new Ext.data.JsonStore({
   proxy: new Ext.data.HttpProxy({
        url: "http://www.example.com",
        method: 'POST',
        reader: {            
                  type:'json',
                  root: 'scripts'
        }
    }),
    baseParams: {
        appId: "hsvdvndcnwvwbasxcwyc"               
    },

    fields: ['value']
});

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

The issue with PHP array not functioning properly when used alongside a while loop

My PHP code is giving me an error message when I try to display information in the browser: Notice: Array to string conversion in. Can someone help me with this? I need to display this information from a function without creating a new one for every requ ...

Bot on Discord using Discord.Js that generates unique invites for users

I'm trying to find a way to generate an invite link for users to keep track of invites. The code I have currently is creating the invite for the Bot instead. const channel = client.channels.cache.find(channel => channel.id === config.server.channel ...

Exploring locations using the Google Geolocation API

I have a website and am trying to determine the location of my visitors. I came across this code on Google Code: <script type="text/javascript" src="gears_init.js"></script> <script type="text/javascript"> var geo = google.gears.factory ...

Stop the slider when a video pops up

Years ago, I had a slider created for me that supports both images and video with a timer. However, the issue I'm facing is that when the timer runs every 10 seconds, the video gets cut off if it's not finished playing. Below is the json file st ...

React Chart.js allows for consistent spacing for x-axes by displaying dates in a well-organized

After incorporating displayFormats in scales.x, I noticed that my xAxes labels are spaced differently based on the data object they contain. How can I adjust my xAxes labels to have equal spacing? The code snippet is displayed in the following image. Pleas ...

Decoding JSON data into Java objects with RestTemplate and Jackson

I'm facing some challenges with deserializing JSON into Java objects within a Spring Boot 1.5 application using Jackson. Below is an example of the JSON response, which is an array containing a single JSON object with nested attributes: [ { "d ...

Mapping JSON schema to typed JavaScript objects

Are there any tools available to generate JavaScript typed objects (JS functions) from a JSON schema? Essentially, looking for the JS equivalent of this http://code.google.com/p/jsonschema2pojo/. Thank you. EDIT: Starting with: { "description": "An ...

Working with AngularJS: Accessing a JSON file from the local directory

The answers to my previous questions on this topic have not been satisfactory. It seems that most examples and tutorials for AngularJS online always define tiny JSON arrays directly inside the JavaScript code... So, let's simplify things with a basi ...

filtering the properties of mongoose documents

I have created a schema as shown below: var UserSchema = new Schema({ firstName: { type: String, required: true }, lastName: { type: String, required: true }, email: { type: String, required: true }, location: { type: String, required: true }, p ...

How do I save basic information to a MySQL database with JQuery/AJAX in Symfony?

I am currently trying to save a basic piece of data (the file title) within a div element into a MySQL database. Can anyone help me identify any errors in my code? Below is the script I am using: $( document ).ready(function() { $( "#store-button" ). ...

Exploring the object structure received from AngularFire

Here is the Firebase query that I am running: var ref = new Firebase('https://<myfirebase>.firebaseio.com/companies/endo/status'); data = $firebaseObject(ref); console.dir(data); The object that I receive looks like this: d ...

Using jQuery to handle multiple AJAX XML requests

Currently, I am working on developing a JavaScript XML parser using jQuery. The idea is that the parser will receive an XML file containing information along with multiple links to other XML files. As the parser runs, it will identify tags within the file ...

How can you make sure that mouse events pass through the KineticJS stage?

Is it possible to have a PanoJS3 component covering the entire screen with a KineticJS stage on top, but still allow touch events to pass through the KineticJS stage to what lies beneath? I want shapes on the stage or layer to receive the touch events, wh ...

What could be causing a react element to fail to update?

I'm currently working on a React component that interacts with a MaterialUi text form. The component utilizes a useState hook to update based on the input received. My goal is to have another variable update when the form is submitted, which will be d ...

Detecting click events in D3 for multiple SVG elements within a single webpage

My webpage includes two SVG images inserted using D3.js. I am able to add click events to the SVGs that are directly appended to the body. However, I have encountered an issue with another "floating" div positioned above the first SVG, where I append a dif ...

How can I efficiently transfer a JavaScript array to a PHP script using the GET method?

My web application is designed with jQuery allowing users to manipulate visual elements. The next step is sending the JavaScript object state to PHP for storage in a database. While I prefer using GET, I am open to solutions that involve POST submission as ...

Masked input fails to accurately capture data

When utilizing VueJS together with the Quasar framework. An issue arises when using a masked q-input, where the value becomes incorrect after a toggle. For instance, if we start with a default value of: officeNum: 654321, mobileNum: 12345678, Then our ...

Running NodeJS scripts with ElectronJS is not possible

Goal I'm facing a challenge with executing my separate scripts located in the project/api folder. Let's take test.js as an example, where I am exporting it using module.exports. When I run my electron window and create a JavaScript file with a f ...

jQuery AJAX delivering HTML output upon completion

Currently, I am implementing a jQuery Ajax function to submit the username and password and receive a response. The functionality works seamlessly with the GET method. However, when using the POST method, it successfully sends the data but fails to retur ...

The Angular route functions flawlessly in the development environment, but encounters issues when deployed to

I have a project built with Angular 2, During development on localhost, everything runs smoothly. However, once I build a production version using (npm run build: prod) and navigate to the route on the server, I encounter a 404 error indicating that the r ...