displaying a structured data grid in angularjs

Question

displaying a structured data grid in angularjs

My data is formatted in a json with the following rows:

{{"0":"94122","1":"94132","2":"94131","3":"94116","4":"94107"}
{"0":4,"1":2,"2":4,"3":2,"4":2}}

Using the code snippet below:

  <li ng-repeat="x in table">
  {{ x }}
   </li>

I am currently displaying the data as follows:

 {"0":"94122","1":"94132","2":"94131","3":"94116","4":"94107"}
 {"0":4,"1":2,"2":4,"3":2,"4":2}

I want to convert this into a tabular format like so:

  <tr ng-repeat="roll in sushi">
    <td>{{ roll.name }}</td>
    <td>{{ roll.fish }}</td>
    <td>{{ roll.tastiness }}</td>
  </tr>

javascript angularjs

Answer 1

Answer №1

<tr ng-repeat="item in data">
    <td ng-repeat="(key, val) in item">{{val}}</td>
</tr>

or

 <tr ng-repeat="item in data">
    <td>
        <p ng-repeat="(key, val) in item">{{val}}</p>
    </td>
 </tr>

or

 <tr ng-repeat="item in data">
    <td>
        <ul>    
            <li ng-repeat="(key, val) in item">{{val}}</li>
        </ul>
    </td>
 </tr>

Answer 2

<tr ng-repeat="item in data">
    <td ng-repeat="(key, val) in item">{{val}}</td>
</tr>

or

 <tr ng-repeat="item in data">
    <td>
        <p ng-repeat="(key, val) in item">{{val}}</p>
    </td>
 </tr>

or

 <tr ng-repeat="item in data">
    <td>
        <ul>    
            <li ng-repeat="(key, val) in item">{{val}}</li>
        </ul>
    </td>
 </tr>

Answer 3

Answer №2

Are you looking for something similar to this?

<tr ng-repeat="item in items">
    <td>{{ item["0"] }}</td>
    <td>{{ item["1"] }}</td>
    <td>{{ item["2"] }}</td>
    <td>{{ item["3"] }}</td>
    <td>{{ item["4"] }}</td>
  </tr>

Answer 4

Are you looking for something similar to this?

<tr ng-repeat="item in items">
    <td>{{ item["0"] }}</td>
    <td>{{ item["1"] }}</td>
    <td>{{ item["2"] }}</td>
    <td>{{ item["3"] }}</td>
    <td>{{ item["4"] }}</td>
  </tr>

displaying a structured data grid in angularjs

Answer №1

Answer №2

Similar questions

tips for transforming contour data set from x/y/z coordinates to a three-dimensional object

Incorporate a widget with dynamic height adjustment

Highcharts feature enhancement: Adjusting zIndex of legendItem on mouseover/mouseout

Filtering data using Mongoose to send specific information

Is it possible to implement formvalidation.io in a React project that is using Materialize-css?

Exporting Canvas data without the alpha channel

Encountering an issue with NPM while attempting to install Parcel

Dynamically insert a new row into an HTML table using AJAX and refresh the table with .load method

Obtain the orientation of the threejs scene and camera to establish the initial perspective

Difficulty with making HTTP Requests in Node.js

Traversing an array in JavaScript to create a new array

Cleaning up unwanted objects in THREE.js webGL

Generating a compilation using ng-repeat

Substitute numerical strings with actual numbers within an array

just half of the four $_POST variables are actually assigned

A step-by-step guide on signing up users with django-rest-framework and angularJS

Whenever I try to download express using npm install, I encounter a checksum

What is the best way to export assets into a React Native JS file?

What is the best way to compile an array of permissible values for a specific CSS property?

The requested resource in Angular 5 does not have the 'Access-Control-Allow-Origin' header present