Hi

I have written a json file using php. But i am unable to display the css style. can any please help me to fix the issue.

my json code

<?php
require_once('config.php');

    function jde_date_conv($jde_date)
        {
            $ct = substr($jde_date,0,1);
            $yr = substr($jde_date,1,2);
            $dy = substr($jde_date,3,3);

            if($ct == 0)$yr_pfx=19;
            if($ct == 1)$yr_pfx=20;

            $tlt_yr = $yr_pfx.$yr;

            $base_time = mktime(0,0,0,1,0,$tlt_yr);

            $unix_time = ($dy*86400)+$base_time;

            return date("m-d-Y",$unix_time);
        }

    function setMyValue ($myValue) 
        {
            $newValue = (int)$myValue;
            $myArray = array_reverse(str_split($newValue));
            $myValue ="";
        foreach ($myArray as $key=>$myDigits) 
            {
                $myValue.=($key>0 && $key%2==0) ? ":" : "";
                $myValue.= $myDigits;
            }
        return strrev($myValue);

        }

        function setMyStatus($MyStatus)
        {
            //$MyStatus = "";
            if($MyStatus=='I') 
            { 
                $MyStatus = "<span class='label label-success'>In Progress</span>";

            }elseif($MyStatus=='Y') 
            {
                $MyStatus = "<span class='label label-warning'>Manual Hold</span>"; 
            }elseif($MyStatus=='E') 
            {
                $MyStatus = "<span class='label label-danger'>Error</span>"; 
            }else 
            {
                $MyStatus = "<span class='label label-default'>Scheduled</span>";
            }
        return($MyStatus);
        }

    $query ="SELECT SSYQ64SID,SHYQ64YN,SHYQ64ALPH,SSYQ64UKID,SSYQ64TJBS,SSYQ64STST,SSYQ64LRDT FROM $database.fq64004,$database.fq64001 where SSYQ64SID=SHYQ64SID AND SHYQ64YN='Y' AND SSYQ64STST!='D' order by SSYQ64LRDT,SSYQ64TJBS ASC";  
    $objExec = odbc_exec($connection, $query);  
    while($fetch = odbc_fetch_array($objExec))
        {
            $SSYQ64STST = $fetch["SSYQ64STST"]; 

            $output[] = array (intval($fetch['SSYQ64SID']),$fetch['SHYQ64YN'],$fetch['SHYQ64ALPH'],intval($fetch['SSYQ64UKID']),setMyValue($fetch['SSYQ64TJBS']),setMyStatus($fetch['SSYQ64STST']));
        }
echo json_encode($output);
?>

<style>
/*Labels*/
.label {
  border-radius: 0;
  -webkit-border-radius: 0;
  font-weight: normal;
  font-size: 95%;
}
.label-default {
  background-color: #a1a1a1;
}
.label i {
  font-size: 100% !important;
  color: inherit !important;
  width: auto !important;
  min-width: 11px;
}
.label-success {
  background-color: #19b698;
}
.label-primary {
  background-color: #FF0000;
}
.label-warning {
  background-color: #fed16c;
}
.label-danger {
  background-color: #ea6153;
}
.label-info {
  background-color: #4aa3df;
}
</style>

i am getting the output as

