Rendering a multidimensional nested JSON response with DataTables

Question

I have a JSON structure for images and every image has some tags in this JSON. The structure is like that:

{
 "data":[
  {
     "title":"Image Title",
     "slug":"image-title",
     "file_name":"f57fd83c-3c46-4f5b-95b8-446cca3664b5.jpg",
     "added_at":"2015-09-24",
     "tags":{
        "data":[
           {
              "name":"Some Dummy Tag Name",
              "slug":"some-dummy-tag-name"
           },
           ...
        ]
     },
     "added_by":{
        "data":{
           "email":"[email protected]",
           "first_name":"John",
           "last_name":"Appleseed"
        }
     }
  },
  ...
  ]
}

And I'm trying to show this JSON data in DataTables. I've managed to render all of the data except tags. I've used the below code for DataTables options but I can't get the tag's name. It returns [object Object] for each tag in each image. But when I try logging the "data[key].name" on the console, it successfully returns the name. What I'm doing wrong?

'columnDefs': [
    ...,
    {
        'targets': 2,
        'data': 'tags.data',
        'render': function(data) {
            return $.each(data, function(key) {
                return data[key].name;
            });
     }
},
...
],

Thanks in advance.

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

CAUSE

$.each() returns its first argument, the object that was iterated.

SOLUTION

Use $.map() to produce an array of tags and join(', ') to produce a comma-separated tag list as a string from the array.

'render': function(data, type, row) {        
    var tags = $.map(data, function(tag, i) {
       return tag.slug;
    });

    return tags.join(', ');
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 26, 2015 at 16:00

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

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

4 Comments

Guney Cobanoglu Over a year ago

It totally makes sense! Thanks!

mercury Over a year ago

But what if i don't want comma separated , Instead i need each one to be new row .

Gyrocode.com Over a year ago

@HosMercury, you can do return tags.join('<br>'); instead.

Gyrocode.com Over a year ago

@HosMercury, then see child rows example.

Collectives™ on Stack Overflow

Rendering a multidimensional nested JSON response with DataTables

1 Answer 1

CAUSE

SOLUTION

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

CAUSE

SOLUTION

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related