How do I build a javascript array from an ajax call that returns a json array?

Question

I am making an ajax call that returns some json data. I need to take this data, loop through it and build a new javascript array.

This is what the returned json looks like:

{
    query: [ ],
    products:  [
     {
    title: "title 1",
    price: "6.00",
    magazine: "magazine name 1",
    image: "/p/c/pc_90_cover.jpg",
    type: "Magazine",
    market: "Technology",
    zinio: "http:www.zinio.com",
    newsstand: "http://www.link1.php"
    },

     {
    title: "title 2",
    price: "6.00",
    magazine: "magazine name 2",
    image: "/p/c/pc_90_cover.jpg",
    type: "Magazine",
    market: "Technology",
    zinio: "http:www.zinio.com",
    newsstand: "http://www.link2.php"
    },

     {
    title: "title 3",
    price: "6.00",
    magazine: "magazine name 3",
    image: "/p/c/pc_90_cover.jpg",
    type: "Magazine",
    market: "Technology",
    zinio: "http:www.zinio.com",
    newsstand: "http://www.link3.php"
    }
    ]

}

How do I loop through this data in javascript? This is what I have so far but it is very wrong! - apologies my javascript is not my strongest skill!

                    var allProducts = $.get("http://localhost:8888/imagine-publishing/web/app_dev.php/api/v1/search/search.json?query=pho", function(data) {


                    var arrProducts = [
                        for (var product in allProducts) {

                            title  = product.title,
                            url = product.url, 
                            label = product.title, 
                            magazine = product.magazine,
                            image = product.imageThumb,
                            newsstand = product.newsstand,
                            googleplay = product.googleplay,
                            kindle = product.kindle, 
                            barnesnoble = product.barnesnoble,
                            zinio = product.zinio, 
                            kobo = product.kobo, 
                            waterstones = product.waterstones, 
                            type = product.type, 
                            brandurl = product.brandurl 

                            },

                     ];

                });

                console.log(arrProducts);

Quentin · Accepted Answer · 2012-10-26 11:55:35Z

4

Assuming the JSON is served with the correct Content-Type (application/json), jQuery will automatically parse the JSON and populate the first argument of the callback function with the result.

var arrProducts = data.products;

answered Oct 26, 2012 at 11:55

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

richelliot Over a year ago

When I console.log the arrProducts it returns an array of objects. The data needs to be in the exact format as the example above. Is it possible to do this using your method?

Reflective · Accepted Answer · 2012-10-26 11:55:07Z

1

http://api.jquery.com/jQuery.parseJSON/

jQuery.parseJSON("json string")

answered Oct 26, 2012 at 11:55

Reflective

3,9371 gold badge17 silver badges25 bronze badges

Comments

Nigel · Accepted Answer · 2012-10-26 11:58:52Z

0

Using jQuery's getJSON

http://api.jquery.com/jQuery.getJSON/

  $.getJSON(url, function(data){
   // Your code goes here
  });

answered Oct 26, 2012 at 11:58

Nigel

1,33111 silver badges7 bronze badges

1 Comment

Nigel Over a year ago

Beaten by minutes, I need to type quicker

Collectives™ on Stack Overflow

How do I build a javascript array from an ajax call that returns a json array?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related