Multiple Arrays returned by json from PHP

Question

To begin with I am building a complete CRM running Ajax and there is a lot to this, so please be patient and read the whole thing.

I have an ajax script returning several json arrays. When I display the return value from my php script I get this:

[{"packages":{"id":"1","name":"Land Line"}},{"packages":{"id":"2","name":"Cellular w\/Alarm.com"}},{"packages":{"id":"3","name":"Home Automation"}}]

What I am trying to do is separate the arrays so I can make a select drop down from it. Before anyone says anything, yes I know how to do that my itself, but I am needing the form this script is populating to be a select dropdown or a complete filled in form based off of the id going into another script. It is a bit confusing, so don't ding me for it please.

Here is the PHP script alliance_form.php:

    $equip = "SELECT * FROM packages WHERE brand='$brand'";
    if($db->query($equip) === false)    {
        trigger_error('Wrong SQL: ' . $query . ' Error: ' . $db->error, E_USER_ERROR);
    } else  {
        $result = $db->query($equip);
        $array = array();
        foreach($result as $r)  {
            $array[] = array(
                    "packages" => array(
                    "id" => $r['id'],
                    "name" => $r['name']
                    )
            );
        }
        echo json_encode($array);
    }

Here is the jquery going to the PHP form and coming back to input the information:

$.ajax({
    type: "POST",
    url: "/crm/alliance_form.php",
    data: dataString,
    success: function(msg)
        {
            $("#package-form").html(msg);
            $.each(msg.packages, function(i, object)    {
                $.each(object, function(index, value) {
                    alert(value);
                });
            });

        },
    error: function(error)
        {
            $(".error").html(error);
        }
}); 

This is part of an ordering system of a CRM, so this script is checking the database for existing orders under the id. If the id is there then it is supposed to come back with the order information and I populate the form. If not it will give a select dropdown to select a package which then populates an empty form. That is the gist of what I am on right now.

Here is the question: Why can't I get a response from JQuery on the each() loop on this. One return comes back with a regular array, and this one is a nested array.

Answer 1

I'm not quite clear on what you're asking, but here are my thoughts on this:

You've got .packages in the wrong place. Instead of this:

$.each(msg.packages, function(i, object)    {
    $.each(object, function(index, value) {
        ...

You should have written this:

$.each(msg, function(i, object)    {
    $.each(object.packages, function(index, value) {
        ...

Better yet, you could just get rid of packages altogether. It's an unnecessary level in the JSON structure.

Also, I don't think jQuery knows that the response is JSON. For this to work, you need either dataType: 'json' in the list of arguments to $.ajax , or something on the server to set the MIME type appropriately.

I'm also concerned about $("#package-form").html(msg); , because msg is not an HTML string.

Answer 2

You should try something like this ( Example )

msg = $.parseJSON(msg); // parse JS to object
$.each(msg, function(i, object)    {
    $.each(object.packages, function(index, value) {
        console.log(value);
    });
});

Instead of $.each(msg.packages, function(i, object){...}) because msg is an array of objects and in your given example there are three objects right now and each object has a packages item (nested object) which contains id and name .

Update : You can also use, just one loop ( Example )

msg = $.parseJSON(msg); // parse JS to object
$.each(msg, function(i, object)    {
    console.log(object.packages.id);
    console.log(object.packages.name);
});

Answer 3

Sorry guys, I threw out my back and couldn't get to my code from home.

Anyways I tried both solutions you provided, and I have been looking at this for a while but neither worked. I have this updated to:

$("#brand").click(function ()   {
 var brand = $(this).attr('rel');
$("#order-form").empty();
var contact_id = $("#contact_id").val();
var dataString =  "contact_id=" + contact_id +"&brand=" + brand + "";
//alert("test");
$.ajax({
    type: "POST",
    url: "/crm/alliance_form.php",
    data: dataString,
    //dataType: "json",
    success: function(msg)
        {
            //$("#package-form").html(msg);
            $.each(msg, function(i, object) {
                if(msg.packages)    {
                    $("#package-form").append("<select>");
                    $.each(object.packages, function(index, value) {
                            $("#package-form").append('<option value="'+value+'">'+index+'</option>');
                    });
                    $("#package-form").append('</select>');
                }
            });
        },
    error: function(error)
        {
            $(".error").html(error);
        }
}); 

});

This just returns nothing not even a blank select box. The $("#package-form").html(msg); is just so I can see the output how the php script is sending it back. The if statement is just to run a verification to see if the array has a nested array with packages in it. I need the return function to do a certain action if it does. Very Important!

As for the dataType: 'json', line in the ajax, it doesn't give me a return value if I have that placed in it. But when I remove it, it will display the array.

Nothing has been changed in the PHP file besides moving the query like suggested.

Answer 4

Ok guys. I got the answer! I have it like this:

$("#brand").click(function ()   {
$("#order-form").empty();
$("#package-form").empty();
var msg = '[{"packages":{"1":"Land Line"}},{"packages":{"2":"Cellular w\/Alarm.com"}},{"packages":{"3":"Home Automation"}}]';
var newData =  JSON.parse(msg);
var newSelect = "<select>";
$.each(newData, function(i, ob) {
    $.each(ob.packages, function(index, value) {
        newSelect += '<option value="'+index+'">'+value+'</option>';    
    });
}); 
newSelect += "</select>";
$("#package-form").append(""+newSelect+"");

});

Here is the fiddle: http://jsfiddle.net/M78vE/