Traversing through nested arrays within nested objects using AngularJS

In my project, I am utilizing angularjs 1 and dealing with a complex json object that has multiple levels of nesting. My goal is to use ng-repeat in order to access a nested array within the json structure.

[{
   "information": {
     "name": "simdi jinkins",
     "phone": "08037775692",
     "email": "sim04ful@gmail",
     "whatsapp": "8349493420",
     "residential": "gwarinpa",
     "office": "dansarari plaza"
   },
   "jobs": [{
     "name": "jeans and shirt",
     "measurement": {
       "shoulder": "34",
       "waist": "44",
       "neck": "86",
       "front": "42",
       "length": "33",
       "boost": "80",
       "cap": "30",
       "sleeves": "12",
       "tommy": "30",
       "thigh": "30",
       "chest": "34",
       "back": "40"
     },
     "account": {
       "method": "cheque",
       "amount": "2334",
       "advance": "3945",
       "date": "2016-07-22T09:54:06.395Z"
     },
     "date": {
       "incharge": "2016-07-22T09:54:06.395Z",
       "collection": "2016-07-22T09:54:06.395Z"
     },
     "style": "english",
     "material": "our"
   }, {
     "name": "skirt and blouse",
     "measurement": {
       "shoulder": "35",
       "waist": "45",
       "neck": "85",
       "front": "52",
       "length": "53",
       "boost": "85",
       "cap": "50",
       "sleeves": "52",
       "tommy": "50",
       "thigh": "35",
       "chest": "35",
       "back": "50"
     },
     "account": {
       "method": "cheque",
       "amount": "2334",
       "advance": "5045",
       "date": "2016-07-22T09:54:06.395Z"
     },
     "date": {
       "incharge": "2016-07-22T09:54:06.395Z",
       "collection": "2016-07-22T09:54:06.395Z"
     },
     "style": "native",
     "material": "bought"
   }]
}, {
   "information": {
     "name": "Paula Odama",
     "phone": "08034698692",
     "email": "paulyd@gmail",
     "whatsapp": "8348733420",
     "residential": "inpa",
     "office": "dansaza"
   },
   "jobs": [{
     "name": "gown",
     "measurement": {
       "shoulder": "74",
       "waist": "44",
       "neck": "76",
       "front": "42",
       "length": "73",
       "boost": "80",
       "cap": "37",
       "sleeves": "72",
       "tommy": "30",
       "thigh": "70",
       "chest": "37",
       "back": "70"
     },
     "account": {
       "method": "cheque",
       "amount": "2334",
       "advance": "3945",
       "date": "2016-07-22T09:54:06.395Z"
     },
     "date": {
       "incharge": "2016-07-22T09:54:06.395Z",
       "collection": "2016-07-22T09:54:06.395Z"
     },
     "style": "english",
     "material": "our"
   }, {
     "name": "robes",
     "measurement": {
       "shoulder": "35",
       "waist": "45",
       "neck": "85",
       "front": "52",
       "length": "53",
       "boost": "85",
       "cap": "50",
       "sleeves": "52",
       "tommy": "50",
       "thigh": "35",
       "chest": "35",
       "back": "50"
     },
     "account": {
       "method": "cheque",
       "amount": "2334",
       "advance": "5045",
       "date": "2016-07-22T09:54:06.395Z"
     },
     "date": {
       "incharge": "2016-07-22T09:54:06.395Z",
       "collection": "2016-07-22T09:54:06.395Z"
     },
     "style": "native",
     "material": "bought"
   }]
}];

My aim is to retrieve the 'name' property within the jobs array. I have attempted the following code snippet:

<div ng-repeat="customer in customers" class="card rich-card" z="2">
  <div class="card-hero" style="">
    <h1>{{customer.jobs.name}} <span>{{}}</span> </h1> 
  </div>
  <div class="divider"></div>
  <div class="card-footer">
    <button class="button flat">View</button>
    <button class="button flat color-orange-500">Explore</button>
  </div>
</div>
javascriptangularjs

