1

Codepen with working example.

I'm still new to javascript, so I could be going about this the wrong way. If you can suggest a better way for me to do this, I would greatly appreciate it; always love to learn a new, better way!

Here goes:

I use the array iD to generate the URL's of the 10 JSON tables I'm pulling data from.

var set = $('.set');

var iD = [
  "od6",
  "o9mpc0w",
  "ol96q2e",
  "olqcdyz",
  "ojfsm09",
  "oijguh3",
  "obmuic4",
  "oup920g",
  "ohwlz67",
  "omk1ruv"
];

function photoSet(){

  var idLength = iD.length;

  for (var i = 0; i < idLength; i++) {

Once I iterate through the array, I use an ajax call to query each one.

    $.ajax({
      url:'https://spreadsheets.google.com/feeds/cells/1TBjwQNVRMNzuyZRxr9yX-fUKWw6gpUX69o9PQc79COs/' + iD[i] + '/public/values?alt=json',
      async: true,
      dataType: 'jsonp',
      success: photos});

After they're queried, I retrieve the data from the cells of each JSON table and use it as an image src to insert into the document.

    function photos(results){
      for(var a = 1; a <= 1; a++) {
        var imageEntry = results.feed.entry[a].content.$t;
        set.append('<li class="image"><img src="'+ imageEntry +'"/></li>');
        console.log(imageEntry);
      }
    } 
  }
}

photoSet();

Here's the issue: I need to have the resulting images in the same order as the array iD

Every time the page loads, the images are displayed in a different order. I know it's doing this because the queries are coming in at slightly different times, thus resulting in a different order every page load.

Does it have something to do with storing the ajax calls in variables, then grabbing them one at a time? Do I need another callback? As the nesting gets more complex, I get more confused :/

I've been searching high and low for how to do this, but just can't seem to figure it out. It seems with each new discovery I make, a new problem arises. Such is the nature of code, I suppose. Thank you all for your help :)

Also, I saw this question, but am having trouble figuring out how to apply its answer to my code. If I do, I'll remove this question promptly.

Community
  • 1
  • 1
Joseph Lambert
  • 11
  • 2
  • Would you be happy with getting the img src'es back in order all at the same time? As opposed to showing them as them coming in – Brian Schermerhorn Jul 14 '16 at 05:42
  • I would! As a side note, when I change async to false and dataType to json, they come in at the correct order. Is that reliable? I don't actually understand why that works. I amended the codepen to reflect that change. – Joseph Lambert Jul 14 '16 at 06:05

2 Answers2

0

You can add id to the building of the li-

set.append('<li class="image" id="sequnce"><img src="'+ imageEntry +'"/></li>');

e.g

<li class="image" id="1"><img src="d.gif"/></li>
<li class="image" id="4"><img src="d.gif"/></li>
<li class="image" id="3"><img src="d.gif"/></li>

And after you finish to retrieve all the data from the Json you can sort the li. You can use this link How to sort LI's based on their ID

Community
  • 1
  • 1
The scion
  • 1,001
  • 9
  • 19
0

In our iD for loop we change the ajax to something like this...

var allResults = {}, successCount = 0;
$.ajax({
  url: 'https://spreadsheets.google.com/feeds/cells/1TBjwQNVRMNzuyZRxr9yX-fUKWw6gpUX69o9PQc79COs/' + iD[i] + '/public/values?alt=json',
  async: true,
  dataType: 'jsonp',
  success: function( results ) {
    successCount++;
    allResults[ iD[i] ] = photos( results );
    if ( successCount == iD.length ) {
      //All data received...
      for (var i2 = 0; i2 < idLength; i2++) {
        set.append( allResults[ iD[i2] ] )
      }

    }
  }
});

Now instead of calling photos directly we call a anonymous (unnamed) function which keeps a track of successful ajax request count and stores the images HTML in new object allResults with key matching iD array. When success count is equal iD.length we know all requests have been made and al HTML is saved in allResults object. We then run a for loop like we did for ajax requests and populate data in sequence of iD array.

The photos function, doesn't immediately append html into set now but returns all data, it should look like this...

function photos(results){
  returnString = '';
  for(var a = 1; a <= 1; a++) {
    var imageEntry = results.feed.entry[a].content.$t;
    returnString += '<li class="image"><img src="'+ imageEntry +'"/></li>';
    console.log(imageEntry);
  }
  return returnString;
}

Hope that helps...

shramee
  • 5,030
  • 1
  • 22
  • 46