Granular manipulation of array variables in Datatables

Question

You can see in this fiddle that I'm looking for a solution that lets me join a couple of JSON fields in the same Datatables column. This is the solution I found:

 function ( data, type, full ) {
      var a = (full["container-title"]);
      var b = (full["volume"]);
      var c = (full["issue"]);
      var d = (full["page"]);
      var x = ([a, b, c, d]);
      return $.map( x, function ( d, i ) {
      return d;}).join( ', ' );
    }

This outputs the values I want, separated by commas. However, I would like to add some html to each variable before the output. Say, for instance, I want "volume" to be preceded by "Vol.". But if I try this

var a = 'Vol.' + (full["volume"]);

the value is passed as "undefined" and completely unusable. Any other route?

Please correct your fiddle - you have javascript in the html section and html in the javascript section, and you're not loading any libraries - jQuery and DataTables. Also, you don't have any sample data to illustrate, so nothing runs. Otherwise, it would be better to embed your code in this question — K Scandrett
– K Scandrett, Commented Jan 23, 2017 at 0:24
I am so sorry, I must've posted the wrong fiddle. I've updated it now. — east1999
– east1999, Commented Jan 23, 2017 at 0:30

annoyingmouse · Accepted Answer · 2017-01-23 09:28:21Z

1

Your approach does work, check this JSFiddle (https://jsfiddle.net/annoyingmouse/0zdjy1yz/6/). What you were running into was not being able to find the relevant data for issue as it's not in your data, if you do a check before adding it to the array you're laughing:

$('#example').dataTable({
    "ajax": {
        "url": "https://api.myjson.com/bins/vawiz",
        "dataSrc": ""
    },
    "columns": [{
        "data": "",
        "defaultContent": null,
        "render": function(data, type, full) {
            var x = [];
            if (full["container-title"]) {
                x.push("Title: " + full["container-title"]);
            }
            if (full["volume"]) {
                x.push("Volumns: " + full["volume"]);
            }
            if (full["issue"]) {
                x.push("Issue: " + full["issue"]);
            }
            if (full["page"]) {
                x.push("Page: " + full["page"]);
            }
            return $.map(x, function(d, i) {
                return d;
            }).join(', ');
        }
    }, ],
});

Also, your script includes were in the wrong order. :-D

answered Jan 23, 2017 at 9:28

annoyingmouse

5,6991 gold badge31 silver badges48 bronze badges

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

2 Comments

east1999 Over a year ago

My friend, this is really something. You may just have solved a lot of datatables problems for me, because I can use this anywhere else to return different values (although I wonder if there's anything a bit shorter?). I kept thinking that if I added html to the var it would "corrupt" the result being returned but I didn't know any different.. Thank you!

annoyingmouse Over a year ago

Glad to be of help. Smaller version: jsfiddle.net/annoyingmouse/0zdjy1yz/7

mplungjan · Accepted Answer · 2017-01-24 12:58:19Z

0

This is more elegant if you HAVE to specify which items you want

function cFL(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}


"render": function(data, type, full) {
  var x = [], y=["container-title","volume","issue","page"];
  for (var i=0;i<y.length;i++) { 
    if(full[y]) x.push(cFL(y[i])+": "+full[y]);
  }
  return x.length==0?"":x.join(", ");
}

edited Jan 24, 2017 at 12:58

answered Jan 24, 2017 at 12:50

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Collectives™ on Stack Overflow

Granular manipulation of array variables in Datatables

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related