Answer №1

Since the customer.jobs variable is an array, you will need to access it using an index or key.

In your scenario, you can achieve this by utilizing customer.jobs[0].name.

The resulting HTML code would appear as follows:

<div ng-repeat="customer in customers" class="card rich-card" z="2">
    <div class="card-hero" style="">
        <div data-ng-repeat="job in customer.jobs">
            <h1>{{job.name}} <span>{{}}</span> </h1> 
        </div>
    </div>
    <div class="divider"></div>
    <div class="card-footer">
        <button class="button flat">View</button>
        <button class="button flat color-orange-500">Explore</button>
    </div>
</div>

UPDATE

This involves an array of customers, each with its own set of jobs. Therefore, a double repeater is required to iterate through both arrays.

UPDATE 2

If you prefer to have a 'card' for each job a customer has, the code should be structured like this:

<div data-ng-repeat="customer in customers">
    <div ng-repeat="job in customer.jobs" class="card rich-card" z="2">
        <div class="card-hero" style="">
            <h1>{{job.name}} <span>{{}}</span> </h1> 
        </div>
        <div class="divider"></div>
        <div class="card-footer">
            <button class="button flat">View</button>
            <button class="button flat color-orange-500">Explore</button>
        </div>
    </div>
</div>

Answer №2

Your array is assumed to be named 'customers' since you did not explicitly state its name.

Within the array of customers, each customer has one or more jobs. To display all job names for each customer, nested ng-repeats are needed. For this example, we will repeat the 'card-hero' div in the UI.

<div ng-repeat="customer in customers" class="card rich-card" z="2">
    <h1>{{customer.information.name}}</h1>
  <div ng-repeat="job in customer.jobs" class="card-hero" style="">
    <h2>{{job.name}} <span>{{}}</span> </h2> 
  </div>
  <div class="divider"></div>
  <div class="card-footer">
    <button class="button flat">View</button>
    <button class="button flat color-orange-500">Explore</button>
  </div>
</div>

Edit: Added h1 customer name and changed job name to h2 to demonstrate displaying each job under every customer.

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

Transfering information to handlebars in node.js

Being a beginner in node.js, I am currently working on making a get request in my router (index.js). After successfully obtaining the desired result (verified by logging it in console.log), I proceed to parse it into a JSON object and pass it to a render f ...

javascriptjsonnode.js

Issue encountered when attempting to invoke server-side function using JavaScript

