Solved

problem with a json results

Posted on 2014-11-09
2
571 Views
Last Modified: 2014-11-09
hi
i am making an ajax call to get a data to present in in a morris chart. i return a json_encode. but it returns with a double quote, and i am not sure why it isn't working.

this is my ajax call:
        $.ajax({
            type: 'POST',
            url: 'functions/charts.php',
            data: {
                "action":"bardaily"
            },
            datatype: 'json',
            success: function (data) {
            
                console.log(data);

                
                    var donut = new Morris.Donut({
                    element: 'sales-chart',
                    resize: true,
                    colors: ["#3c8dbc", "#f56954", "#3ea847"],
                    data: data,
                    hideHover: 'auto'
                });
   

            },
            beforeSend: function () {
                $('form#myform p#statusp ').prepend("<p class='loadit' ></p>");
            },
            complete: function () {
                $("p.loadit").fadeOut();
            }
        });

Open in new window


and in my php i have for now this:
        $values = array(
            array( 'label' => "air" , 'value' => 12) ,
            array( 'label' => "light" , 'value' => 40),
            array( 'label' => "rest" , 'value' => 20 )
            );
        echo json_encode($values);

Open in new window


i don't get any error messages but the chart isn't there. when i compare the data i get from the php and the the expected data, the difference is with the double quote.

what am i missing here?
0
Comment
Question by:derrida
2 Comments
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 40430994
Try this demo to see if it helps you any.
PHP-JSON-display.php
<?php 
$values = array(
	array( 'label' => "air" , 'value' => 12) ,
	array( 'label' => "light" , 'value' => 40),
	array( 'label' => "rest" , 'value' => 20 )
	);
$data = json_encode($values);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>PHP JSON display</title>
</head>
<body>
<h1>PHP JSON display</h1>
<pre>
<?php echo $data."<br><br>"; ?>

<p id="demo"></p>
<script type="text/javascript">
var text = '<?php echo $data; ?>'

var obj = JSON.parse(text);

for(var ii=0;ii<3;ii++) {
document.getElementById("demo").innerHTML +=
obj[ii].label + " : " +
obj[ii].value + "<br>"
}
</script>

</pre>
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:derrida
ID: 40431007
hi
first thanks

i took the variables how you extracted them to use it in the data section but now i get that : SyntaxError:
missing variable name
      for(var ii=0;ii < theData.length;ii++) {
in firebug.

theData is the obj.

this is the code i tried:
                    var donut = new Morris.Donut({
                    element: 'sales-chart',
                    resize: true,
                    colors: ["#3c8dbc", "#f56954", "#3ea847"],
                    data: [
                         for( var ii=0;ii < theData.length;ii++) {
                         {label: theData[ii].label , value: theData[ii].value},
                        }
                    ],
                    hideHover: 'auto'
                });

Open in new window


the expected data section should look like this:
    var donut = new Morris.Donut({
        element: 'sales-chart',
        resize: true,
        colors: ["#3c8dbc", "#f56954", "#3ea847"],
        data: [
            {label: "this is label one", value: 12},
            {label: "this is label two", value: 30},
            {label: "this is label three", value: 20}
        ],
        hideHover: 'auto'
    });

Open in new window

0

Featured Post

The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question