Working with a JSON array

Question

I've only ever used ajax to write to sessions or perform inserts but now i'm needing to get a response. I have managed to go through several examples and 'kind of' got it working but i've reached a point where i'm stuck. I'm looking for a dumbed down working model that i can then use as a base to expand my knowledge on.

AIM

To read the session details (cart info) and update them in the sidebar without the page refreshing

Jquery

$('form').submit(function(e) {
e.preventDefault();
   $.ajax({
      type: "POST",
      url: "buy-page-handler.php",
      data: $(this).serialize(),
      success: function(result){

    jq_json_obj = $.parseJSON(result); //Convert the JSON object to jQuery-compatible

  if(typeof jq_json_obj == 'object'){ //Test if variable is a [JSON] object
    jq_obj = eval (jq_json_obj); 

    //Convert back to an array
    jq_array = [];
    for(elem in jq_obj){
        jq_array.push(jq_obj[elem]);
    }
    console.log(jq_array); // I THOUGHT I COULD LOOP THROUGH Jq_array BUT CANT GET IT DISPLAYING ANYTHING
  }else{
    console.log("Error occurred!"); 
  }

      }

   });

PHP

<?php
session_start();
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
include ("cart_functions.php");
if(isset($_POST["id"]))
{
$pid = $_POST['id'];
$q = $_POST['qty'];
$name = $_POST['name'];
$desc = $_POST['desc'];
$price = $_POST['price'];
$productimg = $_POST['img'];
addtocart($pid,$q,$name,$desc,$price,$productimg);

echo json_encode($_SESSION['cart']);
}
?>

CONSOLE LOG

[{"productid":"1","qty":"1","productname":"item 1","productdesc":"this thing","productprice":"20.00","productimg":""},{"productid":"2","qty":"1","productname":"item 2","productdesc":"this other thing","productprice":"10.00","productimg":""}]

It appears that it is working, however i can't seem to attach a variable name to the returned array and work with it to display it in the #sidebar. Any assistance would be greatly appreciated.

change the `for(elem in jq_obj){jq_array.push(jq_obj[elem]);}` to `for(var i = 0; i < jq_obj.length; i++){jq_array.push(jq_obj[i]);}` — Nerdroid, Oct 29 '14 at 22:05

score 0 · Answer 1 · answered Oct 29 '14 at 22:12

Your script seems overly complicated. It looks like you can already access your variables like jq_json_obj[0].productid and you don't need the eval and extra loop.

If you set the dataType, you don't need to parse the result either and you can reduce it to:

$.ajax({
  type: "POST",
  url: "buy-page-handler.php",
  data: $(this).serialize(),
  dataType: "json",    // set the datatype for the returned data
  success: function(result) {
    // the return string has already been parsed
    // you seem to have your object stored in an array so I'll use another
    // variable for clarity
    var product = result[0];

    console.log(product.productname);    // should give you "item 1"

    // etc.
  }
 });

Note: If this does not work, you should do a console.log(result); to see what you have exactly. Now that is hard to see with all the processing that you have done.

Jeroen: how do i then loop through it and display it in the div with an id of #sidebar? — Dale, Oct 29 '14 at 22:24
@Dale I don't know why you would want to loop (I'd place the items manually...), but check this: http://stackoverflow.com/questions/684672/loop-through-javascript-object — jeroen, Oct 30 '14 at 02:04

Working with a JSON array

1 Answers1