Extracting data from a JSON store in Ext JS 4.1.3: A step-by-step guide

In my Ext.data.Store, I have language variables stored in JSON format like this:

{
    "language":"en_GB",
    "data":[
        {"fieldName":"browserInfo","fieldValue":"Descriptive text"}
    ]
}

This is the store I've set up:

 Ext.local.langStore = Ext.create('Ext.data.Store', {
     autoLoad: true,
     fields: [
         {name: 'fieldName', type: 'string'},
         {name: 'fieldValue', type: 'string'},
     ],
     proxy: {
         type: 'ajax',
         url: 'en_GB.json',
         reader: {
             type: 'json',
             root: 'data'
         }
     }
 });

I'm attempting to retrieve the fieldValue based on a specific fieldName. How can I achieve this using Ext? I've tested with the following code snippet:

var getLabel = function(field_id) {
    var store = Ext.local.langStore;
    var index = store.findExact('fieldName',field_id);
    if(index >= 0) {
        return store.getAt(index).get('fieldValue'); 
    } else {
        return field_id;
    }
}

Unfortunately, I haven't had much success with it as the index always returns -1.

Any assistance would be greatly appreciated,

Answer №1

Give this a shot:

let retrieveValue = function(input) {
    let storage = Ext.local.dataStorage;
    let entry = storage.searchEntry('labelName', input);
    if(entry) {
        return entry.fetch('value'); 
    } else {
        return input;
    }
}

Answer №2

After leaving a comment on the initial post (reposting for closure), I have resolved the issue:

The problem has been solved. It turns out the function itself was not faulty; rather, it was the sequence in which the testing procedure was called before the store was loaded. By including

 Ext.onReady(function() { 
      console.log(getLabel('browserInfo')); 
 });  

the issue was successfully resolved.

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

I attempted to activate the hover effect on a DOM element using JavaScript, but was unsuccessful. It appears that achieving this is not possible. However, I am curious as to how Chrome is able to

I attempted to activate the hover state of a DOM element using JavaScript, but had no success. It appears that this task is not achievable in the way I initially approached it. I have heard that creating a class with a hover function and then adding or ...

Parsing a Json object that contains a field with two distinct types, one of which is recursive

In my project, I have a TypeScript component that retrieves JSON data, and I need to parse this JSON in C# to work with the objects. However, due to the presence of: multiple type fields recursion it's becoming challenging to understand how the dese ...

Error 400 encountered in Spring MVC with Ajax

I am working on a Java application using Spring MVC and encountering some issues with sending AJAX requests to a Spring controller. I have noticed that when I include the headers "Accept", "application/json" and "Content-Type", "application/json;charset=ut ...

What is the best way to apply a specific style based on the book ID or card ID when a click event occurs on a specific card in vue.js

My latest project involves creating a page that displays a variety of books, with the data being fetched from a backend API and presented as cards. Each book card features two button sections: the first section includes "ADD TO BAG" and "WISHLIST" buttons ...

Develop React routes on the fly

Currently, I am working on a React App that requires the creation of Routes dynamically based on data models sent by the backend in JSON format. For example: { "Route1": [ { "id": 1, "visible": true, "other_data": "..." } ], "Route3": [ { "i ...

Assistance needed for mobile page layout: Seeking to have a fixed div positioned at the top of

Hey there! I could really use some assistance with a mobile site project I've been working on. My goal is to create a page with a toolbar fixed at the top of the screen, featuring previous and next buttons, while the majority of the viewport showcases ...

Troubleshooting Problems with Ruby Arrays, JavaScript, and JSON

I am facing a challenge with rendering a highcharts plugin in my rails application. I suspect it could be related to the sql queries fetching data from the database and converting them into a ruby array that the javascript code fails to interpret correctly ...

Issue with Mongoose Promise failing to transfer data to the following chain

When querying MongoDB using mongoose with promises, I encounter an issue where the result is only accessible in the initial .then(function(results){ // can send the result from here..}). However, when I manipulate the results and attempt to pass them to th ...

Exploring websocket capabilities within the Thin web server

Exploring the use of websockets with a Thin server, I have crafted code to run a clock that dynamically updates the time displayed on a webpage every tenth of a second. PAGE represents the content of the initial page to be displayed. The Thin server is i ...

How can I configure Expressjs to handle the '/' route for all incoming requests?

Using ExpressJs to build an app, users now have the ability to request a user profile using localhost:5000/user/12345. Here is how the server processes it: app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'index.html&a ...

Cross-domain scripting

I have a unique javascript code hosted on my server. I want to offer website visitors a similar implementation approach to Google Analytics where they can easily embed the script on their servers. For instance: <script type="text/javascript" src="http: ...

Retrieve all elements from an array that have the highest frequency of occurrence

Consider an array like [1,4,3,1,6,5,1,4,4]. The element with the highest frequency in this array is 3. The goal is to select all elements from the array that have a frequency of 3, so in this case we would select [1,4]. To achieve this, one possible meth ...

React components are graced with a clear icon that is visible on every element

I'm attempting to show a remove icon on a grid display when the user hovers over it with their mouse. this.state = { action: [], } <div> {this.state.action.map((value, index) => { return ( <div key={index} onMouseEnte ...

What distinction is there between utilizing a ref callback as an inline function versus utilizing it as a stable function with useCallback()?

I am working with a component that takes children as props and renders them inside a div with a callback ref. const ShowMoreText = (props: ShowLessOrMoreProps) => { const { children } = props; const [showMore, setShowMore] = useState<boolean> ...

Modifying the array structure will deselect all individual <Input> elements that have been iterated

Hoping to create a system for adding/removing sub-items with buttons that increment/decrement slots in an array, where input fields are automatically added and removed: <div *ngFor="let item of itemsInNewOrder; let i = index"> <input [(ngModel) ...

Python Mechanize file uploading capabilities

Hey there! I've been experimenting with mechanize and Python to upload a file to a website. I've had some success so far, but now I'm facing a challenge at the upload page. I understand that mechanize doesn't support JavaScript, but I&a ...

TypeScript is unable to recognize files with the extension *.vue

Can someone assist me with an issue I'm facing in Vue where it's not detecting my Single File Components? Error message: ERROR in ./src/App.vue (./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/Ap ...

What is the most effective method for merging two arrays in JavaScript?

Can a function be created to generate an array like the following? ["0-AA", "0-BB", "1-AA", "1-BB", "2-AA", "2-BB", "3-AA", "3-BB"] This particular function combines two array ...

Issue with using bind(this) in ajax success function was encountered

In my development process, I utilize both react and jQuery. Below is a snippet of the code in question. Prior to mounting the react component, an ajax request is made to determine if the user is logged in. The intention is for the state to be set when a ...

Converting JSON Date to Bootstrap's datepicker control

Here is a snippet featuring a bootstrap datepicker control. I have a JSON array and I am displaying its parsed result. How can I fetch it to an input textbox while maintaining compatibility with the datepicker? This means that when you click on the field, ...