[[551,"Y","SENTHIL_TEST ",63692,"1:00:00","In Progress<\/span>"],[551,"Y","SENTHIL_TEST ",63693,"2:00:00","In Progress<\/span>"],[542,"Y","FILE ADAPTER ",63742,"6:00:00","In Progress<\/span>"],[578,"Y","DIWAKAR_TEST1 ",64429,"10:20:00","Scheduled<\/span>"],[563,"Y","MANUAL HOLD ",64012,"15:31:56","Manual Hold<\/span>"],[577,"Y","DELETE STREAM ",63972,"23:00:00","In Progress<\/span>"],[541,"Y","AR STREAM ",63901,"5:00","Scheduled<\/span>"],[540,"Y","SALES STREAM - DAILY ",63899,"7:49","Error<\/span>"],[551,"Y","SENTHIL_TEST ",64413,"9:00:00","Scheduled<\/span>"],[551,"Y","SENTHIL_TEST ",64416,"9:00:00","Scheduled<\/span>"],[551,"Y","SENTHIL_TEST ",64427,"9:00:00","Scheduled<\/span>"],[573,"Y","AK001 ",64310,"9:13:49","In Progress<\/span>"],[556,"Y","SENTHIL_TEST3 ",64250,"10:00:00","Scheduled<\/span>"],[556,"Y","SENTHIL_TEST3 ",64252,"10:00:00","Scheduled<\/span>"],[572,"Y","DIWAKAR_TEST ",64009,"12:00:00","Scheduled<\/span>"],[554,"Y","DAILY TIME RANGE ",64106,"17:00:00","Scheduled<\/span>"],[525,"Y","DAILY ",64066,"17:30:00","Scheduled<\/span>"],[533,"Y","WEDNESDAY ",63675,"22:50:00","Scheduled<\/span>"],[531,"Y","DAILY - OVERNIGHT ",64150,"23:45:00","Scheduled<\/span>"],[561,"Y","EMAIL TEST ",64357,"7:00:00","Scheduled<\/span>"],[534,"Y","THURSDAY ",63674,"22:50:00","Scheduled<\/span>"],[564,"Y","QUARTERLY ",64428,"9:54:00","Scheduled<\/span>"],[535,"Y","FRIDAY ",63678,"22:50:00","Scheduled<\/span>"],[538,"Y","FRIDAY\/SATURDAY-OVERNIGHT ",63739,"23:50:00","Scheduled<\/span>"],[536,"Y","SATURDAY ",63724,"22:50:00","Scheduled<\/span>"],[537,"Y","SUNDAY ",63782,"22:50:00","Scheduled<\/span>"],[527,"Y","MONDAY ",63877,"22:50:00","Scheduled<\/span>"],[532,"Y","TUESDAY ",64296,"22:50:00","Scheduled<\/span>"]]

**But i my expected output should be **

[[551,"Y","SENTHIL_TEST ",63692,"1:00:00","In Progress"],[551,"Y","SENTHIL_TEST ",63693,"2:00:00","In Progress"],[542,"Y","FILE ADAPTER ",63742,"6:00:00","In Progress"],[578,"Y","DIWAKAR_TEST1 ",64429,"10:20:00","Scheduled"],[563,"Y","MANUAL HOLD ",64012,"15:31:56","Manual Hold"],[577,"Y","DELETE STREAM ",63972,"23:00:00","In Progress"],[541,"Y","AR STREAM ",63901,"5:00","Scheduled"],[540,"Y","SALES STREAM - DAILY ",63899,"7:49","Error"],[551,"Y","SENTHIL_TEST ",64413,"9:00:00","Scheduled"],[551,"Y","SENTHIL_TEST ",64416,"9:00:00","Scheduled"],[551,"Y","SENTHIL_TEST ",64427,"9:00:00","Scheduled"],[573,"Y","AK001 ",64310,"9:13:49","In Progress"],[556,"Y","SENTHIL_TEST3 ",64250,"10:00:00","Scheduled"],[556,"Y","SENTHIL_TEST3 ",64252,"10:00:00","Scheduled"],[572,"Y","DIWAKAR_TEST ",64009,"12:00:00","Scheduled"],[554,"Y","DAILY TIME RANGE ",64106,"17:00:00","Scheduled"],[525,"Y","DAILY ",64066,"17:30:00","Scheduled"],[533,"Y","WEDNESDAY ",63675,"22:50:00","Scheduled"],[531,"Y","DAILY - OVERNIGHT ",64150,"23:45:00","Scheduled"],[561,"Y","EMAIL TEST ",64357,"7:00:00","Scheduled"],[534,"Y","THURSDAY ",63674,"22:50:00","Scheduled"],[564,"Y","QUARTERLY ",64428,"9:54:00","Scheduled"],[535,"Y","FRIDAY ",63678,"22:50:00","Scheduled"],[538,"Y","FRIDAY\/SATURDAY-OVERNIGHT ",63739,"23:50:00","Scheduled"],[536,"Y","SATURDAY ",63724,"22:50:00","Scheduled"],[537,"Y","SUNDAY ",63782,"22:50:00","Scheduled"],[527,"Y","MONDAY ",63877,"22:50:00","Scheduled"],[532,"Y","TUESDAY ",64296,"22:50:00","Scheduled"]]
Member Avatar for diafol

