0

I'm trying to display multiple checklists from individual cards in Trello. I can get access to the checklist as multiple, nested objects but I don't know how to traverse deeper to pull out the actual text and make it list items. 

 Trello.get("cards/" + cardID + "/checklists", function(checklists) {
   console.log(checklists);
 });

the console log

data: http://jsbin.com/OzEdUkU/2/edit

How do I traverse all the way down to the name of the checkItem array objects?

m59
  • 43,214
  • 14
  • 119
  • 136
EmptyPockets
  • 727
  • 1
  • 7
  • 23
  • If my answer doesn't work, could you include a sample response as a javascript object instead of just the log output? – m59 Jan 19 '14 at 01:46
  • How do I include a sample response as a javascript object? I'm new to this. I get this error when I try your answer: [Error] TypeError: 'undefined' is not an object (evaluating 'a.length') each (jquery-1.7.1.min.js, line 2) (anonymous function) (trello.js, line 44) n (jquery-1.7.1.min.js, line 2) fireWith (jquery-1.7.1.min.js, line 2) w (jquery-1.7.1.min.js, line 4) d (jquery-1.7.1.min.js, line 4) – EmptyPockets Jan 19 '14 at 01:59
  • write it out: http://jsbin.com/OzEdUkU/1/edit – m59 Jan 19 '14 at 02:02
  • Actually, try this. `console.log(JSON.stringify(checklists))` I need the string that it prints in the console log...put it in that jsbin, click share, save changes, and comment the link for me. – m59 Jan 19 '14 at 02:05
  • http://jsbin.com/OzEdUkU/2/edit?html,js,output thank you – EmptyPockets Jan 19 '14 at 02:11
  • I updated my answer with details and a demo showing that it now works. Also note the process that we got your log content into a javascript variable in my demo. – m59 Jan 19 '14 at 02:33

1 Answers1

1

This takes care of everything in your data set. Live demo here (click).

$.each(checkList, function(i, obj) {
  console.log(obj);
  $.each(obj.checkItems, function(j, checkItem) {
    console.log(checkItem);
  });
});

checkList is an array (set) of objects. In your sample data, there are two objects nested in checkList, so the first $.each is for each object.

Each object has some properties with string values and the property checkList itself is an array, so the second $.each is looping through that object's checkItems array. checkItems only contains properties with string values, so there is no additional nesting.

Also note that $.each is just a jQuery shorthand function for traditional for loops and could be replaced with a normal for loop or the newer built-in js function forEach.

m59
  • 43,214
  • 14
  • 119
  • 136