Is it possible to use Angular JS nested ng-repeat with only one top-level object?

My JSON object contains package ordering data. I am able to list all orders, parcels within each order, and SKUs in each parcel using a nested loop structure like the one below.

<div ng-repeat="order in orders">
order {{order.ordernum}}
    <div ng-repeat="parcel in order.parcels">
    {{parcel.upid}}
      <div ng-repeat="sku in parcel.skus">
      {{sku.sku}}{{sku.commodity}}
      </div>
    </div>
</div>

However, my requirement is to display details of a specific order only, not all orders. If it's the first order that I want to display, I can achieve this using:

<div ng-repeat="order in orders | limitTo: 1">
order {{order.ordernum}}
    <div ng-repeat="parcel in order.parcels">
    {{parcel.upid}}
      <div ng-repeat="sku in parcel.skus">
      {{sku.sku}}{{sku.commodity}}
      </div>
    </div>
</div>

The "limitTo:1" filter comes in handy for displaying the first order. But what if I need to display details based on a different index or an exact matching order number ("ordernum")?

Answer №1

To achieve this, you can utilize the filter filter. Let's assume that theOrder is a scope variable containing the desired order number:

<div ng-repeat="order in orders | filter:{ordernum: theOrder}">

function OrderController($scope) {
  $scope.orders = [{
    ordernum: 3,
    parcels: [{
      upid: 9
    }, {
      upid: 15
    }]
  }, {
    ordernum: 7,
    parcels: [{
      upid: 1
    }]
  }];

  $scope.theOrder = 3;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<div ng-app="" ng-controller="OrderController">
  <select ng-model="theOrder">
    <option value="{{order.ordernum}}" 
            ng-repeat="order in orders">{{order.ordernum}}</option>
  </select>

  <div ng-repeat="order in orders | filter:{ordernum: theOrder}">
    order {{order.ordernum}}
    <div ng-repeat="parcel in order.parcels">
      {{parcel.upid}}
      <div ng-repeat="sku in parcel.skus">
        {{sku.sku}}{{sku.commodity}}
      </div>
    </div>
  </div>
</div>

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

Deployment to Azure using a .json file extension

We are in the process of deploying an Azure package that includes a static .json file. Although we have successfully tested it in the Azure emulator and locally, we encounter an issue when running it on Azure. The application seems to keep spinning and w ...

The css fails to display properly upon the page being reloaded using a button

While diving into the world of learning React JSX, I've encountered a perplexing issue. After clicking the load button, the page redirects correctly but the CSS styling I've implemented fails to display. Here is the HTML code snippet: <!DOCTY ...

Unlock the Power of Sockets in JavaScript and HTML

How can I work with sockets in JavaScript and HTML? Could HTML5 features be helpful? Are there any recommended libraries, tutorials, or blog articles on this topic? ...

Obtain the index of the current element being filtered within an Angular application

I am utilizing a custom function as a filter and I am curious about how to obtain the index of the current element being filtered. <tr ng-repeat="(idx, line) in items | filter:inRange">....</tr> //Defined filter function $scope.inRange = func ...

Tips for extracting both the div and entire inner content using JavaScript

I need to retrieve the inner content of a div using JavaScript For example: <div id="content" style="height: 20px; overflow: hidden"> content<br>content<br>content<br> </div> This is my HTML code. I only know the div&apos ...

Managing JSON data with tab fragments on android devices

I am a beginner in the world of Android development and I am currently working on accessing JSON data for my project. The app consists of two tabs within a viewpager - the first tab displays information about events while the second tab contains a custom l ...

My extension seems to be missing the content script I uploaded

I am currently developing an extension for Google Chrome. My goal is to create a content script that can retrieve meta tags from the tab when the popup is clicked. In my manifest, I have included the following permissions: "content_scripts": [{ "js" ...

Properly rendering the "created_at" field in a Vue.js component

Currently, I am working on displaying the "created_at" field from my database by utilizing Laravel as the backend app and Vuejs as the frontend application. At this moment, what is being displayed is: Time: { "created_at": "2018-02-22 14:14:30" } Howeve ...

Encountering a segmentation fault while trying to add a new integer to a dynamic array

Encountering a segmentation fault issue with my dynamic array when attempting to add a new integer to it. void function1() { ... string * array1 = new string[array_length]; function2(array1, array_length); ... delete [] array1; } void ...

Develop a custom function to compare two arrays - one containing data from a CSV file and the other containing data from a database

I am currently working on a function that will compare the results of two arrays. If the arrays match, no action is needed. However, if they do not match, an update to a SQL table (Products_Extension) must be implemented. Array A should contain a comma-se ...

Transferring data from Node.js server to React client with axios communication

I have a project in the works that involves tracking chefs and their new recipes. I am developing a simple frontend application where users can input a chef's username, which will then be sent to the backend for scraping several cooking websites to re ...

Ways to retrieve data from response instead of subscription JSON in Angular 2/4

My Service : retrieveData(url,request) { return this.http.post(this.apiUrl+url,request).subscribe( (response) => {return response.json()} ); } My Component : ngOnInit() { this.data = this.dataService.retrieveData(&apos ...

The conclusion of Ajax's response signals the beginning of Jqmobi

I am currently utilizing the jqMobi framework for a web application. Within my application, I establish a connection to the server, send the username and password, and in return, receive a string similar to this: [{"utoken":"e43aa84cc304a1ed3722832616294 ...

What could be causing the arrows on my card carousel to malfunction?

I'm facing some issues with my card carousel functionality. I'm in the process of learning JavaScript and I believe that's where the problem lies, but I'm unsure how to resolve it. Every time I click on the button/arrow for the carousel ...

Issues with reloading when passing POST variables through Ajax requests

I have a button with the id #filter <input type="button" name="filter" id="filter" value="Filter" class="btn btn-info" /> Below is the Ajax script I am using: <script> $(document).ready(function(){ $('#filter').click(function() ...

What is the best way to include the parameter set in the interceptor when making a post request?

-> Initially, I attempt to handle this scenario in the axios request interceptor; if the parameter is uber, then utilize a token. If the parameter is not uber, then do not use a token. -> Afterward, how can I specify uber as a parameter in the custo ...

Implementing JSON Serializer Settings at a Global Scale in ASP.NET MVC

The navigation properties in Entity Framework are causing an exception of "Circular Object Reference" when the collection in my View Model is being serialized by Kendo Grid. Despite setting "ReferenceLoopHandling" to "Ignore" globally in my Application_Sta ...

Failed to retrieve values from array following the addition of a new element

Does anyone have a solution for this problem? I recently added an element to my array using the push function, but when I tried to access the element at position 3, it wasn't defined properly processInput(inputValue: any): void { this.numOfIma ...

Ensure that Key values are included in JsonSchema validation error messages

I have a JSON file and have created a JSONSchema for it. After performing validation, everything seems to be working properly. However, the error messages displayed are not very helpful. For example: ['id', 4180, 'name', 'amount&a ...

Hold off on advancing until the particular text is found in the DOM element

One of the challenges I'm facing is creating a function that waits for specific text to change before returning a value: function getElementText() { while(isLoading()) { } return $('#element').text(); } function isLoading() { ...