SO is the only difference <\/span> in the first example?

I imagine that <span> is also being returned in the first one too, but it's shown as a real span tag (invisible). If you look at Browser Source View, you'll probably see the full line, e.g.

[527,"Y","MONDAY ",63877,"22:50:00","<span class='label label-default'>Scheduled<\/span>"]

thanks for your reply.

but my page looks like Capture.PNG

Member Avatar for diafol

Yes I know the page looks like that. How does the page look in View Source?

its looks like, what you said.

As from what I see, it is probably because the process for the string containing html tag. Try to put this htmlentities(setMyStatus($fetch[5])). But if you echo json_encode(), it will echoed the span tag as well. but if you will using the value in json_decode(), it will work fine.

Thanks for your suggestions(diafol). I tried out IPS suggestion. but its not working.

@rpv_sen, may I know what is not working? any error thrown? As from what I tested, the result will be look like: test.jpg
If your 'not working' refer to the <span> displayed, I suggest your code should simply remove the span in setMyStatus.
Just for your info, my practices is not to include styling/html tag in json_encoded data. So if I am in the case, I will simply use the $fetch['SSYQ64STST'] without setMyStatus() and only adding the processing functions and stylings when I wish to use the decoded data. With this, my json_encoded data can be used by different classes(or even ajax calling) without a fixed layout/styling.

thanks lps

my expected output as below

Capture.PNG

Are you using ajax or php file_get_content?

Here is ajax version:

