Determine the size of a JSON array in AngularJS

I have a JSON data set and I am attempting to calculate the length of an array called Infos:

Here is my JSON structure:

    "Association": {
    "Items": [
         {
            "AssocName": {
                "SurName": "BLOGGS",
                "Title": "MR",
                "ForeName": "HAPPY"
            },
            "Details": [
                {
                  "Name": {
                        "SurName": "BLOGGS",
                        "Title": "MR",
                        "ForeName": "HAPPY"
                    },
                   "Infos": [
                      {
                         //Some Data
                         //Some Data
                         //Some Data
                      },
                      {
                         //Some Data
                         //Some Data
                         //Some Data
                      },
                      {
                         //Some Data
                         //Some Data
                         //Some Data
                      },
                      {
                         //Some Data
                         //Some Data
                         //Some Data
                      }
                    ]
                 }
             ]
        },
        {
            "AssocName": {
                "SurName": "BLOGGS",
                "Title": "MRS",
                "ForeName": "BLUE"
            },
            "Details": [
                {
                  "Name": {
                        "SurName": "BLOGGS",
                        "Title": "MRS",
                        "ForeName": "BLUE"
                    },
                   "Infos": [
                      {
                         //Some Data
                         //Some Data
                         //Some Data
                      },
                      {
                         //Some Data
                         //Some Data
                         //Some Data
                      }                     
                   ]
               }
            ]
        }
    ]
}

This is how it looks in my HTML:

<tr ng-repeat-start="associations in Association.Items track by $index">
    <td>
        {[{associations.AssocName.Title}]}
        {[{associations.AssocName.ForeName}]}
        {[{associations.AssocName.SurName}]}
    </td>
    <td>
        {[{ associations[$index].Details.Infos.length }]} of Details
    </td>
</tr>

Unfortunately, no value seems to be displayed for the length of Infos. However, the Title, Forename, and Surname are displaying as expected.

Answer №1

Give this method a try, as illustrated below

See it in action here

<table>
<tr ng-repeat="associations in Association.Items">
    <td>
        {{associations.AssocName.Title}}
        {{associations.AssocName.ForeName}}
        {{associations.AssocName.SurName}}
    </td>
    <td>
        [{{associations.Details[0].Infos.length}}] of Details
    </td>
</tr>
</table>

Answer №2

There's no need for an index here

<tr ng-repeat-start="groups in Group.Items">
    <td>
        {[{groups.GroupName.Title}]}
        {[{groups.GroupName.FirstName}]}
        {[{groups.GroupName.LastName}]}
    </td>
    <td>
        {[{ groups.Details.Information.length }]} Information Details
    </td>
</tr>

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

Show the component on all routes with the exception of a few in react-router-dom version 6

In my web app, I am working on setting up various routes using react-router. Some pages require shared components like the Navigation or Footer, while others do not. What I need is a way to determine if a path does not match specific locations and only re ...

Values returned by XmlHttpRequest

When it comes to returning data from an XmlHttpRequest, there are several options to consider. Here's a breakdown: Plain HTML: The request can format the data and return it in a user-friendly way. Advantage: Easy for the calling page to consume ...

The AJAX request encountered an error due to an Unexpected End of JSON Input

