Access the values within an array located inside a data object by utilizing ng Repeat function

Attempting to utilize ng repeat for extracting values from an array.

Below is the HTML code:

 <ion-list ng-repeat="item in locationresult">
        <ion-item >
            <ion-checkbox ng-repeat="innerItem in item.loc[$index]">
                <h2>{{innerItem.name}}</h2>
                <p>Income:1334 vs Expenses:3742</p>
            </ion-checkbox>

        </ion-item>
    </ion-list>

Here is the controller:

  angular.module('starter').controller('locationCtrl', function($scope, $state, userlog, $http, $timeout) {

    $scope.init = function() {
        $timeout(function() {
            alert(userlog.email);
            document.getElementById("locresult").textContent = "";

            var request = $http({
                method: "post",
                url: "http://expensetracker.linkwebz.com/Home/locationsearch",
                data: {
                    email: userlog.email,
                },
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            });

            /* Check whether the HTTP Request is successful or not. */
            request.success(function(data) {
                console.log(data);

                $scope.locationresult = data;

            });
        });
     };
  });

Data object:

Object { loc: Array[3] }

object
loc:Array[3]
 0:Object
  iduhlocation:"1"
  location_idlocation:"1"
  name:"mark"
  user_iduser:"177" 
 _proto_:Object 
 1:Object
 2:Object
 length:3
 _proto_:Array[0] 
_proto_:Object

Struggling to iterate through the array and display all the data in the HTML. Any suggestions on how to achieve this?

Answer №1

If your data is structured as shown, you can optimize by using only one ng-repeat:

<ion-list ng-repeat="item in locationresult['loc']">
     <ion-item >
           <ion-checkbox>
               <h2>{{item.name}}</h2>
               <p>Income:1334 vs Expenses:3742</p>
           </ion-checkbox>
     </ion-item>
</ion-list>

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

Dealing with a syntax error in JavaScript (Codecademy)

I have been working my way through the JavaScript course on Codeacademy and for the most part, I've been able to figure things out on my own. However, I've hit a roadblock with my code and can't seem to get it right. Here is the code I&apos ...

The text box remains disabled even after clearing a correlated text box with Selenium WebDriver

My webpage has two text boxes: Name input box: <input type="text" onblur="matchUserName(true)" onkeyup="clearOther('txtUserName','txtUserID')" onkeydown="Search_OnKeyDown(event,this)" style="width: 250px; background-color: rgb(255, ...

Why won't my files upload with AngularJS?

$scope.uploadFiles = function () { //debugger; var request = { method: 'POST', url: 'http://example.com/upload/', data: formdata, headers: { ...

Replace minor components (SVG) within the primary SVG illustration

I'm interested in transforming SVG elements into the main SVG element. For example, let's say the black square represents the main SVG element. I want to change elements 1, 2, and 3 to different SVG elements using JavaScript code. However, I am u ...

What is the process of refreshing a page post-loading?

I'm working on a fundraising webpage and I want to display the live amount of money raised. Essentially, when one user donates while another is viewing the total amount raised, I want the displayed number to update in real-time. My backend setup incl ...

When trying to upload a file to S3 using a presigned URL, a 403 error

Using Node.js to generate a presigned URL for Amazon S3 in order to upload an image to a bucket. var aws = require('aws-sdk'); // Retrieve presigned URL from S3 exports.S3presignedURL = function (req, res) { var s3 = new aws.S3(); var params ...

The AngularJS ui-bootstrap modal challenge with instances

Encountering an issue with my AngularJS app (version 1.4.7) and the latest version of ui.bootstrap. The problem arises when attempting to inject $uibModalInstance, resulting in the error message Unknown provider: $uibModalInstanceProvider Below is the con ...

How can I address the issue of having multiple console logs within the

I am facing an issue where my code is logging to the console 3 times upon page load and incrementing its index. I cannot figure out why this is happening despite attempting to make adjustments within a useEffect. My project involves using the typewriter-ef ...

Guidelines for executing a PHP script upon a button click

I am new to learning PHP. I have a jQuery code that I need to implement in PHP. The active class simply changes display:none to display:block. You can find the code here. $(document).ready(function(){ $(".cecutient-btn").click(function(){ event. ...

Do you need to use jQuery with bootstrap or is it optional?

My experience so far has been primarily with the jQuery library, but I recently started delving into AngularJS. While I've gone through a couple of tutorials on Angular, I'm still uncertain about its specific advantages and when it's best t ...

HTML5 enables users to pick their preferred font style

In my JavaScript and HTML5 course, I am working on developing a website where users can choose the background color and decide between using SANS SERIF or SANS fonts. The background color selection feature is already functioning successfully -- var inputC ...

"Node.js is giving an error stating that the object does not have a

I am attempting to save the user details from the registration form into a JSON file for authentication purposes. However, I am having trouble appending the data in the correct format. Here is the code snippet that I have tried: var filename = "./user_log ...

Ways to expand the `Array.prototype` from an external library in a Node.js environment

While enjoying my time on hackerrank with pure JavaScript, I decided to steer clear of extra arrays or math libraries, unlike the convenience of using python. My approach is robust, but now I'm considering utilizing sugar.js or underscore. I came acr ...

Store the value of $scope.data in a variable within the same controller

Here is the issue with my code: $scope.data = {}; var init = function () { $http.post('views/Report.aspx/GetMailReport', {}) .success(function (data, status, headers, config) { $scope.data ...

The shared hosting environment encountered an error during the Next JS build process

When I execute the command "npm run build" on my shared hosting server, it throws an error message: spawn ENOMEM. Interestingly, this command runs perfectly fine on my localhost and has been running smoothly on the hosting server for a few weeks until yest ...

Prepare fixtures for commands in Cypress before executing the hook

One of my main tasks is to load the fixtures file only once and ensure it is accessible across all project files. To achieve this, I created a fixtures.js file with the following content: let fixturesData; export const loadFixturesData = () => { cy ...

Incorporating a classList.toggle into a snippet of code

button, p, h1, h2, h3, h4, h5, a{ /* Define specific elements to use "fantasy" font */ font-family: Tahoma; } #main_body{ margin: 0px auto; background-color: #dedede; } #top_body{ /* Remove margin for simplicity */ } #t ...

When using navigator.mediaDevices.getUserMedia on an iPhone, the webcam is activated in fullscreen mode

I'm facing an issue with the webcam functionality on my app. It works perfectly on Android and Windows, but when I try to use it on iPhone, the webcam opens in a separate full-screen view. Any ideas on how to resolve this? Thank you for your help in a ...

Tips for creating a customizable set of normalization guidelines for an AngularJS and .NET Web Services application

Imagine you have a web application with AngularJS front-end and .NET Web Services back-end. You need to implement a set of normalization rules for form values. For instance, ensuring that an item's name contains only single spaces, replacing "Parkway" ...

What are some strategies for improving the speed of searching through an array of objects?

I've been exploring more efficient ways to search through an array of objects as my current approach is too slow. The array I'm working with has the following structure: [ { fname: 'r7942y9p', lname: 'gk0uxh', em ...