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

Encountering a problem with AngularJS material during asset precompilation

Currently, I am utilizing AngularJS 1.5 in a Rails 3.2 project incorporated within the assets pipeline. When I compile the assets using the following command; rake assets:precompile An error arises during the compilation process: /usr/local/rbenv/versio ...

What is the recommended approach for utilizing props versus global state within your components when working with JS Frameworks such as Vue?

Currently, I am delving into a larger project using Vue and I find myself contemplating the best practices when it comes to utilizing props versus global Vuex states for accessing data within a component. To elaborate, let's say I have a component re ...

The types 'X' and 'string' do not intersect

I have a situation where I am using the following type: export type AutocompleteChangeReason = | 'createOption' | 'selectOption' | 'removeOption' | 'clear' | 'blur'; But when I try to compress the cod ...

Alter numerous classifications based on varying circumstances at regular intervals

This code snippet is designed to change randomly all the <div class="percentx"> elements, for example from <div class="percent31"> to <div class="percent52"> (with values between 1-100). It works smoothly. I ...

dyld: Unable to locate symbol: _node_module_register

Embarking on my Angular2 learning journey with the help of this GitHub repository: https://github.com/angular/quickstart After running npm install, I attempted to launch the project in a browser using npm start. However, I encountered the following error: ...

The jQuery .on("change") function keeps triggering repeatedly, but I'd like it to only execute once

I'm currently working on a feature that involves detecting changes to input text fields. Every time the user makes a change in an input field, I need to capture the new value and validate it. However, I've noticed that the code I have implemented ...

The TypeScript error occurs when attempting to assign a type of 'Promise<void | Object>' to a type of 'Promise<Object>' within a Promise.then() function

I'm currently working on a service to cache documents in base64 format. The idea is to first check sessionStorage for the document, and if it's not there, fetch it from IRequestService and then store it in sessionStorage. However, I've encou ...

Get the Label Values Based on CheckBox Status

Is there a way to retrieve the values of labels corresponding to checkboxes in HTML? I have multiple labels and checkboxes next to each other, and I want to be able to get the label values if the checkbox is checked. Can you provide guidance on how to do ...

Include a photo in the notification when utilizing the sendToTopic function

I am looking to utilize the sendToTopic method for sending notifications to a topic. Is there a way to include an image in the notification? It seems that notification.imageUrl is not available as an option. ...

Tips for obtaining the dynamically loaded HTML content of a webpage

I am currently attempting to extract content from a website. Despite successfully obtaining the HTML of the main page using nodejs, I have encountered a challenge due to dynamic generation of the page. It seems that resources are being requested from exter ...

Experiencing issues with transferring JSON response from Axios to a data object causing errors

When I try to assign a JSON response to an empty data object to display search results, I encounter a typeerror: arr.slice is not a function error. However, if I directly add the JSON to the "schools" data object, the error does not occur. It seems like th ...

Efficiency of Promise-based parallel insert queries in MySQL falls short

I have developed a code in Node.js to execute insert queries using Promise.js but unfortunately, I am encountering an exception stating "Duplicate Primary Key" entry. Here is the snippet of the code: var Promise = require("promise"); var mySql = requir ...

Utilize the material-ui dialog component to accentuate the background element

In my current project, I am implementing a dialog component using V4 of material-ui. However, I am facing an issue where I want to prevent a specific element from darkening in the background. While I still want the rest of the elements to darken when the ...

The selected attribute does not function properly with the <option> tag in Angular

Currently, I am faced with a challenge involving dropdowns and select2. My task is to edit a product, which includes selecting a category that corresponds to the product. However, when I open the modal, the selected group/category is not displayed in the d ...

Mini-navigation bar scrolling

I am trying to create a menu where I want to hide elements if the length of either class a or class b is larger than the entire container. I want to achieve a similar effect to what Facebook has. How can I make this happen? I have thought about one approac ...

jQuery's capability to select multiple elements simultaneously appears to be malfunctioning

I am dynamically creating div elements with unique ids and adding span elements with specific CSS properties. $(".main").append("<div class=largeBox id=" + counter + "</div>"); $(".largeBox").append("<span class=mainTitle></span>"); ...

Using Vue Js directive to implement a Select2 component

I've been exploring the example of the Vue.js wrapper component and trying to customize it to use a v-select2 directive on a standard select box, rather than creating templates or components for each one. You can view my implementation in this JS Bin ...

Looking to access the value of a cookie using its name in AngularJS

I have a cookie in my application that needs to be read using angularJS ngCookies. After exporting the cookies from a browser extension, I found the following JSON representation: [ { "domain": "localhost", "hostOnly": true, "httpOnly": fal ...

Tips for showcasing a drop-down menu using Jquery

I am currently utilizing jQuery to showcase a drop-down menu. It is successfully working for a single menu and displaying the appropriate drop-down. However, when I attempt to use more than one menu, it displays all of the drop-down menus simultaneously. I ...

Ways to determine changes made to a table in MSSQL

What is the most efficient method to determine if a table or row in MSSQL (using Node.js) has been modified? I am looking to verify whether my database has been updated within the past 30 minutes. If no updates have been made in the last half hour, I pla ...