My AJAX code is encountering an error message. parsererror (index):75 SyntaxError: Unexpected end of JSON input at parse (<anonymous>) at Nb (jquery.min.js:4) at A (jquery.min.js:4) at XMLHttpRequest.<anonymous> (jquery.min.js: ...

Arranging items in a semi-circular formation around the color Blue in a precise manner

I have a character named Blue (who is blue) and I would like to place some elements in a half-circle around him. Each element will consist of an image and a text span positioned below the image. My current attempt results in the elements rotating incorre ...

a function that is not returning a boolean value, but rather returning

There seems to be a simple thing I'm missing here, but for the life of me, I can't figure out why the function below is returning undefined. var isOrphanEan = function isOrphanEan (ean) { Products.findOne({ 'ean': ean }, func ...

Error Handling in ReactJS

Every time I try to execute my ReactJS code, an error pops up saying: Unhandled Rejection (Error): Material-UI: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90e2f5f1f3e4d0a1a6bea3bea0">[email protected]</a> ve ...

The validation of radio input signals results in an error being returned

For a while now, I've been trying to solve the issue with radio button validation in my current project. Surprisingly, it works fine when there are no other functions in the form besides the radio buttons themselves. I suspect that the problem lies wi ...

Encountering a 403 error while attempting to retrieve an image

I'm currently facing difficulties in displaying firebase storage images on my Next.js application due to persistent 403 errors. When I add a document to Firestore, I upload an image to storage with a nested URL and use that URL to retrieve the image. ...

What could be the reason for the misalignment between md-menu and md-button when ng-href is included in the button?

Check out the demo by clicking here: http://codepen.io/audiodude/pen/vLyNvw The main distinction between the top and bottom sections lies in the fact that the top section utilizes an md-button with an ng-href attribute, which Angular Material compiles int ...

Struggling to retrieve the tagName attribute when clicking in JavaScript

I am trying to extract the tagName of any element within an iframe when it is clicked. Unfortunately, my JavaScript code is not working as expected. As a beginner in JavaScript, I would appreciate some guidance on where I might be going wrong. <div cl ...

Sharing NPM Scripts Via a Package to be Utilized by Project upon Installation

I have streamlined my linting setup by consolidating all configuration and related packages/plugins/presets (for prettier, stylelint, eslint, commitlint) into an npm package. This allows me to utilize the same setup across multiple projects, simply extendi ...

How can I prevent Heroku from automatically running the script with 'npm start'?

I am currently in the process of developing a server-based application that utilizes automated scripts, also known as "bots," within a cloud environment. I have set up Heroku Scheduler to execute one of these scripts automatically, as illustrated in Figure ...

Tips for Shrinking a JSONObject before Transmitting it via Http in Android

I need to send a JSONObject to my Webserver from an Android client using the code provided in this example. Here is the code snippet: import org.apache.http.HttpResponse; import org.apache.http.client.HttpClient; import org.apache.http.client.methods.Http ...

What is the best way to trigger the keyup event in that moment?

Currently, I am using regex to validate the name field. Each time a key is pressed, a validation function is triggered. If the input matches the regex pattern, I need to empty out that specific character from the input field. However, when previewing the p ...

css webpack react component not displaying background images

I'm facing an issue where I can't seem to get the image to display as a background. If I just attach the image directly, it shows up without any problems. However, my intention is to make it a background image so that I can overlay text on top of ...

What is the process for transforming nested JSON into a dataframe?

{ "RecordSet": { "geometryType": "esriGeometryPoint", "spatialReference": { "wkid": "DLT0" }, "features": [{ "geometr ...

Having difficulties while setting up end-to-end testing using AngularJS scenarios and redis

I've hit a roadblock while trying to implement e2e tests in my Django app using angular-scenario. I want to create fake user login functionality for testing, but I'm struggling with getting it to work. Here's the test code I have: describe( ...

Issue with Bootstrap 5 Dropdowns and Navs: Unable to access 'children' property of null

Whenever I try to use a dropdown button with Nav Tabs in the Navbar Component, I keep getting this Dev Console error message "Cannot read property 'children of null". Clicking on the dropdown item to display nav-link in navbar triggers the same Dev C ...

Obtaining information from an API in JSON format

I'm currently working on integrating a basic Stock API into JSFiddle.net using the Quandl API: When I use the current format of ".csv" as shown below, I receive a CSV file. However, if I switch the format to ".json" in my API, how can I retrieve the ...

When the Ionic app is relaunched from the side menu, the view fails to refresh

When I open my Side Menu, I initially see two options - scan barcode or search product. Once I choose one, the rest of the view is filled in dynamically. The issue arises when I try to go back to the Side Menu and reload the view to only display the origin ...