Perform ng-repeat on an array containing several other arrays

This is an angularjs function that retrieves specific categories.

$scope.getSpecificCat = function(p_cat) {
    $http.get(url+'getSpecificCatJson/' + p_cat).success(function(data){         
    $scope.specifics = data;         
  }).error(function(){
    //alert('there is some errror while fetching product ');
  });   
}

The specifics contain two arrays like [Array[2],Array[2]]. I am trying to find a way to display the values of these arrays in ng-repeat. The first array contains data like 0:object with product_name:"tv", while the second array has 0:"30". This is an excerpt from my modal function:

{                 
                 $current_date = date('d-M-Y');
                 $current_new  = strtotime($current_date);
                 $this->db->select("*, ((p_bid/total_bid)*100) as progress");
                // print_r($current_new);die;
                 $this->db->where('p_cat',$p_cat); 
                 $this->db->where('p_status','active');
        $query = $this->db->get('product');
        $data  = $query->result();
         $percent_array =[];

          foreach ($data as $row) {
            $id  = $row->p_id;
            $ppr = $row->pp_date;
            $pcr = $row->pc_date;
            $ppn = strtotime($ppr);
            $pcn = strtotime($pcr);
            $p_name = $row->p_name;
             if($row->p_cat == 'diamond')
             {
              return $data;
             }
             else if($row->p_cat == 'gold' && $ppr < 1)
            {
               return $data ;
            }
            else if(!empty($pcn && $ppn) && $pcn != $ppn)
            {
            $percent_array[] = (($current_new-$ppn) * 100)/($pcn-$ppn);
          //  $percent_data = array('0' => $percent_array , );

          } 


          }

             $percent_data = array('0' =>$data, '1' => $percent_array);
             return $percent_data; 


}

I want to display both the percentage and the data for use in ng-repeat.

Answer №1

Here is an example of how your data may be structured:

$scope.items = [
    ['Val1', 'Val2'],
    ['Val1', 'Val2']
];

To iterate over this data, you can use nested ng-repeat directives like this:

<div ng-repeat="i in items">
    <div ng-repeat="j in i">{{j}}</div>
</div>

Check out the demo on JSFiddle

Answer №2

If you need to cycle through all the elements in the sub-arrays contained within the main array:

$scope.specifics = data; 
$scope.specificsFlat = (data || []).reduce(function(mainArray, array) { 
  return mainArray.concat(array); 
}, []); 

You can then utilize specificsFlat

<div ng-repeat="specific in specificsFlat"> 
  {{ specific.whatever }} 
</div> 

This process will simplify your main array by consolidating the values from the sub-arrays into a single level.

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

Using AJAX and FormData to Attach a List upon Submission

I am currently working on connecting a list of "Product Specifications" to my "Add Product" dialog, and I'm using AJAX to submit the form. Since users are able to upload a product image within this form, I am sending the AJAX request with a 'For ...

Loading a new view within AngularJS using the ng-view directive opens up a fresh

I am currently working on integrating Angular with a REST API for the login process. After successfully setting up Angular with my REST calls, I aim to redirect to a new page upon successful login. In my success handler, I have implemented the following ...

Removing a Child Object from a JSON Object in AngularJS

Encountering an error while attempting to remove a Child object Error Message: TypeError: ctrl.otsact.tests.splice is not a function HTML : <tr ng-repeat="act in ctrl.otsact.tests" ng-if="ctrl.editToggle"> <td><span ng-click="ctrl.r ...

Tips for changing the size of an array in Java

Struggling with creating my own customizable Array class, I'm encountering issues in resizing it properly. Despite having separate functions for checking if the array is full and for resizing it, it seems like they are not being called when needed. pu ...

Unable to transmit the element identifier information through ajax

Whenever I attempt to pass id data through ajax, I encounter an undefined variable error. The ajax function works smoothly with form data, but the issue arises when trying to extract the id value. Below is the PHP/HTML code snippet: <ul class="sub-men ...

Handling events in JavaScript within a loop

