从mysql和php检索json数据到jquery

Question

I am trying to bring mysql data into jquery by using php, I get the data into a JSON format like this.

{"uid":"33","title":"Apple, Peach, Grapefruit","ing1":"apple","qty1":"1","meas1":"whole","ing2":"peaches \/ halved and","qty2":"2","meas2":"each","ing3":"grapefruit \/ peeled","qty3":"2","meas3":"each","ing4":"","qty4":"0","meas4":"each","ing5":"","qty5":"0","meas5":"each","ing6":"","qty6":"0","meas6":"each","ing7":"","qty7":"0","meas7":"each","ing8":"","qty8":"0","meas8":"each","ing9":"","qty9":"0","meas9":"each","ing10":"","qty10":"0","meas10":"each","servings":"2","benefits":""}

using this following code:

require_once'connect.php'; 
$uid = $_GET['uid'];
$sql = "SELECT * FROM recipes WHERE uid = '$uid'";
$result = mysqli_query($conn, $sql);

$num_rows = mysqli_affected_rows($conn);
while($row = mysqli_fetch_assoc($result)) {
$data = json_encode($row);
echo $data;
}

I am using jquery .get to pull it into the web page with this code.

$(document).ready(function(e) {
var id = location.search;
uid=id.substring(4);
$.get('../jqm_juicing/data/get_json.php?uid=' + uid,function(data, status){
$("#display").append(data);
});
});

It displays the json data as above. I would like to be able to access the different elements individually, how do I do that?

Answer 1

In your jQuery, add JSON.parse() before you append (data).

$(document).ready(function(e) {
    var id = location.search;
    uid=id.substring(4);
    $.get('../jqm_juicing/data/get_json.php?uid=' + uid,function(data, status){
        $("#display").append(JSON.parse(data));
    });
});

I just changed this line:

$("#display").append(JSON.parse(data));

Hope this helps!

Answer 2

If you wrap it with <script> tags, and declare it as a variable, you will have it.

require_once'connect.php'; 
$uid = $_GET['uid'];
$sql = "SELECT * FROM recipes WHERE uid = '$uid'";
$result = mysqli_query($conn, $sql);

$num_rows = mysqli_affected_rows($conn);

echo "<script>";
while($row = mysqli_fetch_assoc($result)) {
  $data = json_encode($row);
  echo "var myJson=" . $data;
}
echo "</script>";

Now in your main page scripts, you can access this JSON like any other normal JSON.
Here is an interval that you can place anywhere in your main page scripts:
It is just to test this ;)

var checkJson = setInterval(function(){

  if(typeof(myJson.uid)!="undefined"){

    clearInterval(checkJson);

    console.log("myJson uid: " + myJson.uid);
    console.log("myJson title: " + myJson.title);
    // etc...

  }else{
    console.log("JSON not loaded yet.");
  }

},500);

Answer 3

Retrieve the json data to use json response jquery parse function. json data using this function jQuery.parseJSON()

http://api.jquery.com/jquery.parsejson/