Saving a JSON file in an AngularJS variable for seamless integration with 'ng-repeat' functionality

This project aims to showcase Oracle PL/SQL records on a website. I followed the steps outlined in this tutorial () to establish a connection with the database. While I successfully stored and displayed values for a single record, I encountered difficulties when attempting to add multiple records.

Example JSON Data
[  
 {  "firstName":"FN1",  
    "lastName":"LN1",  
    "email":null,  
    "createdBy":-1,  
    "createdDate":"2013-09-24"  
 },  
 {  "firstName":"FN2",  
    "lastName":"LN2",  
    "email":null,  
    "createdBy":-1,  
    "createdDate":"2013-09-24"  
 },  
 {  "firstName":"FN3",  
    "lastName":"LN3",  
    "email":null,  
    "createdBy":-1,  
    "createdDate":"2013-09-24"  
 },  
 {  "firstName":"FN4",  
    "lastName":"LN4",  
    "email":null,  
    "createdBy":-1,  
    "createdDate":"2013-09-24"  
 },  
 {  "firstName":"FN5",  
    "lastName":"LN5",  
    "email":null,  
    "createdBy":-1,  
    "createdDate":"2013-09-24"  
 }  
]  

The implementation utilizes a factory to handle the data from the JSON, but I'm struggling to store more than one record at a time. My goal is to iterate through the records as shown in this example: http://jsfiddle.net/pJ5BR/124/.

I welcome any suggestions or guidance on how to tackle this issue. Below are the current definitions of the factories:

services.js:  
services.factory('QueryFactory', function ($resource) {
    return $resource('/Query/rest/json/queries/get', {}, {
        query: {
            method: 'GET',
            params: {},
            isArray: false
        }
    });
});

controllers.js:  
app.controller('MyCtrl1', ['$scope', 'QueryFactory', function ($scope, QueryFactory) {

    QueryFactory.get({}, function (QueryFactory) {
        $scope.firstName = QueryFactory.firstName;
    });
}]);

Answer №1

When you use QueryFactory.get(), the result is not stored within QueryFactory itself, but in a returned promise object. It's important to note that you should be using query() instead of get() because the response is an array and not a single object.

To ensure your controller functions correctly, it should be structured like this:

app.controller('MyCtrl1', ['$scope', 'QueryFactory', function ($scope, QueryFactory) {
    $scope.results = QueryFactory.query();
    // The $scope.results variable is assigned a promise object initially and gets updated with the AJAX response later
}]);

You can then display the data in your HTML as follows:

<ul ng-controller="MyCtrl1">
  <li ng-repeat="result in results">{{result.firstName}}</li>
</ul>

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

Quick method to retrieve the remaining elements in a sequence (such as an array)

Is there a more concise way to get the remainder of an iterable, such as an array? For example: const arr = ['a', 'b', 'c']; const brr = arr.slice(1); Could this be achieved in a shorter manner, possibly utilizing destructur ...

Problem with integrating ApolloClient in NativeScript

After successfully creating a standard app using tns create project --ng, everything was running smoothly. However, I decided to integrate graphQL into the project, so I added apollo-client and graphql tag: npm install apollo-client --save npm install ang ...

Can you provide some insight into why the init() method is throwing an error?

My project utilizes DynamoDB access through https://www.npmjs.com/package/react-native-dynamodb. I followed the code provided on the website for implementation. The issue I'm facing is that when hovering over my .init() method in WebStorm IDE, it sho ...

Having difficulty implementing interval to a maximum of 2 minutes or until a certain condition is fulfilled in Angular

In my current scenario, I am working with two APIs - apiOne and apiTwo. When I call apiOne, it should return a response. If the response is successful, then I need to pass this response as a parameter to apiTwo. ApiTwo will then provide another response wh ...

HTML and JQUERY elements transitioned

I am currently working with a pre-existing code that was developed by someone else. The website is built using PHP, HTML, and JQUERY (WordPress with WooCommerce). My task involves inserting tabs into an existing section of the website. However, I am facin ...

