Utilize NgRepeat to access an unidentified array in AngularJS

In a complex multi-level array, there are objects nested at the deepest level.

[  
   [  
      [  
         "FUND",
         {  
            "totassets":10.9,
            "totdate":"2015-03-23",
            "expratiogross":1.35,
            "exprationet":1.08
         }
      ],
      [  
         "DAILY",
         {  
            "navdate":"2015-03-23",
            "nav":10.05,
            "chgamt":0,
            "chgpct":0,
            "pop":10.05,
            "ytdreturn":2.03,
            "curr7dayyield":0,
            "eff7dayyield":0,
            "unsub7dayyield":0,
            "30dayyield":0,
            "30dayloadyield":0
         }
      ]
   ]
]

My goal is to utilize ngRepeat to display all items under "FUND" or "DAILY", yet I am facing challenges in accessing objects deeply nested without specific names for each array layer.

Apologies if this seems like a fundamental query, as I couldn't find a solution elsewhere.

javascriptarraysangularjsobjectangularjs-ng-repeat

Answer №1

To extract the first element from each of the outer arrays, follow these steps.

$scope.data = [  
   [  
      [  
         "FUND",
         {  
            "total_assets":10.9,
            "date":"2015-03-23",
            "expense_ratio_gross":1.35,
            "expense_ratio_net":1.08
         }
      ],
      [  
         "DAILY",
         {  
            "nav_date":"2015-03-23",
            "nav":10.05,
            "change_amount":0,
            "change_percentage":0,
            "pop":10.05,
            "ytd_return":2.03,
            "current_7day_yield":0,
            "effective_7day_yield":0,
            "unsubscribed_7day_yield":0,
            "30day_yield":0,
            "30day_load_yield":0
         }
      ]
   ]
]

<ng-repeat item in data[0][0]>
  <span>total_assets: {{item[0].FUND.total_assets}}</span>
  <span>nav_date: {{item[0].DAILY.nav_date}}</span>
</ng-repeat>

Answer №2

One issue that arises with the array is that even if you disregard the outer arrays, you are still left with two separate arrays like this:

  [  
     "FUND",
     {  
        "totassets":10.9,
        "totdate":"2015-03-23",
        "expratiogross":1.35,
        "exprationet":1.08
     }
  ],

And:

  [  
     "DAILY",
     {  
        "navdate":"2015-03-23",
        "nav":10.05,
        "chgamt":0,
        "chgpct":0,
        "pop":10.05,
        "ytdreturn":2.03,
        "curr7dayyield":0,
        "eff7dayyield":0,
        "unsub7dayyield":0,
        "30dayyield":0,
        "30dayloadyield":0
     }
  ]

This means you will need two ngRepeat blocks to accomplish what you are trying to achieve, and you may need to go one level deeper to access the specific values you are looking for.

For a visual demonstration of this concept, you can refer to this quick plnkr: http://plnkr.co/edit/ArCh8q8w2JoXsg107XwP?p=preview

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

How is UI Router Extras causing unexpected errors in my unit tests?

QUESTION: - I am facing failures in my tests after installing ui-router-extras. How can I resolve this issue? - Is there a way to use ui-router-extras without causing test failures? If you want to quickly install this, use yeoman along with angular-full ...

javascriptangularjsunit-testingangular-ui-routerkarma-runner

retrieve information using Python in JavaScript

I am in the process of developing a website using Python, Javascript (JQuery), and AJAX. While I know how to initiate a Python script with Ajax, I am unsure of how to send data back to Javascript from Python. For instance, if there is an error in a form s ...

javascriptpythonajaxalert

The response data from Axios cannot be stored using useState hook

Struggling with fetching data from my express backend and MySQL database to display on my react frontend using axios. However, I'm facing issues when trying to update the fetched data using the useState hook. Here is how my frontend function is struc ...

javascriptreactjsexpressaxios

What is the best way to organize a PHP array based on a specific ordering of key/value pairs?

