Converting [object] to URL in column

Converting [object] to URL in column

teondexteondex Posts: 19Questions: 4Answers: 0
edited February 2017 in Free community support

Hello,

Is there anyone that can take a look at my code and help me figure out why I'm receiving "[object Object]" instead of the URLs I should be receiving.

The data table is under a column called: URL with links formatted as "https://www.google.com".

Attached is what is rendered to the end user.

I attempted to follow a previous thread on this issue but im not understanding hope the issue was resolved. Please assist!
https://datatables.net/forums/discussion/27167/how-do-get-data-in-row-datatable

I added the following code which is now presenting me a link to object object.

"https://cloudsites.XXXX.com/sites/XXXXXX/SitePages/[object%20Object]"

{ "mData": "URL",
"mRender": function ( data, type, full )
{
return '<a href="'+data+'">Link</a>';
}
},

<script language="javascript"> 

$(document).ready(
function(){

// ajax call to get the list data using REST
var call = $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('TeamLinks')/items?$top=200",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});

// this gets called when the AJAX completes.
// this populates the table created above

call.done(function (data,textStatus, jqXHR){
$('#example').dataTable({
"bDestroy": true,
"bProcessing": true,
"aaData": data.d.results,
"aoColumns": [
{ "mData": "br3e" },
{ "mData": "Comments" },
{ "mData": "URL" },
{ "mData": "Platform" }
],
dom: 'T<"top"if>rt<"bottom"lp><"clear">',
        tableTools: {
            "sSwfPath": "/sites/GPNOC/Style Library/swf/copy_csv_xls_pdf.swf"
        }
});
});


// Render clickable HTML

// called if the AJAX fails

call.fail(function (jqXHR,textStatus,errorThrown){
   alert("Error retrieving Tasks: " + jqXHR.responseText);
});
}

  );