[WebMethod] public static string simple() { Home h = new Home(); h.logout(); return "dfdsf"; } public void logout() { Response.Redirect(Config.Value("logout")); } client side code $('#logout').on('click', function () ...

javascriptasp.net

Encountering an issue when implementing a conditional check within the .map() function utilizing ES6 syntax

I'm struggling to assign only the object that contains an iban value to the list in the code snippet below. I haven't been able to fix this issue on my own and would appreciate some assistance. This.ibanList = this.data.map( (value, in ...

javascriptangularjscallbackecmascript-6

How can you prevent the blur event from triggering in jQuery when the next element to receive focus is of a specific type?

I am currently developing a unique form UI where I am working on creating a custom select box replacement. The custom select control consists of a hidden select input within a div, along with anchor elements inside a span that mimic the options of the sele ...

javascriptjqueryevent-handling

"Unlocking the Power: Sending a Complex JSON Object to PHP from the Dojo

Trying to send a complex JSON object to the server using PHP, but encountering difficulties in sending it. Here is the code snippet: Snippet from DOJO: var ObjArry=[]; var test1 = {key:value, key:value, key:value, key:value}; var test2 = {key:value, ...

javascriptphpjsonmultidimensional-arraydojo

Using Vue.js to sift through and refine data

I have retrieved data from an API and am displaying it here using VueJS. The user information is stored inside the users[] array, with two types of plans: basic_plan and standard_plan. Currently, all users are being shown. Now I want to apply filters simi ...

javascriptvue.js

Updating the list in React upon form submission without requiring a full page refresh

Currently, I have a list of data being displayed with a specific sort order in the textbox. Users are able to modify the order and upon clicking submit, the changes are saved in the database. The updated list will then be displayed in the new order upon pa ...

javascriptreactjs

What is the best way to trigger a unique modal dialog for every element that is clicked on?

I simply want to click on the state and have that state's specific pop-up appear. $("path, circle").on('click', function(e) { $('#info-box').css('display', 'block'); $('#info-box').html($(this ...

javascriptjquery

Having trouble with Angular ngRoute functionality?

I'm currently working on configuring a basic Angular app. Here is my main HTML: <html ng-app="CostumerApp"> <head> <title> Customers </title> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstr ...

javascriptangularjsngroute

How to use a JavaScript function to send a request to views.py in Django

Hey there! I'm looking for guidance on sending a request to a function in views.py within Django. Any help would be much appreciated. Thank you! ...

javascriptajaxdjango

Is it possible to pass a useState function to a component during its initialization?

Currently, I am utilizing the useState hook to effectively handle the rendering of components on the screen. My goal is to initialize it with a component while passing in the useState function to set the screen within the component. Below is my App.js fil ...

javascriptreactjsreact-hooksuse-state

Finding alternative solutions without using the find() method when working with Angular

How can I use an equivalent to find(".class") in AngularJS? I came across this solution: //find('.classname'), assumes you already have the starting elem to search from angular.element(elem.querySelector('.classname')) I attempted to ...

javascriptangularjs

Is there a way to focus on a specific iteration of the ngFor loop in Angular 9 using jQuery?

I'm working on a list of items inside a modal that uses *ngFor with checkboxes. The goal is to cross out the contents of an item when its checkbox is clicked. Here's the initial code using jQuery in home.component.ts: $('body').on(&apo ...

javascriptjqueryangularangular9

What are the steps to caching a message using discord.js?

In order to create a Discord bot with a command !edit [id] [new content], I have implemented the following code: if (MessageContent.startsWith('!edit ')) { if (authority >= 3) { //if false if (args.length < 3) { ...

javascriptnode.jsdiscorddiscord.js

Guide on incorporating one element into another with jquery

I am facing a challenge with the following code snippet: <p>Nuno</p> <p>Eimes</p> My goal is to transform it into this format: <p><a href="name/Nuno">Nuno</a></p> <p><a href="name/Eimes">Eimes& ...

javascriptjquerydom

Prevent IonContent from scrolling to the bottom or top when using Ionic framework

In my Ionic app, I have a long text page with 2 buttons that trigger the actions scrollToBottom and scrollToTop. Due to the length of the page, I have set the scroll duration to be 30 seconds. I am facing two issues here: How can I stop the scrolling ...

javascriptcssangularionic-framework

The length of JSONPath in Javascript is significantly longer, approximately 3000 times lengthier than a traditional loop

I am experiencing performance issues with JSONPath implemented in JavaScript using the Stephan Goessner Library. Below is an example of the JSON structure causing the problem: [ { id:1, name: "lorem", elements: [ ...

javascriptjsonperformancejsonpath

On startup of the chrome app, read and load a JSON file into a variable

As I develop a chrome app, my goal is to store all configuration defaults in json file(s) alongside other assets. I am currently using AJAX requests to load them, but I'm wondering if there is a more efficient way to handle this. Is there perhaps an o ...

javascriptgoogle-chromegoogle-chrome-app

Struggling with AngularJS routing woes

I've been struggling to get my JavaScript code working. As a JavaScript newbie, I was trying to implement a routing example in AngularJS that I found online. Despite spending numerous hours on it, I couldn't get it to work. Problem: The default ...

asp.netangularjs

What is the top JavaScript library for compressing and adding files for transfer to an API?

In the process of developing a Vue.js application, I am facing the task of zipping data into files, adding them to a zip folder, and then sending the zip folder to an API. After researching, I found two options - Zip and JSZip, but I'm uncertain about ...

javascriptvue.jsvuejs2zipjszip