Transferring a variable after a successful jQuery call

I recently posted a similar question on Stack Overflow, but it seems like the responses there disappear quickly and I didn't receive a satisfactory answer. Personally, I find it easier to understand things when they are related directly to my own cod ...

Tips for successfully transferring the nested service and retrieving the response from an Angular factory to a controller

After making the Http Request and receiving the response from the first Service call, I then pass that response from the first service into the second service and receive the response back to the controller. Now that I have the response, I need to find a ...

What is the best way to iterate through values in JSON data?

I have a simplified JSON data set that I need to loop through: { "Meta Data": { "1. Information": "Daily Prices (open, high, low, close) and Volumes", "2. Symbol": "TGT", "3. Last Refreshed": "2018-11-20 14:50:52", "4. Output Size": "Compa ...

"Seeking a more flexible JSON parser that allows for greater

I am in need of passing various strings that are formatted as json to a json parser. The issue is that jQuery.parseJSON() and JSON.parse() strictly support only a specific json format: If a malformed JSON string is passed, an exception may be thrown. For ...

Exploring how to search for Json attribute fields in Laravel models using the Eloquent builder

I am looking to filter a JSON field (post) in my database using Eloquent builder. Can someone assist me with querying using Eloquent? attributes: array:17 [▼ "id" => 2 "admin_id" => 0 "email" => "& ...

Issue with "Access-Control-Allow-Origin" header missing in express and react application

I've decided to work on a Node/Express project to improve my JavaScript skills, but I'm facing an issue with 'Access-Control-Allow-Origin'. For some reason, I can't do a get request from the front end and despite looking at other p ...

Is it possible to invoke a JavaScript function from within a CSS file?

Currently, I am focusing on developing responsive web design and looking for ways to avoid creating multiple versions of each page based on screen width variations. The struggle lies in managing font sizes effectively. While attempting to style them using ...

Customize your click event with conditional styling in React

When the onClick event is triggered, I am attempting to modify a class by calling my function. It appears that the function is successfully executed, however, the class does not update in the render output. Below is the code snippet: import React from &ap ...

Tips on editing point values in Highcharts

I'm currently working with a Highchart that receives JSON data through AJAX and jQuery within a setInterval function. However, when I use series.data[i].y = response[i].y, the y value changes but it doesn't reflect on the chart itself - the heigh ...

Download a JSON file from an angularjs client device

I'm in the process of adding offline functionality to a Cordova app I'm developing. I have a PHP file that retrieves a list of images as JSON, which I then save on the client device using the FILESYSTEM API. However, when I try to display the ima ...

Unlocking the potential of AngularJS: A guide to using factories effectively across

I created a factory function to provide specific options for all name fields and I am looking to globally utilize or invoke that factory in the application. How can I achieve this global usage? Below is the code snippet I have written: checks.factory(&ap ...

Value in ng-model does not display in the <select> element

My HTML code looks like this: <label class="item item-input item-stacked-label" ng-repeat="nl in normativas"> <select ng-model="nl.idResultado"> <option value="1">OK</option> <option value="2">NOT</op ...

How can we prevent MOXy from displaying the data type in JSON output when marshalling a List<?>?

Is there a way to prevent the type from being displayed when marshalling a List<?>? For example, when marshalling a List<?>, the result is [{"type" : "person","id":"1"},{"type" : "person","id":"2"}] }, and it also includes the type="Person" in ...

Discover the ID or HREF linked to the current date using moment.js

I'm looking to dynamically add an active class to the current day in my web application. An example of how it currently works is shown below: $( document ).ready(function() { $('a[href*="2208"]').addClass('active'); }); My goal ...

Manipulating text on an image without using canvas, using vanilla JavaScript

I've been working on a project to create a meme generator without using canvas, as part of my DOM manipulation practice in vanilla JavaScript. I'm facing challenges in adding text to the user-submitted pictures and need some guidance in achieving ...