22

I'm trying to plot (with Flot) a pie chart with some data

var data = <?php echo json_encode($data)?>

The result I get from that is this:

var data = [
{"label":"Crear Usuario", "data":"2"},
{"label":"Impresoras", "data":"1"},
{"label":"Problema Correo", "data":"1"},
{"label":"Requisicion Equipo", "data":"1"},
{"label":"Sitio Web", "data":"1"}
]

The problem here is that I need the label and data without the quotes, I already tried json_encode($data, JSON_NUMERIC_CHECK); but only removes the quotes from the numbers.

The following format is what I need:

var data = [
    {label:"Crear Usuario",data:2}, ...
Danny
  • 986
  • 1
  • 18
  • 42

5 Answers5

14

First, you have to generate your array in php so the data's value are integers, not strings:

I emulated your array from your json_encode(), I guess it looks like this (or it should):

$array =  array(
                array("label" => "Crear Usuario",   "data" => 2),
                array("label" => "Impresoras",      "data" => 1),
                array("label" => "Problema Correo", "data" => 1),
                array("label" => "Requisicion Equipo", "data" => 1),
                array("label" => "Sitio Web", "data" => 1)
            );

    $data = json_encode($array);
  • Notice that the 2 and 1's are unquoted, so this way they are integers, this is important.

Then you are missin in Javascript the JSON.parse() to actually make that output into a json object:

<script>
    var data = '<?php echo $data; ?>';
    var json = JSON.parse(data);
    console.log(json);
    console.log(json[0]);
</script>
  • Notice that var data = ... is SINGLE QUOTED, so you catch the echo from php as a String

The console.log()'s output this for me:

[Object, Object, Object, Object, Object] // First console.log(): one object with the 5 Objects. 
Object {label: "Crear Usuario", data: 2} // secons console log (json[0]) with the first object 

Looks like what you need, am I right?

aleation
  • 4,796
  • 1
  • 21
  • 35
  • 1
    Only `var data = ;` (removed single quotes) would do the exact same thing - without the need to parse on client side – Yaron U. Jun 03 '17 at 15:25
8

There's no difference between quoted and unquoted keys. The problem is with the quoting around the actual data values, since Flot requires numbers, not strings.

The json_encode function decides to whether to quote based on the type of data you're giving it. In this case it looks like whatever operations you're performing to create $data are producing string values instead of integers. You need to re-examine those operations, or explicitly tell PHP to interpret them as numbers, using (int) or (float) casting, or the intval/floatval functions.

DNS
  • 37,249
  • 18
  • 95
  • 132
4

Try something like this:

function buildBrokenJson( array $data ) {

   $result = '{';

   $separator = '';
   foreach( $data as $key=>$val ) {
      $result .= $separator . $key . ':';

      if( is_int( $val ) ) {
         $result .= $val;
      } elseif( is_string( $val ) ) {
         $result .= '"' . str_replace( '"', '\"', $val) . '"';
      } elseif( is_bool( $val ) ) {
         $result .= $val ? 'true' : 'false';
      } else {
         $result .= $val;
      }

      $separator = ', ';
   }

   $result .= '}';

   return $result;
}

and when run

$a = array("string"=>'Crear "Usuario', 'foo'=>':', "int"=>2, "bool"=>false);
var_dump( buildBrokenJson($a) );

it gives:

string(54) "{string:"Crear \"Usuario", foo:":", int:2, bool:false}"
Marcin Orlowski
  • 72,056
  • 11
  • 123
  • 141
3

I created a class to format json with php without quotes on the keys here is it

class JsonFormatter
{
static $result = '';
static $separator = '';

public static function iterateArray($data) : string
{
    static::$result .= '[';
    static::$separator = '';
    foreach ($data as $key => $val) {
        if (is_int($val)) {

        } elseif (is_string($val)) {
            static::$result .= '"' . str_replace('"', '\"', $val) . '"';
        } elseif (is_bool($val)) {
            static::$result .= $val ? 'true' : 'false';
        } elseif (is_object($val)) {
            static::iterateObject($val);
            static::$result .= ', ';
        } elseif (is_array($val)) {
            static::iterateArray($val);
            static::$result .= ', ';
        } else {
            static::$result .= $val;
        }
        if (!is_int($val)) {
            static::$separator = ', ';
        }
    }

    static::$result .= ']';
    return static::$result;
}

public static function iterate($data)
{
    if (is_array($data)) {
        static::iterateArray($data);
    } elseif (is_object($data)) {
        static::iterateObject($data);
    }
    return static::$result;
}

public static function iterateObject($data)
{
    static::$result .= '{';
    static::$separator = '';
    foreach ($data as $key => $val) {

        static::$result .= static::$separator . $key . ':';

        if (is_int($val)) {
            static::$result .= $val;
        } elseif (is_string($val)) {
            static::$result .= '"' . str_replace('"', '\"', $val) . '"';
        } elseif (is_bool($val)) {
            static::$result .= $val ? 'true' : 'false';
        } elseif (is_object($val)) {
            static::iterate($val, true);
            static::$result .= ', ';
        } elseif (is_array($val)) {
            static::iterateArray($val, true);
            static::$result .= ', ';
        } else {
            static::$result .= $val;
        }
        static::$separator = ', ';
    }
    static::$result .= '}';
    return static::$result;
}

}

you can now call

$jsonWithoutKeyQuotes  = JsonFormatter::iterate($data);

thanks to Marcin Orlowski

Ekene Madunagu
  • 323
  • 1
  • 3
  • 7
  • There's a slight glitch tho, this function adds an extra comma after the last closing bracket before a new property. Any way you can quickly fix this? Try testing with a fairly deep object. Cheers – Jason Engage May 12 '22 at 01:53
0

TL;DR: Missing quotes is how Chrome shows it is a JSON object instead of a string. Ensure that you have Header('Content-Type: application/json; charset=UTF8'); in PHP's AJAX response to solve the real problem.

DETAILS: A common reason for wanting to solve this problem is due to finding this difference while debugging the processing of returned AJAX data.

In my case I saw the difference using Chrome's debugging tools. When connected to the legacy system, upon success, Chrome showed that there were no quotes shown around keys in the response according to the debugger. This allowed the object to be immediately treated as an object without using a JSON.parse() call. Debugging my new AJAX destination, there were quotes shown in the response and variable was a string and not an object.
I finally realized the true issue when I tested the AJAX response externally saw the legacy system actually DID have quotes around the keys. This was not what the Chrome dev tools showed. The only difference was that on the legacy system there was a header specifying the content type. I added this to the new (WordPress) system and the calls were now fully compatible with the original script and the success function could handle the response as an object without any parsing required. Now I can switch between the legacy and new system without any changes except the destination URL.

Brian Layman
  • 456
  • 3
  • 10