Simple Table on an Ionic Page

ionic-v1
1

I have a JSON file with some values. I would like to display them on an Ionic Page.
The concept:

  • When the page loads functions will be automatically called to generate some random numbers
    *These random numbers will fetch some other values from a JSON file.
    *Then those fetched values will be displayed in a table.

The Table should look like

Module Mark
ModuleName 60
ModuleName 72
ModuleName 58

I already have the JSON file ready, as well as the JS Functions. The issue is how to display them. I found this tool here: GitHub - jpstone/ionic-table: Responsive, animate-able tables for Ionic applications , But it doesn’t seems to work. Im getting an error:

Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module ionic-table due to:
ReferenceError: $ is not defined

Has anyone tried it before? It seems easy to work on, when you get it up and running. Any other alternative ways? I found a couple around but they look very complex. I mean the whole idea is quite straight forward, and Im sure there will be an easy way to solve this issue.

And this is a Screenshot to understand how my tables I need to look like. On the screenshot I displayed 2 tables, on the real app the tables should be as many as the array length.

image
image439×611 22.9 KB

2

Solved:

I needed to spend some time and understand the ionic grid system:

<div>
        <div class="row">
            <div class="col">Course Title</div>
        </div>
        <div class="row">
            <div class="col col-50">Module Credits</div>
            <div class="col col-50">Credits</div>
        </div>
        <div class="row">
            <div class="col col-50">Module Mark</div>
            <div class="col col-50">Mark</div>
        </div>
        <br>
        <br>
     </div>
1 Like