DataTables fill table from JSON or JS Array&Objects

Question

I have a table that I was filling it with jquery(html). In order to limit displaying rows I have been trying to change this table to datatables.

I have this kind of data:

dataArray = [{
    id: 1,
    props: {
        abc: 123,
        def: 456,
        ghi: 789
    },
    features: {
        zxc: 01,
        cvb: 02,
        nmn: 03
    }
},
{
    id: 2,
    props: {
        abc: 002,
        def: 258,
        ghi: 965
    },
    features: {
        zxc: 52,
        cvb: 21,
        nmn: 75
    }
},
{
    id: 3,
    props: {
        abc: 352,
        def: 365,
        ghi: 778
    },
    features: {
        zxc: 21,
        cvb: 45,
        nmn: 03
    }
},

]

Lets say, I would like to display id, abc(from props), zxc(from features).

I tried to use in datatable by converting JSON but it didnt work. I am not sure how I can display this data on the datatable.

This dataArray is updated inside of the app, it is not external data.

Could you help me please?

you can read this reference on how to display nested JSON data in jquery datatables : infra.clarin.eu/content/libs/DataTables-1.10.6/examples/ajax/… note in javascript code you should replace ajax attribute with your dataArray object. — Oghli
– Oghli, Commented Aug 3, 2018 at 13:06
Please check out my solution. If it answered your question can you mark it accepted, please. — LegenJerry
– LegenJerry, Commented Aug 3, 2018 at 14:43

LegenJerry · Accepted Answer · 2018-08-03 12:40:07Z

You will need to change your JSON properties and their corresponding values to strings as far as I know. If you need to do any arithmetic on the integers you could always parseInt(). Then in your DataTable() call specify data and columns properties like so:

var dataArray = [{
    "id": "1",
    "props": {
        "abc": "123",
        "def": "456",
        "ghi": "789"
    },
    "features": {
        "zxc": "01",
        "cvb": "02",
        "nmn": "03"
    }
},
{
    "id": "2",
    "props": {
        "abc": "002",
        "def": "258",
        "ghi": "965"
    },
    "features": {
        "zxc": "52",
        "cvb": "21",
        "nmn": "75"
    }
},
{
    "id": "3",
    "props": {
        "abc": "352",
        "def": "365",
        "ghi": "778"
    },
    "features": {
        "zxc": "21",
        "cvb": "45",
        "nmn": "03"
    }
},
]

$(document).ready(function() {
    $('#example').DataTable( {
        data: dataArray,
        "columns": [
            { data: "id" },
            { data: "props.abc" },
            { data: "features.zxc" },
        ]
    } );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Props</th>
            <th>Features</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>ID</th>
            <th>Props</th>
            <th>Features</th>
        </tr>
    </tfoot>
</table>

Nice solution bro ! it sounds like this reference example : infra.clarin.eu/content/libs/DataTables-1.10.6/examples/ajax/…
I didn’t see that. I read the documentation and api reference. I don’t have much experience with datatables plugin so I learned a thing or two today! I just answered a second question after this with a table refresh and ajax using the plugin. More people should read docs/reference, I agree, if that’s what you are insinuating. stackoverflow.com/questions/51671793/…
No i didn't mean any thing bad. I upvoted for your answer.in my opinion it's a good solution and it's like the reference i mentioned in the comment.
@Oghli oh cool thanks. Yea it’s pretty straightforward when you look at some references
@CanerSezgin No Problem! Keep in mind you may have issues with those values that have leading zeros. You will need to find a solution to pad those values if you convert them to integers. As strings they are fine though.

Collectives™ on Stack Overflow

DataTables fill table from JSON or JS Array&Objects

1 Answer 1

10 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Linked

Related