loop through the array of objects using ng-repeat in Angular

I am facing an issue where I need to display the data fetched from a service in my application.

The service response is as follows:

Object {resultado:array[2], mensaje: "4 personas `necesita tu ayuda"}

Currently, the "resultado" field contains an object with two arrays.

resultado
object 0 {id_persona : 1, nombre: Miguel, apellido: Gonzalez.....}
object 1 {id_persona : 1, nombre: Miguel, apellido: Gonzalez.....}

I want to utilize ng-repeat to populate the following list:

<div id="request-uptutor" class="background-uptutor">
<div id="header-home"></div>
<div id="home-alert">
    <h4 class="type-text-list5 type-font3 type-text-color5-titulos">{{dataRequest.mensaje}}</h4>
</div>
<h5 class="type-font3 type-text-list5 type-text-color6" style="margin-left:20px;">Tutorías solicitadas</h4>
<div class="lists list-image">
    <ul>
        <li ng-repeat="">
            <img src="assets/img/images.jpg" class="img-circle list-blocks">
            <div class="information-class list-blocks">
                <span class="type-text-list1">Mateo Martinez</span><br>
                <span class="type-text-list2 type-text-color5-titulos">Universidad ICESI</span><br>
                <span class="type-text-list3 type-text-color2">16 de diciembre de 2015 | 13:00-15:00 Grupal(4 personas)</span>
            </div>
            <div class="datatime-class list-blocks" style="float:right !important;">
                <span class="type-text-list5 type-font3 type-text-color5-titulos">$30,000</span><br>
                <div class="btn-ok icon-confirmation"></div>
                <div class="btn-cancel icon-confirmation"></div>
            </div>
        </li>
    </ul>
</div>

However, I'm unsure how to proceed with this.

I have already set up the controller, but I need assistance on how to retrieve the object with the arrays and use ng-repeat to iterate over them.

I would greatly appreciate if someone could provide me with an example to clarify the concept, which I can then implement in my controller. Thank you very much.

javascriptangularjsjsonangularjs-ng-repeatfrontend

Answer №1

Do you want it displayed something like this? - I'm not sure where exactly you intend to display the field values, but you can insert them within double curly braces:

<li ng-repeat="result in obj.resultado">
    <img src="assets/img/images.jpg" class="img-circle list-blocks">
        <div class="information-class list-blocks">
            <span class="type-text-list1">{{result.nombre}}</span><br>
            <span class="type-text-list2 type-text-color5-titulos">Universidad ICESI</span><br>
            <span class="type-text-list3 type-text-color2">December 16, 2015 | 13:00-15:00 Group(4 people)</span>
        </div>
        <div class="datatime-class list-blocks" style="float:right !important;">
            <span class="type-text-list5 type-font3 type-text-color5-titulos">$30,000</span><br>
            <div class="btn-ok icon-confirmation"></div>
            <div class="btn-cancel icon-confirmation"></div>
        </div>
</li>

Answer №2

If you want to accomplish your goal, simply follow these steps:

<div id="request-uptutor" class="background-uptutor">
<div id="header-home"></div>
<div id="home-alert">
    <h4 class="type-text-list5 type-font3 type-text-color5-titulos">{{dataRequest.mensaje}}</h4>
</div>
<h5 class="type-font3 type-text-list5 type-text-color6" style="margin-left:20px;">Requested Tutorials</h4>

<div class="lists list-image">
    <ul>
        <li ng-repeat="person in obj.resultado">
            <img src="assets/img/images.jpg" class="img-circle list-blocks">
            <div class="information-class list-blocks">
                <span class="type-text-list1">{{person.nombre}}{{person.apellido}}</span><br>
                <span class="type-text-list2 type-text-color5-titulos">{{person.universidad}}</span><br>
                <span class="type-text-list3 type-text-color2">December 16, 2015 | 13:00-15:00 Group(4 people)</span>
            </div>
            <div class="datatime-class list-blocks" style="float:right !important;">
                <span class="type-text-list5 type-font3 type-text-color5-titulos">$30,000</span><br>
                <div class="btn-ok icon-confirmation"></div>
                <div class="btn-cancel icon-confirmation"></div>
            </div>
        </li>
    </ul>
</div>

To enhance this further, include a filter 

ng-repeat="person in obj.resultado | filter: textoBusqueda"
.

Then add another input field 

<input placeholder="Search" ng-model="textoBusqueda"></input>

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

Showing validation in a Bootstrap modal after it has been closed

I have implemented a form view in AngularJS with a modal from Angular-ui to showcase my form. I am happy with how everything functions, but there is one issue - when I dismiss the form, validation pop-ups appear if the form is not valid. Here is an overvi ...

angularjsvalidationtwitter-bootstrapangular-uiangular-ui-bootstrap

Set up your Typescript project to transpile code from ES6 to ES5 by utilizing Bable

Embarking on a new project, I am eager to implement the Async and Await capabilities recently introduced for TypeScript. Unfortunately, these features are currently only compatible with ES6. Is there a way to configure Visual Studio (2015 Update 1) to co ...

javascriptvisual-studiotypescriptvisual-studio-2015babeljs

Struggling to make jQuery code function in an external file without causing clashes with additional jQuery code

