JSON array objects not being read correctly from jQuery

Question

I'm a bit stuck, but this has to be user error; the following works, in a sense. It's adding new options to the select but there's a new option for every character in the JSON response, e.g.

Select form

{

[

"

N

a

m

e

"

:

and so on.

Firebug Lite logs the JSON response as:

{"d":"[{\"Name\":\"Monday\"},{\"Name\":\"Tuesday\"},{\"Name\":\"Wednesday\"}]"}

Here is the page source:

    <script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            url: '/MyWebService/MyWebService.asmx/GetDays',
            dataType: 'json',
            data: '{"_category":"Administration"}',
            success: function (response) {
                // Clear the list and add an instructional item...
                $("#FormsSelect").get(0).options.length = 0;
                $("#FormsSelect").get(0).options[0] = new Option("Select form", "-1");
                // Add each element returned from the server...
                $.each(response.d, function (index, category) {
                    $('#FormsSelect').append(
                    $('<option></option>').val(index).html(category)
                    );
                });
            },
            error: function (request, error) {
                alert("An error occurred: " + request.status + "\n" + request.responseText);
            }
        });
    });
</script>

Thoughts on why this is occurring?

Thanks, Aaron.

Peter Olson · Accepted Answer · 2012-03-19 02:22:33Z

3

Notice how the response

"[{\"Name\":\"Monday\"},{\"Name\":\"Tuesday\"},{\"Name\":\"Wednesday\"}]"

is a string. If you loop through a string, you get it character by character.

If you want to parse the string as an array, you should do something like this, using the jQuery parseJSON method:

var arr = $.parseJSON(response.d);
$.each(arr, function(index, category) { 
 // ...

Also note that you probably want to do

.html(category.Name);

instead of

.html(category);

answered Mar 19, 2012 at 2:22

Peter Olson

144k49 gold badges209 silver badges249 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aaron Over a year ago

Thanks Peter, that's done the trick. If I had enough rep I'd mark this as the answer.

Peter Olson Over a year ago

@Aaron Just press the green checkmark next to the answer if you don't have enough rep to upvote ;)

xdazz · Accepted Answer · 2012-03-19 02:22:01Z

0

It should be:

$('<option></option>').val(index).html(category.Name)

answered Mar 19, 2012 at 2:22

xdazz

161k38 gold badges255 silver badges278 bronze badges

Collectives™ on Stack Overflow

JSON array objects not being read correctly from jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related