I have been searching for a suitable sorting function without much success. Below is the current array result: 0 => array( 'member_reference_identifier' => '001', 'user_status' => 'Hold', ...

phparrayslaravelsortingmultidimensional-array

Is it feasible to utilize a single parent component with multiple unique child components in Angular 2?

Is it possible to create a parent component without specifying the child component? Typically, I would define a parent component and include the selector of the child component in the HTML file parent-component-1.html: //some logic <child-component-1 ...

angularjsangular

How to calculate the difference in months between two dates using JavaScript

Is there a way to calculate the number of months between two dates taking into account specific conditions, such as when the dates are not exact and may have different day counts? Here is an example using the moment library: var date1 = moment('202 ...

javascriptmomentjs

Extracting Unprocessed Data with Node.js Express

I am currently working with an Express server that handles a login form page: const app = express(); // part A app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.urlencoded()); app.get('/login', ...

javascriptnode.jsexpresshttp-postraw-data

When I press the right arrow key, the cursor vanishes into thin air

A content editable div contains HTML elements such as spans and plain text. View fiddle .ing-tag_0{ color:white; background-color: blue; } <div value="" id="step_input_0" name="step" placeholder="Tell us about step 1" class="input stepbox step ...

javascriptjqueryhtmlmeteor

Looking for assistance with resizing and repositioning an image within a viewport?

The JSFiddle code can be found at this link - https://jsfiddle.net/pmi2018/smewua0k/211/ Javascript $('#rotate').click(function(e) { updateImage(90, 0) console.log("rotation"); }); $('#zoom-in').click(function() { updateImage(0 ...

javascripthtmljquerycss

Troubleshooting Deployd Launch Failure Due to MongoDB

Having attempted to troubleshoot this issue based on past discussions, I am still facing difficulties. Currently, I am following the Apress Pro Angular book and today, I am using a different machine with all necessary content. However, Deployd is encounter ...

angularjsmongodb

What is the best way to retrigger an ajax request in jQuery after it encounters an error?

In my JavaScript code, I have an AJAX request that communicates with a Rails controller to send data. If the controller detects duplicate information already in the database, it returns an 'Unprocessable Entity' error. I am looking to implement ...

javascriptjqueryruby-on-railsajax

JQuery Ajax call fails to retrieve any information

I have been experimenting with JQuery Ajax methods. I created a basic Ajax request to retrieve specific 'tagged' photos from Flickr. Here is the code snippet I am using: function initiateSearch() { $(function() { var tagValue ...

javascriptjquery

What sets apart window.location.href from this.router.url?

I'm curious about the various methods of obtaining the current URL in Angular. For instance: this.router.url My main question is: What advantages does using this.router.url offer over simply using window.location? Could someone kindly provide an exp ...

javascriptangulartypescript

What is the correct way to set a function as the value for an object without using quotation marks?

I am facing a challenge of generating very large JavaScript files using Node.js. Each file contains a const variable that holds values tailored for the specific file, with these values only known at runtime. For example: 'use strict' const lib ...

javascriptnode.js

Utilizing the scope in conjunction with ng-model within an md-select element, along with ng-repeat, for the purpose of storing

Need help fixing two bugs in my phonegap app development. I'm creating a take-out app with Menu, Options, and Order sections. In the Options page, there are checkboxes and a dropdown using md-select. Currently, when a user selects an option from the d ...

angularjscordovascopeangularjs-ng-model

How can the size of the font in a <div> be adjusted based on the number of characters present?

I am attempting to create a basic HTML and CSS layout with two div blocks, each 1000px wide, within a parent container that is 3000px wide. <div class="blocks"> <div class="block-a">text 1</div> <div class="block-b">text 2& ...

javascriptjqueryhtmlcss

Maximizing the potential of PJAX with Express and EJS: A guide

Hey there, question coming from a newbie in the world of coding. I've been struggling to make pjax work for quite some time now without any success. The closest I've come is seeing some activity in the terminal, but when I click on the link, it ...

javascriptexpresspjax

"Trouble displaying specific events based on their IDs retrieved from the MySQL database

Each button in my list is associated with a specific person. Upon clicking a button, it directs to calendar.php?id=5 (where 5 is the personal id). I want the calendar to display the vacations scheduled for that particular id from the MySQL database. even ...

javascriptphpjquerymysqlfullcalendar

The hierarchy of precedence when using the TypeScript Type Assertion operator

Is it necessary to wrap the js-ternary operator with 'as' Type Assertion? ios ? TouchableOpacity : View as React.ElementType Will it automatically use the result of '?:' since it comes first? Or would a better implementation be: (ios ...

javascripttypescriptlogical-operatorsoperator-precedence

What could be causing the invalid hooks error to appear in the console?

I'm completely stumped as to why this error is popping up when I try to use mutations with React Query. Any insights or advice would be greatly appreciated. Note: I'm implementing this within a function component in React, so it's puzzling ...

javascriptreactjsreact-hooksreact-query