JavaScript MVC Parsing JSON

Question

I am trying to work with a client's API that lets me retrieve a group of orders in json format. I am able to use the code below which will display three alert boxes. The first box shows 200 (am assuming that's the html success code), then I get a blank alert box, then the third box says: [object Object].

In Chrome if I use the F12 key and go to Network Preview I see three sections, the Status which contains a Body section which contains the Orders section. There are 50 orders in the Orders section. Each order has properties such as: order_type: "Pickup", etc. My question is how do I iterate through the actual orders. I don't know the syntax to reach the order, and the properties inside the order.

My end goal is to loop though all 50 orders, assign some of the order properties to JavaScript vars and then pass that into an MVC controller which will insert that order into my database. Basically getting orders from the Clients database via their API and storing them into my local database. I am guessing that I will be using a another ajax call from inside the for first .each loop to post several of the order properties into my database via a call to an MVC controller that will do the database inserts?

Thank you in advance for any help.

$.ajax({
    type: 'GET',
    url: 'https://api.customer.com/2000105850/orders.json?v=1&key=12345',
    success: function (data) {                        
        $.each(data, function (index, element) {
            alert(element);   
        });
    }
});

This is from the Client's API documentation: { "count" : number_of_orders_in_response, "page_number" : page_number_within_paginated_result_set, "page_size" : number_of_orders_per_page, "orders" : [array_of_Order_objects] } — Austin Harris
– Austin Harris, Commented Aug 20, 2013 at 1:01
The order information is returned within a JSON array under the orders key. Each member of the array is a JSON object of type Orders. The Orders type is described in the Types section of this document. — Austin Harris
– Austin Harris, Commented Aug 20, 2013 at 1:02
FROM API DOCS:Key Description status Value will always be equal to the HTTP response code value. Successful requests return with status code 200. Other possible status codes are described throughout this document. error Value may contain a textual description of any errors or warnings that may have occurred while processing the request. body Value will contain the requested information for successfull requests. — Austin Harris
– Austin Harris, Commented Aug 20, 2013 at 1:42

Nick Hagianis · Accepted Answer · 2013-08-20 01:15:54Z

2

Based on the information you've provided. The first 200 alert would be the count (number_of_orders_in_response). What you're doing with $.each is iterating over the objects properties, not the orders. The orders are a property on the data object. So data.orders is the array you want.

Try this:

$.ajax({
  type: 'GET',
  url: 'https://api.customer.com/2000105850/orders.json?v=1&key=12345',
  success: function (data) {                        
    var orders = data.orders;
    var i = orders.length;
    while (i--) {
      alert(orders[i].order_type);
    }

  }
});

Also, it looks like there is pagination involved. So you will need to take that into consideration when writing your script to ensure you capture all the pages available, not just the first.

answered Aug 20, 2013 at 1:15

Nick Hagianis

1,4661 gold badge14 silver badges20 bronze badges

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

7 Comments

Austin Harris Over a year ago

success: function (data) { alert('Success'); var orders = data.orders; var i = orders.length; while (i--) { alert('Orders'); //alert(orders[i].order_number); } }

Austin Harris Over a year ago

the first alert 'Success' displays, but the next alert inside the while loop never appears. I am sure I am getting closer with your help but not able to access individual orders yet. I posted a little more data on the question comments section with data from the API doc file.

Nick Hagianis Over a year ago

do success: function (data) { alert(JSON.parse(data)); } so you can view the actual object you're getting back. Also, it's easier to use the console instead of alert. console.log(JSON.parse(data));

Austin Harris Over a year ago

alert(orders[i].order_type); - i tried this line first inside the while loop and it also displayed nothing even though F12 shows 50 orders in the orders.json section.

Austin Harris Over a year ago

does this error mean anything? it's from Chrome F12: Uncaught SyntaxError: Unexpected token u Index:121 $.ajax.success Index:121 fire jquery-1.8.2.js:974 self.fireWith jquery-1.8.2.js:1082 done jquery-1.8.2.js:7788 callback

|

Robert Levy · Accepted Answer · 2013-08-20 01:15:11Z

1

Change the first parameter of $.each from data to data.orders

answered Aug 20, 2013 at 1:15

Robert Levy

29.1k6 gold badges66 silver badges96 bronze badges

1 Comment

Austin Harris Over a year ago

When I change that line of JS to: $.each(data.orders, function (index, element) { I get the following error msg from Chrome DevTools: Uncaught TypeError: Cannot read property 'length' of undefined

Collectives™ on Stack Overflow

JavaScript MVC Parsing JSON

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related