Tips for showcasing a dataset within a table using Angular.js ng-repeat

I am encountering an issue where I have to present an array of data within a table using Angular.js. Below is an explanation of my code.

Table:

<table class="table table-bordered table-striped table-hover" id="dataTable" >
        <tbody>
            <tr>
                <td rowspan="2">Date</td>
                <td rowspan="2">id</td>
                <td rowspan="2">email</td>
                <td colspan="7">Order</td>
            </tr>
            <tr>
              <td>Order Id</td>
              <td>Status</td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
        </tbody>
   </table>

Below is the explanation of my array of data.

$scope.listOfData=
[
    {
        "date": "2016-01-25 18:14:00 to 2016-02-05 11:26:05",
        "id": "36",
        "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a382b200a2d272b232664292527">[email protected]</a>",
        "order": [
            {
                "order_status": 1,
                "order_id": 1111
            },
            {
                "order_status": 0,
                "order_id": 2222
            },
            {
                "order_status": 1,
                "order_id": 5555
            }
        ]
    },
    {
        "date": "2016-01-23 13:15:59 to 2016-01-25 18:14:00",
        "id": "37",
        "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86f4e7eef3eac6e1ebe7efeaa8e5e9eb">[email protected]</a>",
        "order": [
            {
                "order_status": 1,
                "order_id": 3333
            },
            {
                "order_status": 0,
                "order_id": 4444
            }
        ]
    }
]

I require assistance in displaying the above data in the table using Angular.js. Can someone please help me with this task?

javascriptarraysangularjsangularjs-ng-repeat

Answer №1

Execute the code below and observe the results. Feel free to reach out if you require a different format. Cheers!

var app = angular.module("myApp",[]);
app.controller("AppController",['$scope',AppController]);

function AppController($scope) {


    $scope.listOfData=[
          {
              "date": "2016-01-25 18:14:00 to 2016-02-05 11:26:05",
              "id": "36",
              "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b697a715b7c767a727735787476">[email protected]</a>",
              "order": [
                  {
                      "order_status": 1,
                      "order_id": 1111
                  },
                  {
                      "order_status": 0,
                      "order_id": 2222
                  },
                  {
                      "order_status": 1,
                      "order_id": 5555
                  }
              ]
          },
          {
              "date": "2016-01-23 13:15:59 to 2016-01-25 18:14:00",
              "id": "37",
              "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e5c4f465b426e49434f4742004d4143">[email protected]</a>",
              "order": [
                  {
                      "order_status": 1,
                      "order_id": 3333
                  },
                  {
                      "order_status": 0,
                      "order_id": 4444
                  }
              ]
          }
      ];
      
      
    
  }
<!DOCTYPE html>

<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
    <script src="app.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="AppController">

  
  <table cellspacing="5px" style="border:1px solid black;">
  <tr >
        <th>Date</th>
        <th>id</th>
        <th>email</th>
        <th>Order</th>
    </tr>
    <tr ng-repeat="orderInfo in listOfData">
        <td>{{orderInfo.date}}</td>
        <td>{{orderInfo.id}}</td>
        <td>{{orderInfo.email}}</td>
        <td>
          <table>
            <tr>
              <th>Order stat</th>
              <th>Id<th>
            </tr>
            <tr ng-repeat="orderStat in orderInfo.order">
              <td>{{orderStat.order_status}}</td>
              <td>{{orderStat.order_id}}</td>
            </tr>
          </table>
        </td>
    </tr>

Answer №2

Give this a shot


        <div ng-repeat="(index,value) in data">
          <p>{{value.name}}</p>
          <span ng-repeat="(key, val) in value.details"> {{val}}</span>
        </div>

Answer №3

To keep the header of your table fixed, make sure to place it outside of your loop.

Ensure that this is positioned outside of the loop, specifically the ng-repeat.

           <tr>
                <td rowspan="2">Date</td>
                <td rowspan="2">id</td>
                <td rowspan="2">email</td>
                <td colspan="7">Order</td>
            </tr>

It's important to only create the header once since it will remain fixed for all items.

Next, iterate through your list of JSON objects using ng-repeat just like explained above.

Here is an example:

<table class="table table-bordered table-striped table-hover" id="dataTable" >
   <div ng-repeat="list in listOfData">
    {{list.id}}
     <div ng-repeat="oderlist in list.order">
          {{orderlist.order_id}}
     </div>
</div>
</table>

You can customize and adjust the code as needed.

Answer №4

Using the following code snippet will provide assistance,

<div ng-repeat="element in dataItems">
<p> 
   <ul>
      <li>
         {{element.value}} // you can also display your object property here
      </li>
   </ul>
</p>

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

Is there a way to extract data from the Redux state in a React component?

Seeking assistance with making an API request from Redux, followed by saving the data in my React state (arrdata). Although the API call is successful, I am facing challenges updating the App.js state based on the Redux API call. Any suggestions or insig ...

javascriptreactjsredux

What is the best way to erase information displayed when hovering over an element using mouseout?

Whenever the user hovers over an image, an information box appears regarding that specific image. The information inside the box changes as I move over another image, but when not hovering over any images, the information box remains visible. Unfortunately ...

javascriptphpjquerycssweb

