jQuery datatables array of objects

Question

I have a server side data as following for a jQuery datatable.

"data": [
  {
    "id": 1,
    "title": 'Hello World"
    "category": [
      {
        "id": 1,
        "title": "Hello World"
      },
      {
        "id": 1,
        "title": "Foo Bar"
      },
    ]
  }
]

Now I needs to show these "categories" as a hyperlink in the category column cells of my datatable and it should be comma seperated like following

Source: <a href="ID">Hello World</a>, <a href="ID">Foo Bar</a>

Example: Hello World, Foo Bar etc...

I already can render this as comma separated using "render": "[, ].title" but not this level as as a hyperlink. Can anyone help me?

EDIT

{ data: 'category', 
    render: function ( data, type, full, meta ) {
        $.each(data.category, function( index, value ) {
          return value.title;
        });
    }
},

This is what I have done so far. But still not working. All I needs to pass title and id into this loop. So I can use it to build a hyperlink.

render also accepts a function render: function ( data, type, row ) so just build the list of hyperlinks there. — Paul Abbott
– Paul Abbott, Commented Jul 26, 2016 at 17:07
Possible duplicate of How to display a hyperlink in a cell with jQuery DataTables — dsh
– dsh, Commented Jul 26, 2016 at 17:07
@PaulAbbott: I used it as a function, I'm able to turn this into a comma separated hyperlinks for the first level, but not in this category level, I'm having a trouble retrieving title and id into this function. I know data.category.title is the trick but it is not working for this second level. — stackminu
– stackminu, Commented Jul 26, 2016 at 17:11
@dsh: No. This is not a duplicate of the question you mentioned. This is not just a hyperlink in a cell, this is slightly different because i'm asking about a array object. Not just an array. — stackminu
– stackminu, Commented Jul 26, 2016 at 17:14
data.category is an array so data.category.title is not going to work. You need to loop over data.category. — Paul Abbott
– Paul Abbott, Commented Jul 26, 2016 at 17:14

stackminu · Accepted Answer · 2016-07-26 18:42:11Z

1

I'm pretty blind here without more context, but...

{ data: 'category', 
    render: function ( data, type, full, meta ) {
        var result = '';
        $.each(full.category, function( index, value ) {
          result = result + '<a href="' + value.id + '">' + value.title + '</a>';
          if (index < full.category.length)
              result = result + ', ';
        });
        return result;
    }
},

edited Jul 26, 2016 at 18:42

stackminu

7812 gold badges10 silver badges24 bronze badges

answered Jul 26, 2016 at 17:40

Paul Abbott

7,2213 gold badges30 silver badges47 bronze badges

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

2 Comments

stackminu Over a year ago

Thanks a lot. I just tried this. Getting an eror Uncaught TypeError: Cannot read property 'length' of undefined.

stackminu Over a year ago

As I said you were a lifesaver. I just changed data to full and everything works fine. \m/ Thanks a lot.

Collectives™ on Stack Overflow

jQuery datatables array of objects

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related