</script> 

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 61,442Questions: 1Answers: 10,053 Site admin

    Is it this one that is causing the issue?:

    _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('TeamLinks')/items?$top=200"

    I don't actually see any other Ajax calls above.

    Allan

  • teondexteondex Posts: 19Questions: 4Answers: 0

    Hey Allan I appreciate the response. I actually solved the problem. Can you help me figure out how to merge the Title and Link column?

    For Example I currently have my table being presented like this

    Title - Notes - Link
    DocA - Descr1 - linktoDocA
    DocB - Descr1 - linktoDocB

    I would rather have the Title field be a href that brought you straight to 'linktoDocA'

    Any help?

  • allanallan Posts: 61,442Questions: 1Answers: 10,053 Site admin

    Use the columns.render option. There is an example in its documentation showing how to create a link.

    Allan

  • teondexteondex Posts: 19Questions: 4Answers: 0

    Im not sure you understood my question. I did manage to get this working (See attached)

    // this gets called when the AJAX completes.
    // this populates the table created above
    call.done(function (data,textStatus, jqXHR){
    $('#teamlink').dataTable({
    "autowidth" : false,
    "pageLength": 15,
    "ordering": true,
     scrollY:  300,
    "scroller" :true,
    "info":     false,
    "bDestroy": true,
    "bProcessing": true,
    "aaData": data.d.results,
    "aoColumns": [
    { "mData": "Title"},
    { "mData": "Notes" },
    { "mData": "Link",
      "mRender": function ( data, type, full )
      {return '<a href="'+data+'" target="_blank">Here</a>';}
    }
    
    

    Instead of showing the Text "Here" I would rather be presented with the data from the Title field. Making a clickable title.

  • teondexteondex Posts: 19Questions: 4Answers: 0

    I updated my code to no avail...My original problem is still here. How do i reference data from a different target?

  • teondexteondex Posts: 19Questions: 4Answers: 0
    edited February 2017
    call.done(function (data,textStatus, jqXHR){
    $('#teamlink').dataTable({
      "columnDefs": [ {
        "targets": 2,
        "data": "download_link",
        "render": function ( data, type, full, meta ) {
          return '<a href="'+data+'">Download</a>';
        }
      } ],
    
    "autowidth" : false,
    "pageLength": 15,
    "ordering": true,
     scrollY:  300,
    "scroller" :true,
    "info":     false,
    "bDestroy": true,
    "bProcessing": true,
    "aaData": data.d.results,
    
    "aoColumns": [
    { "mData": "Title"},
    { "mData": "Notes" },
    { "mData": "Link",}
    

    So i guess my question is can I reference the value of column 1 and send it to the href for column 3?

    ie something like this

    call.done(function (data,textStatus, jqXHR){
    $('#teamlink').dataTable({
      "columnDefs": [ {
        "targets": 2,
        "data": "download_link",
         "name":""targets"0",
        "render": function ( data, type, full, meta ) {
          return '<a href="'+data+'">+name+</a>';
        }
      } ],
    

    name being the reference for the Title column.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited February 2017 Answer ✓

    You can access the row data from the full parameter. Try this return statement in your render function:
    return '<a href="' + data + '">' + full.Title + '</a>';

    Also, I don't think the "name":""targets"0", line is doing anything useful.

    Kevin

  • allanallan Posts: 61,442Questions: 1Answers: 10,053 Site admin
    Answer ✓

    Yes, the third parameter passed into the function will give you access to the full data object for the row.

    Allan

  • teondexteondex Posts: 19Questions: 4Answers: 0

    Actually I noew have a new issue. I currently have code

    // this gets called when the AJAX completes.
    // this populates the table created above
    call.done(function (data,textStatus, jqXHR){
    $('#example').dataTable({
      "columnDefs": [ {
        "targets": 10,
        "data": "download_link",
        "render": function ( data, type, full, meta ) {
         return '<a href="'+data+'">' + full.IP + '</a>';    }
      } ],
    
    "autowidth" : false,
    "ordering": true,
    "scroller" :true,
    "info":     false,
    "bDestroy": true,
    "bProcessing": true,
    "aaData": data.d.results,
    
    "aoColumns": [
    { "mData": "Title"},
    { "mData": "Address1" },
    { "mData": "Address2" },
    { "mData": "City" },
    { "mData": "ST" },
    { "mData": "GLC" },
    { "mData": "CLLI_x0028_8_x0029_" },
    { "mData": "CLLI_x0028_11_x0029_" },
    { "mData": "PlantDescription" },
    { "mData": "Controller" },
    { "mData": "IP" },
    { "mData": "Notes"},
    { "mData": "Reachability_x0020__x0028_Alt_x0"}
    
    

    And I am converting my IP range into a clickable link. It seems a few links are not being converted into clickable links for example.

    A few entries are formatted as
    A - http://111.12.123.21/ - Workable links

    B - while others are formatted as 111.212.21.131 without http:// are clickable but are referring users back to the domain for example...

    www.milk.com/sites/GOGO/SitePages/111.212.21.131.
    instead of http://111.212.21.131

    Is there a solution to this?

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    In your render function I would check the format of full.IP and if http:// is missing the prefix the returned value with http://.

    Kevin

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    Revise your render function to test for the presence of "http://" and add it if missing. Or just return consistent data from the back-end in the first place.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    @tangerine, great minds think alike :smile:

  • teondexteondex Posts: 19Questions: 4Answers: 0

    Thanks guys! Last issue. I now have an issue where if the cell is empty as in missing an ip I get a clickable NULL lol. Any more great ideas?

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Use an if / else statement to return data if the ip is blank else return the href.

    Kevin

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    Revise your render function to deal with an empty field in any way you choose.

    @kthorngren: Synchronized Internet Forum Posting must feature in the 2020 Olympics.

  • teondexteondex Posts: 19Questions: 4Answers: 0

    I tried adding the following code

    if (data == '') {
          return '';
          }
          else {
          return '<a href="'+data+'">' + full.IP+ '</a>';
              }}},
    

    but it is still showing me null. Am I missing something?

    I following

    https://datatables.net/forums/discussion/29392/trying-to-add-if-statement-w-render

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Is the problem when full.IP is blank?

    Maybe thats the value you need to check.

    Kevin

  • teondexteondex Posts: 19Questions: 4Answers: 0

    Yes so the problem only occurs wen full.ip is blank.. im not sure what you mean by check the value? So basically I have 4 columns

    ColA ColB ColC ColD

    I may have an IP in ColA and ColC but ColB and ColD may be blank if the isnt set up correctly. Can you help us out?

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Not sure I understand your situation correctly but I would try this instead of what you have above:

    if (full.IP == '') {
          return '';
          }
          else {
          return '<a href="'+data+'">' + full.IP+ '</a>';
              }}},
    
    

    Kevin

This discussion has been closed.