Leverage AngularJS to effectively parse JSON data using scope variables

I am trying to JSON parsing in AngularJS using $stateParams in the controller below:

 rerunApp.controller('rerunCategoryListCtrl', function($scope, $http, $stateParams) {
     var stpNameCat = $stateParams.nameCat;
             $http.get(JSON URI).success(function (data, status) {
                  var response = data.Items.stpNameCat;
                  console.log(response);
             });
    });

Here is the structure of my JSON data:

{
   cacheFileUpdate: 1435651202,
 - Items: {
       + newsProgram: [...],
       + entertainProgram: [...],
       + documentaryProgram: [...],
       + benefitProgram: [...],
       + kidsProgram: [...],
       + dramaProgram: [...],
       + oldProgram: [...],
       + etcProgram: [...]
   }
}

When running the app, I am aiming to extract items based on the value of $stateParams. For example, if $stateParams is 'newsProgram', I want to retrieve items in newsProgram. However, I am encountering an error at data.Items.stpNameCat. How can I resolve this issue or are there any alternative solutions? Thank you!

Answer №1

To access your key as a variable, you can use data.Items[stpNameCat] instead of data.Items.stpNameCat.

In my opinion, it would be beneficial to send the category to the server using $http and have it retrieve only the necessary data. However, the choice of design is ultimately up to you.

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

Show the id value of the event triggered by eventclick

I am currently attempting to retrieve the id of the event so that I can remove it from the database. My approach involves using eventClick, where a dialog pops up when the user clicks an event prompting them to remove it. In order to proceed with this oper ...

Challenge with uploading Minio presigned URLs

I am encountering a problem with the Minio presigned URL. While I have successfully obtained the URL and used the PUT method to insert my file into my Minio bucket, I am unable to open certain file types such as jpg, png, or pdf. This is due to Minio autom ...

Display the designated element upon clicking the designated link exclusively

I'm working with this specific HTML setup: <a href="#" class="dp">Click me</a> <div class="dp_div" style="display: none;"> this is the content within the div </div> My goal is to display the hidden div with a class of "dp_ ...

Tips for validating the input type "password"

Below is the Jquery Script that I am using: $(document).ready(function(){ $("#myForm").validate({ rules: { username: { required:true }, password: { required:true ...

When I modify the state in Vue.js, the two-way binding feature does not seem to function properly

I'm facing an issue with my dynamic array "slots" of objects which looks something like this: [{"availability": 1},{"availability": 3}] I render multiple inputs in Vue.js using v-for like so: <div v-for="slot in array"><input v-model="slot.av ...

Ways to verify if element has been loaded through AJAX request

I am trying to determine if an element has already been loaded. HTML <button>load</button> JS $(document).on('click','button',function () { $.ajax({ url: 'additional.html', context: document ...

Facing continuous 404 errors while working with nodejs and express

While attempting to collect data from a local host webpage's registration form that captures user information, I encounter an issue upon pressing the submit button A 404 Error is displayed stating "page not found", preventing the collection and out ...

The Google Chart is failing to show up on the screen

I'm having trouble implementing a feature that involves selecting a region from a dropdown list and requesting rainfall data to display in a Google Chart. Unfortunately, I've encountered some issues with it. Could you please help me identify ...

Switch out 2 Bootstrap columns for 2 concealed columns with just a click. Utilizing Rails 4 and Bootstrap

Using Twitter Bootstrap 3 for a column system showcasing four similar advertisements at the bottom of the page. Code Snippet: <div class="row similar"> <% @recomended_ads.each do |advertisement| %> <div class="col- ...

Utilizing ng-options to dynamically populate a select element with data received from a

Currently, I am receiving a promise in the following manner. GetAgentsPromise.then(function(response) { GetAgentsPromise.then(function(response) { $scope.ClientAgents.id = response.data.d.AgentIDs; $scope ...

Analyzing JSON data of a massive 50 GB and converting it into a Pandas Data

Currently, I am faced with the task of loading approximately 50 GB of 6,000 JSON files into a pandas dataframe. The method I am using involves the format_pandas function to set up my pandas data frame while reading each JSON row: path = '/Users/shabi ...

The Autocomplete feature from the @react-google-maps/api component seems to be malfunctioning as it returns

I'm encountering some difficulties with the Autocomplete component in @react-google-maps/api. While Autocomplete is working and displaying options, clicking on an option fills the input box but I'm only getting 'undefined' from the Plac ...

PHP code using the json_encode function to encode an array of 3 elements does

I'm facing an issue with a mysqli query that is supposed to return a multidimensional array. The problem arises when I attempt to encode the PHP array: array(3) { [0]=> array(8) { ["cod_evento"]=> string(1) "3" ["titulo"]=> ...

Plan the timing of dispatch in the reducer

While solutions like redux thunk exist for dispatching actions asynchronously, I recently encountered a situation like the one below: import {store} from "./store"; const initialState = { todos: [] } ​ function todoApp(state = initialState, action) { ...

Troubleshooting JSON serialization problem in Scala/Play Framework

I have created a unique custom data structure to map database results: case class Filter(id: Int, table: String, name: String, Type: String, structure: String) The final object type is List[Filter] that should be represented in JSON format as shown below ...

jQuery Counter Effect encountering isNaN error when trying to display a number retrieved from a get API object

I am looking to display the numerical data retrieved from an API using JSON. I want to incorporate a counter effect that displays "isNaN" if necessary. The API URL returns an object with the total number saved in data.data. Can anyone assist me with achi ...

Validation of form groups in Angular 2 using template-driven approach

I am seeking guidance on how to handle form validation in Angular 2 template-driven forms. I have set up a form and I want to display a warning if any input within a group is invalid. For example, consider the following form structure: <form class="fo ...

Guide on displaying JSON data on an ASP.NET web form

Looking for assistance with showing data from a JSON API in Asp.net. As a beginner, any step-by-step guidance would be greatly appreciated. ...

Maximizing the Use of Multiple Conditions for Styling in AngularJS

I have a table where I need to set different colors based on the values in one of the columns. I've successfully managed to set two colors using NgClass, but I'm unsure how to set up three different conditions. <scri ...

How can I easily implement basic password protection on a straightforward Next.js web app hosted on Vercel?

Adding a simple password validation step to a dashboard that only a select few would access. The data is not highly sensitive, but some basic protection is desired to limit unauthorized access. While not expecting targeted attacks from hackers, the goal is ...