<?php
if(isset($_POST['ajax'])){
    $a = '[[551,"Y","SENTHIL_TEST ",63692,"1:00:00","In Progress"],[551,"Y","SENTHIL_TEST ",63693,"2:00:00","In Progress"],[542,"Y","FILE ADAPTER ",63742,"6:00:00","In Progress"],[578,"Y","DIWAKAR_TEST1 ",64429,"10:20:00","Scheduled"],[563,"Y","MANUAL HOLD ",64012,"15:31:56","Manual Hold"],[577,"Y","DELETE STREAM ",63972,"23:00:00","In Progress"],[541,"Y","AR STREAM ",63901,"5:00","Scheduled"],[540,"Y","SALES STREAM - DAILY ",63899,"7:49","Error"],[551,"Y","SENTHIL_TEST ",64413,"9:00:00","Scheduled"],[551,"Y","SENTHIL_TEST ",64416,"9:00:00","Scheduled"],[551,"Y","SENTHIL_TEST ",64427,"9:00:00","Scheduled"],[573,"Y","AK001 ",64310,"9:13:49","In Progress"],[556,"Y","SENTHIL_TEST3 ",64250,"10:00:00","Scheduled"],[556,"Y","SENTHIL_TEST3 ",64252,"10:00:00","Scheduled"],[572,"Y","DIWAKAR_TEST ",64009,"12:00:00","Scheduled"],[554,"Y","DAILY TIME RANGE ",64106,"17:00:00","Scheduled"],[525,"Y","DAILY ",64066,"17:30:00","Scheduled"],[533,"Y","WEDNESDAY ",63675,"22:50:00","Scheduled"],[531,"Y","DAILY - OVERNIGHT ",64150,"23:45:00","Scheduled"],[561,"Y","EMAIL TEST ",64357,"7:00:00","Scheduled"],[534,"Y","THURSDAY ",63674,"22:50:00","Scheduled"],[564,"Y","QUARTERLY ",64428,"9:54:00","Scheduled"],[535,"Y","FRIDAY ",63678,"22:50:00","Scheduled"],[538,"Y","FRIDAY\/SATURDAY-OVERNIGHT ",63739,"23:50:00","Scheduled"],[536,"Y","SATURDAY ",63724,"22:50:00","Scheduled"],[537,"Y","SUNDAY ",63782,"22:50:00","Scheduled"],[527,"Y","MONDAY ",63877,"22:50:00","Scheduled"],[532,"Y","TUESDAY ",64296,"22:50:00","Scheduled"]]';
    $decoded = json_decode($a);
    $output = array();
    //require_once('config.php');
    function setMyStatus($MyStatus){
        if($MyStatus=='I'){ 
            $MyStatus = "<span class='label label-success'>In Progress</span>";
        }elseif($MyStatus=='Y') {
            $MyStatus = "<span class='label label-warning'>Manual Hold</span>"; 
        }elseif($MyStatus=='E') {
            $MyStatus = "<span class='label label-danger'>Error</span>"; 
        }else {
            $MyStatus = "<span class='label label-default'>Scheduled</span>";
        }
        return($MyStatus);
    }
    //$query ="SELECT SSYQ64SID,SHYQ64YN,SHYQ64ALPH,SSYQ64UKID,SSYQ64TJBS,SSYQ64STST,SSYQ64LRDT FROM $database.fq64004,$database.fq64001 where SSYQ64SID=SHYQ64SID AND SHYQ64YN='Y' AND SSYQ64STST!='D' order by SSYQ64LRDT,SSYQ64TJBS ASC";  
    //$objExec = odbc_exec($connection, $query);  
    //while($fetch = odbc_fetch_array($objExec))
    foreach($decoded as $fetch){
            //$SSYQ64STST = $fetch["SSYQ64STST"];
        switch($fetch[5]){
            case "In Progress":
                $fetch[5] = 'I';
                break;
            case "Manual Hold":
                $fetch[5] = 'Y';
                break;
            case "Error":
                $fetch[5] = 'E';
                break;
        }
        $output[] = array($fetch[0],$fetch[1],$fetch[2],$fetch[3],$fetch[4],htmlentities(setMyStatus($fetch[5])));
    }
    echo json_encode($output);
}else{
?>
    <script src = "http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        function ShowResults(value, index, ar) {
            console.log("value: " + value);
        }

        $(document).ready(function() {
            $.ajax({
                url: "test.php",
                method: "post",
                dataType: "json",
                data: {'ajax': true},
                success:function(resp) {
                    //console.log(resp);
                    for (i = 0; i < resp.length; i++) { 
                        console.log(resp[i]);
                        var id = resp[i][0];
                        var desc = resp[i][2];
                        var date = resp[i][3];
                        var time = resp[i][4];
                        var status = resp[i][5];
                        var decode = $('<div/>').html(status).text(); //this is to decode the html entities
                        $('#display').append("<tr><td>"+id+"</td><td>"+desc+"</td><td>"+date+"</td><td>"+time+"</td><td>"+decode+"</td></tr>");
                    }
                }
            });
        });
    </script>
    <style>
    /*Labels*/
    .label {
      border-radius: 0;
      -webkit-border-radius: 0;
      font-weight: normal;
      font-size: 95%;
    }
    .label-default {
      background-color: #a1a1a1;
    }
    .label i {
      font-size: 100% !important;
      color: inherit !important;
      width: auto !important;
      min-width: 11px;
    }
    .label-success {
      background-color: #19b698;
    }
    .label-primary {
      background-color: #FF0000;
    }
    .label-warning {
      background-color: #fed16c;
    }
    .label-danger {
      background-color: #ea6153;
    }
    .label-info {
      background-color: #4aa3df;
    }
    </style>
    <table id="display"></table>
<?php
}
?>

Please note that these are just an example of implementation. Not recommended to combine all things in real work

