PHP / JQUERY - display each sub array of json

Question

I have post the my script below, current script will output like this.

["Error1","Error2","Error3"]

["Good1","Good2","Good3"]

I want output each Error in separate paragraph and each Good in another paragraph

PHP Script

        $Error[] = "Error1";
        $Error[] = "Error2";
        $Error[] = "Error3";

        $Good[] = "Good1";
        $Good[] = "Good2";
        $Good[] = "Good3";

        $Data["Error"] = json_encode($Error);
        $Data["Good"] = json_encode($Good);

        die(json_encode($Data));

Jquery Script

    function _Request()
    {
        $("form").submit(function(e)
        {
            e.preventDefault();

            $.ajax(
            {
                url: $(this).attr("action"),
                type: "POST",
                data: $(this).serializeArray(),
                dataType: 'json',
                success: function(Result)
                {
                    var Data = "";

                    $.each(Result, function(Index, Item)
                    {
                        Data += "<p>" + Item + "</p>";
                    });

                    $("#Result").html(Data);
                }
            });
        });
    }

Answer 1

Don't JSON encode the arrays individually, just encode your complete data structure at the end, otherwise when decoding on client-side, your nested JSON will just be treated like a string.

So do this:

    $Error[] = "Error1";
    $Error[] = "Error2";
    $Error[] = "Error3";

    $Good[] = "Good1";
    $Good[] = "Good2";
    $Good[] = "Good3";

    $Data["Error"] = $Error;
    $Data["Good"] = $Good;

    echo json_encode($Data);

You would then work with the data on client side like this:

        $.ajax(
        {
            url: $(this).attr("action"),
            type: "POST",
            data: $(this).serializeArray(),
            dataType: 'json',
            success: function(data)
            {
                var $result = $('#Result');
                $result.empty();

                $.each(data.Error, function(idx, item) {
                    $result.append('<p class="error">' + item + '</p>');
                });

                $.each(data.Good, function(idx, item) {
                    $result.append('<p class="good">' + item + '</p>');
                });
            }
        });

Note I added class names to paragraphs in case you wanting to control CSS display of them via convenient classes.

Answer 2

You mean like this?

                var Data = "";

                // error
                $.each(Result.Error, function(Index, Item)
                {
                    Data += "<p>" + Item + "</p>";
                });

                //Good
                $.each(Result.Good, function(Index, Item)
                {
                    Data += "<p>" + Item + "</p>";
                });

                $("#Result").html(Data);

Answer 3

You need to get to the second level

Assuming your data is:

Result = {Error:["Error1","Error2","Error3"],
Good:["Good1","Good2","Good3"]}

Then...

$.each(Result, function(Index, Item)
  {
   $.each(Item, function(i,d){    
      Data += "<p>" + d + "</p>";
   })
});

here's a fiddle: http://jsfiddle.net/charrisgw/kjqdhfec/