How to change value of HTML according to JSON response?

User123456

I want to change the appearance of my HTML. Instead of showing 1 and 0, I want to show <i class='ace-icon fa fa-circle green'></i> and <i class='ace-icon fa fa-circle red'></i> respectively.

If the JSON response, in the first position(0) OF THE JSON, if be equals to 1 it should output the icon <i class='ace-icon fa fa-circle green'></i> in the respective <td></td> else if, be equals to 0 it should output the icon <i class='ace-icon fa fa-circle red'></i>.

This is a example JSON:

["0", "FooBarBaz", "42.875.000/1486-83", "13630-275", "Rua Sofia Levi", "Aiur", "Vila Industrial", "4"]

How can I achieve this?

$(document).ready(function() {
                $('#companyTable').DataTable({
                    "processing": true,
                    "serverSide": true,
                    "ajax": "lib/server_processing.php",

                    "columns": [
                                { "data": 0 },
                                { "data": 1 },
                                { "data": 2 },
                                { "data": 3 },
                                { "data": 4 },
                                { "data": 5 },
                                { "data": 6 }
                            ],

                    "order": [ 1, "asc" ],

                    "columnDefs": [ 
                        { "orderable": false, "targets": 0 },
                        { "orderable": false, "targets": 6 },
                    {
                          "targets": 7,
                          "data": "",
                          "mRender": function(data, type, full){
                            return '<a data-toggle="modal" data-target="#infoModal" id="getCompany" class="blue"><i class="ace-icon fa fa-search-plus bigger-130"></i></a> <a class="red"><i class="ace-icon fa fa-trash-o bigger-130"></i></a>';
                          }} ],

                    "sScrollX": "100%",
                    "sScrollXInner": "103%",
                });
            });

I think the image can help to understand better:

I'm trying to do server side, with PHP while I easily did. The red circle means the value is 0 and the green means 1.

hiswillpower

I think this is a job for column.render the example is at:
https://datatables.net/examples/advanced_init/column_render.html

here's a stab...

"columns": [
                 { "data": 0,
                   "render": function ( data, type, row ) {
                                  var text = "";
                                  if (type == "display") {
                                    if (data == "1") {
                                       text = "<i class='ace-icon fa fa-circle green'></i>";
                                    } else {
                                       text = "<i class='ace-icon fa fa-circle red'></i>";
                                    }
                                    data = text
                                  }
                                  return data;
                     },
                  },  
                  { "data": 1 },
                  { "data": 2 },
                  { "data": 3 },
                              { "data": 4 },
                  { "data": 5 },
                  { "data": 6 }
]

User123456

Okay, this worked very nice @hiswillpower . Just a Disenchantment of Consciousness, what is the purpouse of the var text and type="display"?

And you are missing a " after type == "display.

Rob Brun

Hi User123456, the way I would try to do it is in my columns configuration

columns: [
 {
     data: 0,
     "render": function ( data, type, row ) {
              if (data === 0) {
                 return '<i class='ace-icon fa fa-circle green'></i>';
                 } else {
                 return '<i class='ace-icon fa fa-circle red'></i>';
             }
       }
}
//ect...
]

hiswillpower

User123456:
Thanks for the correction on the ", still learning markdown.
the type == "display" refers to the value used for the display, this allows search to still use the "0" instead of the marked up data.

Rob Brun:

I believe his data is indexed at 0 not == 0.

Rob Brun

Hi hiswillpower, but the data for the column would either be a 1 or a 0 is how I understood it. So it would either data === 1 or data === 0. Look at the example array

["0", "FooBarBaz", "42.875.000/1486-83", "13630-275", "Rua Sofia Levi", "Aiur", "Vila Industrial", "4"]

index 0's value is 0.

hiswillpower

Rob Brun:
Yes you are correct, 0 == "0" in JS.

Too many languages

Ted

User123456

Okay thanks everyone who helped me.