Iterate loop in php associative array using Jquery

Question

I have PHP associative array and I use JQuery AJAX to get the result array but my problem is when that result is pass to jquery and use looping to extract each Sequence,Percent and Date then that extracted data will store to new Jquery Array for data manipulation purposes. Please see my sample code so far.

sample code PHP ARRAY:

$Sequence=array(
    array("Seq1","20%"),
    array("Seq2","40%"),
    array("Seq3","60%"),
    array("Seq4","80%"),
    array("Seq5","100%")
);

****For loop here****

$ResultArray[$arrayIndex]=array(
    'Sequence' => $Sequence[$arrayIndex][0],
    'Percent' => $Sequence[$arrayIndex][1],
    'Date' => $row['exactDate']
);


echo json_encode($ResultArray); // then pass result array to jquery

JQUERY :

$(document).ready(function(){

    var ListOfSequence = []
    var ListOfPercentage = [];
    var ListOfDates = [];

    $("#button").click(function(){

        var _WOID = $('#txtWOID').val();

        $.ajax({
            url:'getStatus.php',
            type:'POST',
            data:{id:_WOID},
            dataType:'json',
            success:function(output){
                //here is where the problem begin
                for (var key in output) {
                    if (output.hasOwnProperty(key)) {
                        //here where extracted data will store to designated array
                        ListOfSequence.push(key);//<---store extracted Sequence
                        ListOfPercentage.push(key);//<---store percentage
                        ListOfDates.push(output[key]);//<---store dates                
                    }
                }

                ListOfPercentage.reverse();

                console.log(ListOfPercentage);
                console.log(ListOfDates);
                console.log(ListofSequence);

            }

        });

    });

});

and here's the console.log:

enter image description here

Thank you in advance

score 1 · Answer 1 · answered Oct 16 '14 at 09:01

1

You should set the json response header before sending the content to the browser like so:

header('Content-type: application/json'); die(json_encode($ResultArray);)

answered Oct 16 '14 at 09:01

mocanuga

131
4

ok sir... if you don't mind, what will happen if I don't set json response header? – Waelhi Oct 16 '14 at 09:05
You send a simple plain text response. That response must be evaluated before using it as a json array with the eval function like so: var json = eval(response); – mocanuga Oct 16 '14 at 09:06
so I must replace my **`echo json_encode($ResultArray);`** with yours? – Waelhi Oct 16 '14 at 09:12
You can leave it like that. The die() statement just end the execution of the script, so you know it finished doing it's thing. It's your call if you need to add the die() or not. You need to add the header() statement though. – mocanuga Oct 16 '14 at 09:16
1

@mocanuga never ever tell anyone to use `eval()` its really bad practice unless you know what you are doing (and OP clearly is not), a better aswer would have been `var json = JSON.parse(output);` – DarkMukke Oct 16 '14 at 09:31
1

@mocanuga since OP is using `dataType : json` it does not need to be eval'ed or w/e, jquery will take care of that – DarkMukke Oct 16 '14 at 09:32
2

You're right. It's just that I always set the header just to be safe. Also, I didn't recommend anyone to use eval. I just told him that, without the json header, he might need to. JSON.parse might not be available in older browsers. – mocanuga Oct 16 '14 at 09:38
1

and that's why I didn't down rate your answer itself because imo that is an improvement and good practice, just the comments aren't (and sorry I explode every time I see someone say eval()), and you are right about older browsers but that must be something like IE6/7 : http://stackoverflow.com/questions/4908875/is-json-parse-supported-by-all-major-browsers#answer-4908892 if MS stops supporting IE6/7 why should we still support them ? – DarkMukke Oct 16 '14 at 09:40
It's fine. You had some valid points. I think that whoever reads these comments can learn something from them. – mocanuga Oct 16 '14 at 09:43

score 1 · Accepted Answer · answered Oct 16 '14 at 09:03

Since you are already using jQuery you could use $.each() :

$(document).ready(function(){

  var ListOfSequence = []
  var ListOfPercentage = [];
  var ListOfDates = [];

  $("#button").click(function(){

    var _WOID = $('#txtWOID').val();

    $.ajax({
      url:'getStatus.php',
      type:'POST',
      data:{id:_WOID},
      dataType:'json',
      success:function(json){
         $.each(json, function(index, object){
             ListOfSequence.push(object.Sequence);
             ListOfPercentage.push(object.Percent);
             ListOfDates.push(object.Date);
         });

      }

    });

  });

});

Iterate loop in php associative array using Jquery

2 Answers2