php version

    <style>
    /*Labels*/
    .label {
      border-radius: 0;
      -webkit-border-radius: 0;
      font-weight: normal;
      font-size: 95%;
    }
    .label-default {
      background-color: #a1a1a1;
    }
    .label i {
      font-size: 100% !important;
      color: inherit !important;
      width: auto !important;
      min-width: 11px;
    }
    .label-success {
      background-color: #19b698;
    }
    .label-primary {
      background-color: #FF0000;
    }
    .label-warning {
      background-color: #fed16c;
    }
    .label-danger {
      background-color: #ea6153;
    }
    .label-info {
      background-color: #4aa3df;
    }
    </style>
    <table id="display">
<?php
    $fgc = file_get_contents("http://localhost:4848/test.php?fgc=true");
    $details = json_decode($fgc);
    foreach($details as $detail){
?>
        <tr>
            <td><?php echo $detail[0]; ?></td>
            <td><?php echo $detail[1]; ?></td>
            <td><?php echo $detail[3]; ?></td>
            <td><?php echo $detail[4]; ?></td>
            <td><?php echo html_entity_decode($detail[5]); ?></td>
        </tr>
<?php
    }
?>
    </table>

lps thanks

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Populate jQuery datatable with JSON data :: jQuery Ajax PHP</title>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://getbootstrap.com/assets/css/docs.css" />

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="jquery.dataTables.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {

    //$('#jsontable').dataTable( {
   //     "ajax": 'arrays.txt'
   // } );