Here is a program I created using jQuery: $(document).ready(function(){ var k = 0; setTimeout(function(){alert("Hello")},500); for (var i = 0; i < 5000; ++i) { ++k; $('.inner').append('<p>Test</p>& ...

Grouping items by a key in Vue and creating a chart to visualize similarities among those keys

I am working with an object that has the following structure; { SensorA: [ { id: 122, valueA: 345, "x-axis": 123344 }, { id: 123, valueA: 125, "x-axis": 123344 }, { id: 123, valueA: 185, "x-axis": 123344 }, { ...

Is there a proven method to instantly update local state in React/Redux without needing to wait for a response from an API call?

Summary: Are there any well-known solutions using React/Redux to achieve a fast and responsive UI, while seamlessly updating an API/database even in cases of failed requests? I want to develop an application featuring a "card view" functionality using htt ...

Is it possible to create a functionality in Google Sheets where a cell, when modified, automatically displays the date of the edit next to it? This could be achieved using a Google

Here is the current code snippet I have: function onEdit(e) { var range = e.range; var val = range.getValue(); var row = range.getRow(); var col = range.getColumn(); var shift = 1; var ss = SpreadsheetApp.getActiveSheet().getRange(row, (col+ ...

Tips for retaining the scroll position of a particular page after a postback

I am working on a grid to display data row by row. Each row is displayed using a user control. When I scroll to the bottom of the page and click on a row, it redirects me to a view page for that specific row. However, when I click on the back link, I would ...

Node.js poses a challenge when it comes to decoding incoming request data

I am attempting to create a sample login page using the combination of node, express, and angularjs. Displayed below is my login view: <div class="login-page"> <div class="login-page-content"> <div style="margin-top:30px;padding:10px;w ...

Chrome Extension: Sending Data from Panel Window to Popup - A Step-by-Step Guide

I've been developing a Chrome extension that displays a window (popup.html) containing a button for playing videos when the extension icon is clicked. Upon clicking the play button, another window created using window.create of type panel opens up. Th ...

How can we translate this php json_encode function into Node.js?

Seeking the equivalent Node.js code for this PHP Script: $SMA_APICall = "https://www.alphavantage.co/query?function=SMA&symbol=".$symbolValue."&interval=15min&time_period=10&series_type=close&apikey=R3MGTYHWHQ2LXMRS"; $SMAres ...

Every time I invoke a module, non-global variables are utilized

Within a module.exports file, I am facing an issue where the variables are shared among different instances of the module. Instead, I want each call to the module to have its own set of values for cycle number, original data, new product, etc., similar to ...

Updating the footer of a React application using Material UI Grid

Having some trouble customizing the footer in a React Material-UI grid. Refer to the image below for details. Any ideas on how to change the: 1 row selected? Thank you! ...

Save a version identifier in already deployed Redux stores for production settings

I am seeking a way to introduce a new bundle into a live React/Redux application that caters to users who are already logged in with a different state tree. To achieve this, I intend to prompt the logged-in users to logout so that I can reset the state tre ...

Transform Ajax response into dropdown menu option

I have made an ajax call and received HTML as a response. Now, I need to convert this output into options and add them to select tags on my webpage. <div class="views-element-container"> <div class="view view-contact-view-id-conta ...

How do I determine in Selenium if I have successfully scrolled to the bottom of the page?

Imagine a situation where a list of elements is loaded dynamically in chunks at runtime. Whenever you scroll the page, more data is fetched and displayed. I am currently looking for a way to determine if I have reached the bottom of the page after scroll ...

Tips for obscuring URLs in AngularJS code without relying on base 64 encoding or Gulp obfuscation techniques

I'm looking for a way to obfuscate specific URLs in my AngularJS code without using base 64 encoding. Is there a method to only obfuscate URLs? var app_data = { 'APP_CONFIG': { 'USER_URL': 'http://127.1.1.0:8000/ ...

What is the method for including the `meta:redirect` or `<meta http-equiv="refresh" content="0; url=http://example.com" />` in the metadata object for Next.js version 13?

In order to redirect users from one of my pages, I previously utilized the redirect metatag. However, I am unable to locate similar options within the metadata API in Next.js 13 for the appRouter. ...