title: Polymer Databinding assistance
body: <p>I have a polymer page that needs to read some json from a web service. It's dealing with 3 different tables:</p>
  
  <pre><code>projects will come from a url like api/users/1/projects/1: 
  
  fields: 
      project_id, project_name, project_description, project_deadline,
      project_total_hours
  
  Projects data: 
      1,'ABC Corp Web Site','Site Maintenance','2015-12-31',9
  
  
  tasks will come from a url like api/users/1/projects/1/tasks
  
  fields: 
      task_id, task_name, project_id(fk)
  
  Tasks data: 
      1,'Update site with new style',1
      2,'Fix tables on contact,about us and bio pages',1
  
  
  task_details will come from a url like like api/users/1/projects/1/tasks/1
  
  fields:
      task_det_id, task_det_desc, task_id(fk)
  
  Task_details data:
      1,'applied style to homepage',1
      2, 'applied style to privacy page',1
      2, 'applied style to contact page',1
      3, 'fixed main table on contact page',2
  </code></pre>
  
  <p>What I need displayed is this:</p>
  
  <pre><code>Project name
  (other project details here)
      Update Site with New Style
          applied style to homepage
          applied style to privacy page
          applied style to contact page
      Fix tables on contact,about us and bio pages
          fixed main table on contact page
  </code></pre>
  
  <p>I have a url that returns the data for a single project and I output that to my page in a dom-repeat.  Then within that I have another one that grabs the tasks that are linked to that project and displays them and so far so good:  Below is the code that I used to do that:</p>
  
  <pre><code>&lt;paper-material elevation="5" class="card"&gt;
  &lt;center&gt;
  &lt;template is="dom-bind" id="project"&gt;
  &lt;iron-ajax url="&lt;?echo $projecturl?&gt;" last-response="{{projectdata}}" auto&gt;&lt;/iron-ajax&gt;
      &lt;template is="dom-repeat" items="[[projectdata]]" as="project"&gt;
          &lt;div class="primary"&gt;[[project.project_name]]&lt;/div&gt;
          &lt;div class="primary"&gt;[[project.project_description]]&lt;/div&gt;
          &lt;div class="secondary"&gt;Project Deadline:&lt;/div&gt;
          &lt;div class="secondary dim"&gt;{{_getDeadline(project.project_deadline, project.project_deadline_time)}}&lt;/div&gt;
          &lt;div class="secondary"&gt;{{_getTotalHours(project.project_total_hours)}}&lt;/div&gt;
          &lt;paper-button id="my-button" raised onclick=""&gt;Create Task&lt;/paper-button&gt;
          &lt;hr&gt;
          &lt;iron-ajax url="&lt;?echo $tasksurl?&gt;" last-response="{{taskdata}}" auto&gt;&lt;/iron-ajax&gt;
          &lt;template is="dom-repeat" items="[[taskdata]]" as="taskitem"&gt;
              &lt;div&gt;[[taskitem.task_name]]&lt;/div&gt;
          &lt;/template&gt;
      &lt;/template&gt; 
  &lt;/template&gt;
  &lt;/center&gt;
  </code></pre>
  
  <p></p>
  
  <p>And my script(just concatenates some of the fields with text):</p>
  
  <pre><code>&lt;script&gt;
      var project = document.getElementById('project');
      project._getProject = function (url) {
          return 'project.php?id=' + url
      }
      project._getTaskid = function (tid) {
          return 'task.php?id='  + tid;
      }
      project._getTaskurl = function (tid) {
          return '&lt;?echo $tasksurl?&gt;' + '/' + tid;
      }
      project._getDeadline = function (deadline, deadlinetime) {
          var timeString = deadlinetime;
          var H = +timeString.substr(0, 2);
          var h = H % 12 || 12;
          var ampm = H &lt; 12 ? "AM" : "PM";
          timeString = h + timeString.substr(2, 3) + ampm;
          var d = deadline.slice(0, 10).split('-');   
          formatteddate=d[1] +'/'+ d[2] +'/'+ d[0]; // 10/30/2010
          return  formatteddate + ' at ' + timeString;
      }
      project._getTotalHours = function (totalhours) {
          return  'Total Hours to Date: '  + totalhours;
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Which is displaying:</p>
  
  <pre><code>Project name
  (other project details here)
      Update Site with New Style
      Fix tables on contact,about us and bio pages
  </code></pre>
  
  <p>so far so good...            </p>
  
  <p>Now my issue comes in when dealing with the task details section I currently have the following code with the extra details section added:</p>
  
  <pre><code>&lt;template is="dom-repeat" items="[[projectdata]]" as="project"&gt;
      &lt;div class="primary"&gt;[[project.project_name]]&lt;/div&gt;
      &lt;div class="primary"&gt;[[project.project_description]]&lt;/div&gt;
      &lt;div class="secondary"&gt;Project Deadline:&lt;/div&gt;
      &lt;div class="secondary dim"&gt;{{_getDeadline(project.project_deadline, project.project_deadline_time)}}&lt;/div&gt;
      &lt;div class="secondary"&gt;{{_getTotalHours(project.project_total_hours)}}&lt;/div&gt;
      &lt;paper-button id="my-button" raised onclick=""&gt;Create Task&lt;/paper-button&gt;
      &lt;hr&gt;
      &lt;iron-ajax url="&lt;?echo $tasksurl?&gt;" last-response="{{taskdata}}" auto&gt;&lt;/iron-ajax&gt;
      &lt;template is="dom-repeat" items="[[taskdata]]" as="taskitem"&gt;
      &lt;div&gt;[[taskitem.task_name]]&lt;/div&gt;
  
      &lt;iron-ajax url="{{_getTaskurl(taskitem.task_id)}}" last-response="{{taskdetaildata}}" auto&gt;&lt;/iron-ajax&gt;
      &lt;template is="dom-repeat" items="[[taskdetaildata]]" as="taskdetailitem"&gt;
          &lt;div&gt;[[taskdetailitem.task_det_desc]]&lt;/div&gt;
  
      &lt;/template&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Notice that I need to get the task_id from the current linked task to use for the url to get the details of that task: {{_getTaskurl(taskitem.task_id)}} </p>
  
  <p>The results I'm actually getting keep changing every time I refresh:
   sometimes I get:   </p>
  
  <pre><code>Project name
  (other project details here)
      Update Site with New Style
          fixed main table on contact page
      Fix tables on contact,about us and bio pages
          fixed main table on contact page
  </code></pre>
  
  <p>other times I get</p>
  
  <pre><code>Project name
  (other project details here)
      Update Site with New Style
          applied style to homepage
          applied style to privacy page
          applied style to contact page
      Fix tables on contact,about us and bio pages
          applied style to homepage
          applied style to privacy page
          applied style to contact page
  </code></pre>
  
  <p>and other times I just get:</p>
  
  <pre><code>Project name
  (other project details here)
      Update Site with New Style
      Fix tables on contact,about us and bio pages
  </code></pre>
  
  <p>Does anyone know how I can do this and get the desired results? I've been playing with it for a day or so and can't get it to work and am just about to scrap it and just use php and PDO to loop through and display the data I need.  I'm sure since I'm a polymer noob it's something I'm overlooking or not understanding right. I felt like it should work, I mean after all the tasks are being displayed fine under the project details, so I figured if I did the task details the same way it should work but nope.</p>