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

1

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>

answered Aug 3, 2018 at 12:40

LegenJerry

4243 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Oghli Over a year ago

Nice solution bro ! it sounds like this reference example : infra.clarin.eu/content/libs/DataTables-1.10.6/examples/ajax/…

LegenJerry Over a year ago

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/…

Oghli Over a year ago

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.

LegenJerry Over a year ago

@Oghli oh cool thanks. Yea it’s pretty straightforward when you look at some references

LegenJerry Over a year ago

@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

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related