In order for data with two fields to be displayed correctly in an angular.js table, it must be shown twice

Question

In order for data with two fields to be displayed correctly in an angular.js table, it must be shown twice

Within my angular.js table, data is being received and stored in a variable called dataArr.

var dataArr = [
0: "aaa",
1: "bbb"
]

I have a condition that if the length of the data is greater than 0, it must be displayed twice in the table structure. For instance:

var user1 = {name: "george", field: [0: "aaa"]}

<<< This user should appear once in the table.

var user2 = {name: "Fred", field: [0: "aaa", 1: "bbb"]}

<<< This user should appear twice in the table, and so on...

Using ng-repeat, I iterate over the data to display it in the table:

<div ng-repeat="item in data">
<div>{{item.name}}</div>
<div>{{item.field}}</div>

javascript angularjs

Answer 1

Answer №1

Based on my understanding of your question, it seems like you are looking to achieve the following format:

George aaa
Fred bbb
Fred ccc

This format is derived from the following data:

people = [
    { 
      "name": "George",
      "field": ["aaa"]
    },
    {
      "name": "Fred",
      "field": ["bbb", "ccc"]
    }
  ];

You can achieve this by using nested angular repeats as shown below:

    <div ng-repeat="person in people">
      <div ng-repeat="field in person.field">
        {{ person.name }}
        {{ field }}
      </div>
    </div>

Answer 2

Based on my understanding of your question, it seems like you are looking to achieve the following format:

George aaa
Fred bbb
Fred ccc

This format is derived from the following data:

people = [
    { 
      "name": "George",
      "field": ["aaa"]
    },
    {
      "name": "Fred",
      "field": ["bbb", "ccc"]
    }
  ];

You can achieve this by using nested angular repeats as shown below:

    <div ng-repeat="person in people">
      <div ng-repeat="field in person.field">
        {{ person.name }}
        {{ field }}
      </div>
    </div>

Answer 3

Answer №2

If you give this a shot, I believe your information should be formatted in this way.

$scope.infoArray = [{0: "aaa", 1: "bbb"},{0: "ccc", 1: "ddd"}];
$scope.info = [{ 
  "name": "John"
},{ 
  "name": "Jane"
}]
<div ng-repeat="info in data track by $index">
   <div>{{info.name}}</div>
   <div>{{infoArray[$index][0]}} {{infoArray[$index][1]}}</div>
</div>

Answer 4

If you give this a shot, I believe your information should be formatted in this way.

$scope.infoArray = [{0: "aaa", 1: "bbb"},{0: "ccc", 1: "ddd"}];
$scope.info = [{ 
  "name": "John"
},{ 
  "name": "Jane"
}]
<div ng-repeat="info in data track by $index">
   <div>{{info.name}}</div>
   <div>{{infoArray[$index][0]}} {{infoArray[$index][1]}}</div>
</div>

In order for data with two fields to be displayed correctly in an angular.js table, it must be shown twice

Answer №1

Answer №2

Similar questions

Can an array be used as valid JSON for a REST api?

Tips on leaving comments inside a render <div>

The difference between emitting and passing functions as props in Vue

Find similarities and differences between two CSV files

PHP sending only a single space in an email

Is utilizing the correct use case for a Bunyan child logger?

Text located in the bottom right corner of the window with the use of JavaScript

What is the best way to connect specific nodes to the edge of a canvas in cytoscape and create perfectly straight lines?

How can you set a condition for when no matches are found in a list filter?

Modifying column array properties using jsstore

Obtain output from a callback function

Unpacking a mongoose record

Automated task scheduled to execute every minute between the hours of 8am and 4.30pm using Cloudwatch Events

Issues with CKEDITOR in Internet Explorer when multiple instances are used with different configuration files

When utilizing a computed property that accesses the Vuex state, the v-if directive alone may not function as expected without

Steps to remove a scrollbar from a fullscreen slider

Move to the following <article>

Excess space at the bottom of the Heatmap chart in Highcharts

What is the method for retrieving a specific value following the submission of an AngularJS form?

Retrieve the total count of rows present in a specific table