var oTable = $('#jsontable').dataTable();  //Initialize the datatable

    $('#load').on('click',function(){
        var user = $(this).attr('id');
        if(user != '') 
        { 
        $.ajax({
            url: 'process.php?method=fetchdata',
            dataType: 'json',
            success: function(s){
            console.log(s);
                    oTable.fnClearTable();
                        for(var i = 0; i < s.length; i++) {
                         oTable.fnAddData([
                                    s[i][0],
                                    s[i][1],
                                    s[i][2],
                                    s[i][3],
                                    s[i][4],
                                    s[i][5]
                                           ]);                                      
                                        } // End For

            },
            error: function(e){
               console.log(e.responseText); 
            }
            });
        }
    });
});
</script>
<style>
/*Labels*/
.label {
  border-radius: 0;
  -webkit-border-radius: 0;
  font-weight: normal;
  font-size: 95%;
}
.label-default {
  background-color: #a1a1a1;
}
.label i {
  font-size: 100% !important;
  color: inherit !important;
  width: auto !important;
  min-width: 11px;
}
.label-success {
  background-color: #19b698;
}
.label-primary {
  background-color: #FF0000;
}
.label-warning {
  background-color: #fed16c;
}
.label-danger {
  background-color: #ea6153;
}
.label-info {
  background-color: #4aa3df;
}
</style>
<style type="text/css">
.container {
    width: 980px;
    margin:0 auto;  
}
#demo-header {
height: 150px;
width: 100%;
background: url('http://www.jqueryajaxphp.com/cdn/2013/11/jap-logo.png') center no-repeat;
margin-bottom: 25px;
border-bottom: 1px solid #999;
padding-bottom: 25px;
}
.btn {
    margin-bottom:30px
}
footer {
width: 786px;
font: normal 16px Arial, Helvetica, sans-serif;
padding: 15px 35px;
position: fixed;
bottom: 0;
left: 50%;
margin-left: -420px;
background-color: #1f1f1f;
background-image: -webkit-linear-gradient(top, #1f1f1f, #101010);
background-image: -moz-linear-gradient(top, #1f1f1f, #101010);
background-image: linear-gradient(top, #1f1f1f, #101010);
border-radius: 2px 2px 0 0;
box-shadow: 0 -1px 4px rgba(0,0,0,0.4);
z-index: 15;
text-align: center;
}
</style>
</head>

<body>
<div id="demo-header"></div>
<div class="container">
<input type="button" class="btn btn-primary" value="Load Table" id="load"/>
<table id="jsontable" class="display table table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>SID</th>
                <th>Stream Status</th>
                <th>Stream Name</th>
                <th>UKID</th>
                <th>Time</th>
                <th>Status </th>
            </tr>
        </thead>


    </table>
</div>
</body>
</html>

process.php

<?php
require_once('config.php');

    function jde_date_conv($jde_date)
        {
            $ct = substr($jde_date,0,1);
            $yr = substr($jde_date,1,2);
            $dy = substr($jde_date,3,3);

            if($ct == 0)$yr_pfx=19;
            if($ct == 1)$yr_pfx=20;

            $tlt_yr = $yr_pfx.$yr;

            $base_time = mktime(0,0,0,1,0,$tlt_yr);

            $unix_time = ($dy*86400)+$base_time;

            return date("m-d-Y",$unix_time);
        }

    function setMyValue ($myValue) 
        {
            $newValue = (int)$myValue;
            $myArray = array_reverse(str_split($newValue));
            $myValue ="";
        foreach ($myArray as $key=>$myDigits) 
            {
                $myValue.=($key>0 && $key%2==0) ? ":" : "";
                $myValue.= $myDigits;
            }
        return strrev($myValue);

        }

        function setMyStatus($MyStatus)
        {
            //$MyStatus = "";
            if($MyStatus=='I') 
            { 
                $MyStatus = "<span class='label label-success'>In Progress</span>";
                //$MyStatus = strip_tags($MyStatus);

            }elseif($MyStatus=='Y') 
            {
                $MyStatus = "<span class='label label-warning'>Manual Hold</span>"; 
            }elseif($MyStatus=='E') 
            {
                $MyStatus = "<span class='label label-danger'>Error</span>"; 
            }else 
            {
                $MyStatus = "<span class='label label-default'>Scheduled</span>";
            }
        return($MyStatus);
        }

    $query ="SELECT SSYQ64SID,SHYQ64YN,SHYQ64ALPH,SSYQ64UKID,SSYQ64TJBS,SSYQ64STST,SSYQ64LRDT FROM $database.fq64004,$database.fq64001 where SSYQ64SID=SHYQ64SID AND SHYQ64YN='Y' AND SSYQ64STST!='D' order by SSYQ64LRDT,SSYQ64TJBS ASC";  
    $objExec = odbc_exec($connection, $query);  
    while($fetch = odbc_fetch_array($objExec))
        {

            $output[] = array (intval($fetch['SSYQ64SID']),$fetch['SHYQ64YN'],$fetch['SHYQ64ALPH'],intval($fetch['SSYQ64UKID']),setMyValue($fetch['SSYQ64TJBS']),setMyStatus($fetch['SSYQ64STST']));
        }
echo json_encode($output);
?>

<style>
/*Labels*/
.label {
  border-radius: 0;
  -webkit-border-radius: 0;
  font-weight: normal;
  font-size: 95%;
}
.label-default {
  background-color: #a1a1a1;
}
.label i {
  font-size: 100% !important;
  color: inherit !important;
  width: auto !important;
  min-width: 11px;
}
.label-success {
  background-color: #19b698;
}
.label-primary {
  background-color: #FF0000;
}
.label-warning {
  background-color: #fed16c;
}
.label-danger {
  background-color: #ea6153;
}
.label-info {
  background-color: #4aa3df;
}
</style>

So, problem solved? If solved, please mark this thread as solved. If not, please go detail on what is the issue as I only saw you post your code without mentioned anything.

Sorry for delay. I dont know where i did mistake. its not working.

echo json_encode('your array', JSON_UNESCAPED_SLASHES);

Member Avatar for diafol

go detail on what is the issue

Then...

I dont know where i did mistake. its not working.

That'll help, heh heh.

thanks diafol

commented: He he +15

Thanks Vivek_13, my issue fixed.

Thanks to diafol,lps,Vivek_13

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.