When incorporating this simple code into its own separate file, I encounter some jQuery conflicts with another piece of code. jQuery(function ($) { $(".tabContents").hide(); $(".tabContents:first").show(); $("#tabContainer ul li a").click(fun ...

javascriptjqueryconflict

Combining two interconnected documents in Mongoose: merging references

Currently, I am in the process of learning how to work with NoSQL after having a background in relational databases. For this specific project, I am utilizing Express along with Mongoose. The main challenge I am facing involves callbacks when attempting t ...

javascriptnode.jsmongodbexpress

Manage YouTube video played within html code

I am working on a page that contains a YouTube video embedded in HTML. I am trying to find a way to stop the video when it is closed using the YouTube API, but so far my attempts have been unsuccessful. I have included SWFObject and jQuery in the code, yet ...

javascriptapiyoutube

Guide on extracting unique key values from an array by utilizing a different key

I have an array containing the names of products along with their storage capacities. let products = [{name: "samsung A", storage: "128GB"}, {name: "samsung B", storage: "128GB"}, {name: "samsung C", storag ...

javascriptreactjsarraysangularjsfilter

Dealing with absent keys in a dictionary

I have a custom script that I utilize to extract data from an API request. # list of each api url to use link =[] #for every device id , create a new url link into the link list for i in deviceIDList: link.append('https://website/v2/accounts/accou ...

pythonjson

Issue with Pop Up not redirecting correctly after a successful login in Azure AD

I recently integrated Azure AD with my web application. When clicking on the login window, a pop-up appears with the URL . It prompts for the Azure AD username and password. However, after successfully logging in, a code is returned as a parameter but the ...

javascriptangularazure-active-directory

What is the best way to incorporate animation using Tailwind CSS within my Next.js project?

I have a challenge with placing three images in a circular path one after the other using Tailwind CSS for styling. I've identified the circular path and keyframe style for the images. How do I configure this style in my Tailwind config file and imple ...

javascriptcssreactjscss-animationstailwind-css

Concealing website links in the browser's address bar

Running my own website on a personal server with Ubuntu server, I noticed that my public IP address is displayed in the status bar when visitors browse my site or hover over links. Even after purchasing a domain name from godaddy, I couldn't find an o ...

phpjavascripthtmlubuntu-serverurl-masking

Reversing Changes to the Database in Node.js using Mongoose on Error

In my node.js server, I have a complex express route that interacts with the database using mongoose, making multiple modifications. I'm looking to introduce a mechanism that can revert all changes in case of any error. My initial thought was to incl ...

javascriptnode.jsexpressmongoosetry-catch

Receiving the latest global variable in JavaScript using jQuery

I keep receiving undefined type for: $(".ui-slider-handle").attr("title", '"'+current+'"'); Even though I can successfully alert the updated value of current on line 29, it seems to not be working with .at ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3

How to use Angular 2 to communicate with JavaScript API whenever the router switches to

I am currently working on an Angular2 component that has a template which relies on JavaScript calls to load various components such as Facebook, Google Maps, and custom scripts. The necessary scripts are already loaded in the index.html file, so all I ne ...

javascripttypescriptangular

After logging in successfully, the React app needs a hard refresh to update the

I'm encountering a debugging challenge and would appreciate any assistance from the community. I've been working on my first React app and successfully implemented a Login feature, but after a user logs in, they have to hard refresh their browser ...

javascriptnode.jsreactjsauthenticationreact-redux

What are some ways to avoid sorting parameters in AngularJS when making a GET request using $resource?

My resource is: angular.module('myApp.services') .factory('MyResource', ['$resource', function ($resource) { return $resource('http://example.org', {}, {}); }]); How I send a GET request: MyResourc ...

javascriptangularjsngresource

Firebase issue: The function ref.once is throwing an Uncaught TypeError and is not recognized

I am attempting to utilize Firebase for both uploading a file and storing it in my database simultaneously. I want to track the number of uploads so that I can rename each file uniquely. While I have successfully uploaded and stored a copy in the database, ...

javascripthtmlangularjsfirebasefirebase-realtime-database

A perfectly organized and justified menu with evenly spaced horizontal list items

I couldn't find a solution to evenly spacing out a series of list items for a menu styled list. After realizing CSS alone wasn't enough, I decided to incorporate some javascript (jQuery). My goal was to have equal padding between each LI without ...

javascriptjquerycssmenucenter

Efficient method to query large datasets using Linq in AngularJS and C#

To enhance the search functionality, I need to execute a Global Search on a database table. This means that when a user enters one or more keywords and clicks the search button, the query should return all records containing any combination of the entered ...

c#angularjslinqlinq-to-sqlquery-optimization

Discovering the appropriate use cases for BeanSerializer and MapSerializer is a skill that Jackson must learn

I have a bean that returns a Map as a response, and this bean is accessed through a REST interface using RESTEasy. Instead of using MapSerializer, the jackson library internally uses BeanSerializer to send the response back. Is there any annotation being ...

javajsonrestserializationjackson

Incorporating a Streamlit Application into an Established React.js Project via an iFrame

I am in the process of incorporating a Streamlit app into my existing React.js application to take advantage of its data analysis and visualization features. Can this integration be accomplished using an iFrame? Has anyone successfully embedded a Streamlit ...

javascriptpythonreactjsiframestreamlit