Converting a JSON array into a table using AngularJS

Question

Converting a JSON array into a table using AngularJS

Here is the structure of my JSON data:

[{"Name":["A","B","C","D","E","F"], "Age":["20","30","40","50","55","60"], "Gender":["M","M","F","M","Unknown","Unknown"]}]

I am looking to create an AngularJS table that resembles the following format:

Name    Age     Gender
A       20      M
B       30      M
C       40      F

Most examples I have found show JSON data in a different format, such as:

[
    {Name: "A",     Age: "20",  Gender: "M"},
    {Name: "Bag",   Age: "30", Gender: "F"},
    {Name: "Pen",   Age: "40",  Gender: "F"}
];

I'm unsure how to proceed with transforming my JSON data. Can anyone provide guidance on this?

javascript json angularjs

Answer 1

Answer №1

If your property arrays are all of equal length and properly organized, you can leverage the $index feature within an ng-repeat loop.

<table>
    <thead>
        <tr>
            <td>Name</td>
            <td>Age</td>
            <td>Gender</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="name in obj.Name">
            <td>{{name}}</td>
            <td>{{obj.Age[$index]}}</td>
            <td>{{obj.Gender[$index]}}</td>
        </tr>
    </tbody>
</table>

Another approach (assuming well-structured data) involves consolidating the separate lists into a single array of person objects using JavaScript. You can then proceed as demonstrated in other examples.

The JavaScript code may be structured like this:

$scope.people = [];
obj.Name.forEach(function(name, index) {
    people.push(
    {
        Name: name,
        Gender: obj.Gender[index],
        Age: obj.Age[index]
    });
});

You can now simply use an ng-repeat on the new people array to display the content.

 ...
    <tbody>
        <tr ng-repeat="person in people">
            <td>{{person.Name}}</td>
            <td>{{person.Age}}</td>
            <td>{{person.Gender}}</td>
        </tr>
    </tbody>

Answer 2

If your property arrays are all of equal length and properly organized, you can leverage the $index feature within an ng-repeat loop.

<table>
    <thead>
        <tr>
            <td>Name</td>
            <td>Age</td>
            <td>Gender</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="name in obj.Name">
            <td>{{name}}</td>
            <td>{{obj.Age[$index]}}</td>
            <td>{{obj.Gender[$index]}}</td>
        </tr>
    </tbody>
</table>

Another approach (assuming well-structured data) involves consolidating the separate lists into a single array of person objects using JavaScript. You can then proceed as demonstrated in other examples.

The JavaScript code may be structured like this:

$scope.people = [];
obj.Name.forEach(function(name, index) {
    people.push(
    {
        Name: name,
        Gender: obj.Gender[index],
        Age: obj.Age[index]
    });
});

You can now simply use an ng-repeat on the new people array to display the content.

 ...
    <tbody>
        <tr ng-repeat="person in people">
            <td>{{person.Name}}</td>
            <td>{{person.Age}}</td>
            <td>{{person.Gender}}</td>
        </tr>
    </tbody>

Answer 3

Answer №2

Give it a shot.

<div ng-repeat="person in people.Names">
  Name: {{person}} Age: people.Ages[$index] Gender: people.Genders[$index]
</div>

I'm assuming your data is organized and ordered.

Answer 4

Give it a shot.

<div ng-repeat="person in people.Names">
  Name: {{person}} Age: people.Ages[$index] Gender: people.Genders[$index]
</div>

I'm assuming your data is organized and ordered.

Answer 5

Answer №3

Utilize the lodash function _.zip to organize them into an array, and use _.map to transform it into JSON objects by utilizing a custom function:

var rows = _.zip(users.Name, users.Age, users.Gender);  // [["A",20,"M"],...]
$scope.users = 
    _.map(rows, function(row) {
        return {Name: row[0], Age: row[1], Gender: row[2]}
    });

Then, loop through them to retrieve values:

<table ng-controller="UsersTableController">
    <thead>
        <th>NAME</th>
        <th>AGE</th>
        <th>GENDER</th>
    </thead>
    <tbody>
        <tr ng-repeat="user in users">
            <td>{{user.Name}}</td>
            <td>{{user.Age}}</td>
            <td>{{user.Gender}}</td>
        </tr>
    </tbody>
</table>

For more information, visit: https://lodash.com/docs#zip , https://lodash.com/docs#map

Answer 6

Utilize the lodash function _.zip to organize them into an array, and use _.map to transform it into JSON objects by utilizing a custom function:

var rows = _.zip(users.Name, users.Age, users.Gender);  // [["A",20,"M"],...]
$scope.users = 
    _.map(rows, function(row) {
        return {Name: row[0], Age: row[1], Gender: row[2]}
    });

Then, loop through them to retrieve values:

<table ng-controller="UsersTableController">
    <thead>
        <th>NAME</th>
        <th>AGE</th>
        <th>GENDER</th>
    </thead>
    <tbody>
        <tr ng-repeat="user in users">
            <td>{{user.Name}}</td>
            <td>{{user.Age}}</td>
            <td>{{user.Gender}}</td>
        </tr>
    </tbody>
</table>

For more information, visit: https://lodash.com/docs#zip , https://lodash.com/docs#map

Converting a JSON array into a table using AngularJS

Answer №1

Answer №2

Answer №3

Similar questions

Tips for avoiding quotation mark issues in JSON in Microsoft Flow?

Is it possible for Angular Parent & Child Scope to function properly within the $root scope?

What is the best way to activate an alert or swal function just once instead of repeatedly?

Instruction not activating

What is the best way to populate an array with unique values while applying a condition based on the objects' properties?

Tips for creating a map within an array and including it in a JSON file using Go

Using Vue.js to handle asynchronous functions with undefined variables

Converting Cyrillic characters to ASCII codes using JavaScript: A step-by-step guide

Toggle menu using jQuery to show and hide options

Axios removes the async functionality

Discover siblings in React component siblings

Unable to retrieve the email addresses of Facebook users using the Facebook JavaScript SDK

Function that contains a JavaScript reference and observation

The Carousel Slider seems to encounter issues when trying to implement it with *ngFor in Angular 8

Converting a Non-Specific Collection to JSON in C#

When attempting to POST data in Laravel, a status of 419 (unknown) is returned and the data cannot be posted to the target URL

What is the best way to configure a metered subscription plan on Stripe that invoices annually but bills extra fees for overage on a monthly basis

Error: CSRF token cookie is missing [Django/AngularJS]

Convert the output of get_post_meta() into a JSON format

What are the benefits of utilizing a timeout?