Creating and referencing an array of objects in Javascript

Question

I'm trying to create a generic To Do list that has tasks and subtasks. Any given To Do list will have one or more tasks, and each task will have one or more subtasks. For each subtask, I'm displaying card that presents the task and subtask, as well as some other relevant information about the user. Thus, the number of cards presented for any given list equals the number of subtasks, and can be categorized by task.

The tricky part for me is that I need to be able to reference these cards (as I will be making an API call to get task and subtask data -- both of which are arrays, incidentally -- from different types of lists), and I'm not sure the best way to reference something that effectively has 2 indexes (task and subtask).

My thinking has been focused on creating a toDoList array of task:subtask objects [{task 1, subtask 1}, {task 1, subtask 2}, {task 2, subtask 1), etc}] -- but when I start doing that I'm getting stuck in two places:

1. in programmatically creating the key-value pairs (I'm using a nest loop to iterate through tasks and subtasks)

2. how to reference them later, as I need to associate these task:subtask pairs with specific DOM objects to do perform functions like hiding them, for example.

I have some code but it feels really far off the mark so not even including here. Basically, I feel like there's a simple solution of less than a dozen lines of code that a better programmer than I will see immediately, and I'd appreciate the help. Many thanks!

Answer 1

Not sure how much control you have over writing the data structure, but maybe something like this would work.

The idea here is that you give all subtasks an ID, then keep track of a task's subtasks through an array of subtask IDs.

var tasks = [
  {name: 'clean apartment', subtasks: [1, 2, 3]},
  {name: 'do the dishes', subtasks: [6]},
  {name: 'eat lunch', subtasks: [4, 5]}
];

var subtasks = [
  {name: 'vaccuum', id: 1},
  {name: 'dust', id: 2},
  {name: 'wipe down', id: 3},
  {name: 'make sandwich', id: 4},
  {name: 'drink a beer', id: 5},
  {name: 'soak pans', id: 6}, 
];


var i, j, l = tasks.length;
for(i; i < l; i++) {
  var task = tasks[i],
      ll = task.subtasks.length;
  for(j=0; j < ll; j++) {
    // Now you know the parent task and all its subtasks
  }
}

Additionally, if you didn't mind using the help of a library like underscore, you could do it the opposite way. This way you give all tasks an ID, then give subtasks a task field, which maps them to a task. Using underscore's findWhere you can easily lookup the task when iterating over every subtask.

var tasks = [
  {name: 'clean apartment', id: 1},
  {name: 'do the dishes', id: 2},
  {name: 'eat lunch', id: 3}
];

var subtasks = [
  {name: 'vaccuum', task: 1},
  {name: 'dust', task: 1},
  {name: 'wipe down', task: 1},
  {name: 'make sandwich', task: 3},
  {name: 'drink a beer', task: 2},
  {name: 'soak pans', task: 2}, 
];

for(var i = 0; i < subtasks.length; i++) {
  var subtask = subtasks[i],
      task = _.findWhere(tasks, {id: subtask.task})
  // Now you know the subtask and its task
}

From the comments on my post, I also created a fiddle to give an example of creating subtask cards: http://jsfiddle.net/grammar/ynw0eb25/

Answer 2

Could a structure like this be Ok for the job?

[    
    {taskId: '1', 

     subtasks:[{subtaskId:'1', otherAttributes:'...'}, 
               {subtaskId:'2', otherAttributes:'...'},
                ...
              ]
     },
    {taskId: '2', 
     subtasks:[{subtaskId:'1', otherAttributes:'...'}, 
               ...
              ]
    }
    ....
]