What's causing jQuery to make the entire page malfunction?

I am experiencing an issue where a function is not recognized as being in scope when I have a reference to jQuery defined. Oddly enough, if I comment out that reference, the function call works just fine. I have other pages set up the same way with jQuer ...

javascriptjqueryhtml

Using the history.push() method from the Action Creator will update the URL without actually redirecting to a new page

I have a login page component that I've set up to redirect to another page after a successful login. However, even though the URL changes correctly, the page remains on the Login page. First, let me show you how I import the history module to be used ...

javascriptreactjsreact-reduxredux-thunkbrowser-history

Arranging array absolute values efficiently using Java in less than O(n^2)

Is there a way to efficiently output the elements of a sorted array, containing both positive and negative numbers, based on their absolute values without using any built-in functions? For example, an array like -9, -7, -4, -0.9, 1, 2, 3, 8. Does anyone h ...

javaarraysalgorithmsorting

Tips for assigning a personalized value to an MUI Switch when it is in the off position

I am currently utilizing the MUI Switch component to create an On-Off button. I have manually set the value as "on" and it is functioning correctly when the switch is in the true state. However, there doesn't seem to be an option to change the default ...

javascriptreactjsmaterial-ui

What is the best way to change an array of strings into a single string in JavaScript?

I am working with a JavaScript array that contains strings arranged in a specific format: arrayOfString = ['a', 'b,c', 'd,e', 'f']; My goal is to transform this array into a new format like so: myString = ["a", "b ...

javascriptarraysstring

JavaScript - Delayed Text Appearance with Smooth Start

I want to create a landing page where the text appears with a slight delay - first, the first line should be displayed followed by the second line. Both lines should have an easing effect as they appear. Below is a screenshot of the section: https://i.sst ...

javascriptjquerycsstransition

Syncing data with angular-data is a straightforward process that can be easily

I'm currently working on an Angular project that utilizes angular-data to interact with my Restful API. Here's the situation: Within my service, I return a defined resource. In my controller, I use service.defineresource.findAll().then Everyth ...

angularjsangular-data

Adjust the Appearance of Highcharts Legend Post-Rendering

After a Highchart is rendered, is it possible to modify the display settings without redrawing the chart? For instance, I would like to relocate the legend box from the right to the bottom upon screen resize, as illustrated in this image: --Example Pictur ...

javascriptangularjshighcharts

Remove information using Axios in ReactJS by interacting with an API

I have successfully pulled data from the jsonplaceholder API and stored it in my state. However, I am struggling with implementing the deleteContact() method to remove the data. Can anyone provide guidance on how to properly execute the deleteContact() met ...

javascriptreactjsaxios

Sending Emails with AngularJS

Exploring AngularJs has been a delightful experience for me, and I recently stumbled upon a fantastic plugin for Angular called angular-http-auth. This plugin allows you to seamlessly integrate an identification system. Does anyone know of a similar resou ...

javascriptjqueryjavascript-frameworkemailangularjs

Perform a single click and a double click on an anchor element in the document

I am attempting to implement two actions when a user clicks on an anchor tag. The anchor tag will contain a video link. My goal is for the URL to open in a new window when the user single-clicks on the anchor tag, and for the use of the HTML5 download attr ...

javascriptjqueryhtml

Having trouble getting Vue-Select2 to display properly in Vuejs?

After setting up the vue3-select2-component and following their instructions, I encountered an issue where the component was not displaying in the output on the html page, even though the code for it was present in the source code. For context, I am using ...

javascriptlaravelvue.jsvuejs3jquery-select2

Is the length of the Java array negative?

While reviewing code in an open source project, I encountered a method related to output streams that looks like the following: @Override public void write(byte[] buffer, int offset, int length) { if (buffer == null) { throw new NullPointerExc ...

javaarrays

Adding HTML content using jQuery's document.ready feature

As a jQuery novice, I am attempting to incorporate a Facebook like button using the jQuery document.ready function. In my external Javascript file (loaded after the jQuery script), you will find the following code snippet: $(document).ready(function(){ ...

javascriptjquery

Step-by-Step Guide on Resetting Versions in Package.json

I currently have around 20 react projects, each with their own package.json files. These package.json files contain various packages and their versions: "@material-ui/core": "4.11.4", "@material-ui/icons": "4.11.2", ...

javascriptreactjsregex

What is the inner workings behind server side rendering in Next.js?

I am seeking clarification on Server Side Rendering, specifically with Next.js. During server side rendering, I want to confirm the 'execution path' as follows: Client makes a request to the server for the webpage, which serves up an HTML only ...

javascriptreactjsnext.jsserver-side-rendering

Describe a Typescript Interface Value as a collection of strings or any input provided as an argument

Uncertain if the question title is accurate - currently developing react components within a library that has specific predefined values for certain properties. However, additional values may need to be added on a per usage basis. So far, this setup is fun ...

javascriptreactjstypescriptcomponents

Steps to handle the change event of a p:inputText element

In my current setup, I am utilizing p:inputText and have the need to trigger a javascript function that will update the searchField in the backend bean. <p:inputText required="true" placeholder="#{cc.attrs.searchTip}" value="#{cc.attrs.queryProperty}" ...

javascriptjqueryhtmlprimefaces