JQuery AJAX JSON Call with Embedded JSON

Question

I am trying to figure out how to make an AJAX call with JQuery to multiple JSON objects in a URL where each JSON Object has embedded JSON. Here are a few of the JSON Objects from the URL (with some generic info):

{
  "count": 5401,
  "take": "2",
  "page": 1,
  "data": [{
    "index": 0,
    "id": 100,
    "name": "Product Name 1",
    "brand": "Brand 1",
    "images": "imgurl1.jpg"
  }, {
    "index": 1,
    "id": 101,
    "name": "Product Name 2",
    "brand": "Brand 2",
    "images": "imgurl2.jpg"
  }, {
    "index": 2,
    "id": 102,
    "name": "Product Name 3",
    "brand": "Brand 3",
    "images": "imgurl3.jpg"
  }, {
    "index": 3,
    "id": 103,
    "name": "Product Name 2",
    "brand": "Brand 4",
    "images": "imgurl4.jpg"
  }]
}

So, do I need to split the JSON objects up at the comma that separates them, add them all to an array, and then make the AJAX call? Or can I make the call with the embedded JSON without the extra steps?

Here is the JQuery I have but it is not working:

$(document).ready(function(){
    $.ajax({
      type: 'GET',
      data: { format: 'json' },
      dataType: 'jsonp',
      url: 'JSON url',
      success: function(result) {
        $.each(result.data, function(key, value){
          $.each(value.data, function(k, v){
            $('#stage').html('<p>Product ID: ' + result.id + '</p>');
            $('#stage').append('<p>' + result.name + '</p>');
            $('#stage').append('<p>' + result.brand + '</p>');
            $('#stage').append('<img src="' + result.images + '" alt="' + result.brand + ' ' + result.name + '" /><br/>');
          });
        });
      }
    });
  });

Rory McCrossan · Answer 1 · 2017-07-11T15:16:27.903

Firstly, just FYI on your terminology - nothing about this is JSON. You have an object which contains an array of objects.

Regarding your issue, the problem is because you've got two loops, when you only need one. Remove the $.each(value.data, function(k, v). You also need to use append() instead of html() in the first instance, otherwise you overwrite the previously appended elements. With these amendments your code should work fine - assuming the AJAX request is successful.

success: function(result) {
  $.each(result.data, function(i, obj) {
      $('#stage').append('<p>Product ID: ' + obj.id + '</p>');
      $('#stage').append('<p>' + obj.name + '</p>');
      $('#stage').append('<p>' + obj.brand + '</p>');
      $('#stage').append('<img src="' + obj.images + '" alt="' + obj.brand + ' ' + obj.name + '" /><br/>');
    });
  });
}

var result = {
  "count": 5401,
  "take": "2",
  "page": 1,
  "data": [{
    "index": 0,
    "id": 100,
    "name": "Product Name 1",
    "brand": "Brand 1",
    "images": "imgurl1.jpg"
  }, {
    "index": 1,
    "id": 101,
    "name": "Product Name 2",
    "brand": "Brand 2",
    "images": "imgurl2.jpg"
  }, {
    "index": 2,
    "id": 102,
    "name": "Product Name 3",
    "brand": "Brand 3",
    "images": "imgurl3.jpg"
  }, {
    "index": 3,
    "id": 103,
    "name": "Product Name 2",
    "brand": "Brand 4",
    "images": "imgurl4.jpg"
  }]
}

$.each(result.data, function(i, obj) {
  $('#stage').append('<p>Product ID: ' + obj.id + '</p>');
  $('#stage').append('<p>' + obj.name + '</p>');
  $('#stage').append('<p>' + obj.brand + '</p>');
  $('#stage').append('<img src="' + obj.images + '" alt="' + obj.brand + ' ' + obj.name + '" /><br/>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stage"></div>

Thank you for your help! I made the changes you suggested and the Chrome console is returning an error of "Uncaught SyntaxError: Unexpected token :". I saw in your code snippet that you had assigned the objects to a variable - right now they are being returned by a URL. Do I need to parse the objects from the URL to a variable before this will work? — user6620970, Jul 11 '17 at 15:41
Nope, the sample was basically a simplified version of your code with the AJAX request taken out. However that errors means there's a problem with the format of the response from the server. Double check in the console what the response is and ensure it's correctly formatted JSONP. Note that JSON and JSONP are not interchangeable, so if you're trying to get around CORS errors, then there's a bigger problem to solve first — Rory McCrossan, Jul 11 '17 at 15:43
It is true that I have to use JSONP because the server will not allow using JSON. Is there something aside from designating JSONP as the data type that I need to do? — user6620970, Jul 11 '17 at 16:18
Yes, you probably need to return CORS headers in the response from your server side code, see [this question](https://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource) for more details. If you don't have access to the server, then you will not be able to make a request to it from client side JS code. — Rory McCrossan, Jul 11 '17 at 16:52

JQuery AJAX JSON Call with Embedded JSON

1 Answers1