title: Map two json arrays using filters
body: <p>I'm developing a forum using AngularJS and interfacing MySQL with a WS API. My idea is when I user replies I should get the reply and his/her name.</p>
  
  <p><a href="https://i.stack.imgur.com/tyOBc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tyOBc.png" alt="App View"></a></p>
  
  <p>This is my DB MER</p>
  
  <p><a href="https://i.stack.imgur.com/5H8zf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5H8zf.png" alt="MER DB Model"></a></p>
  
  <p>As you can see, </p>
  
  <ul>
  <li><strong>One tema</strong>(topic) can have <strong>many respuesta</strong>(replies).</li>
  <li><strong>One persona</strong>(users) can have <strong>many respuesta</strong>(replies) and also <strong>many tema</strong>(topics).</li>
  </ul>
  
  <p>Now, In forum controller, I'm getting with <code>$http</code> two responses:</p>
  
  <ul>
  <li><code>url2</code> -> get replies of the topic filtering with <strong>id</strong>(from <code>$routeParams</code>) = <strong>id_tema</strong>(on db)</li>
  <li><code>url3</code> -> get users in general, and should be filtered in forum.html, in order to get the name of the user which is repliying the topic.</li>
  </ul>
  
  <p>forum-controller.js</p>
  
  <pre><code>angular.module('rhoAppApp')
    .controller('temaCtrl', function ($routeParams, $scope, $http) {
  
  
      var id = $routeParams.id;
  
      var url = 'http://server/api.php/tema?filter=id,eq,' + id;
  
                   $http.get(url).then(function (response) {
  
                      $scope.titulo = response.data.tema.records[0][1];
                      $scope.texto = response.data.tema.records[0][2];
  
                  })
  
      var url2 = 'http://server/api.php/respuesta?filter=id_tema,eq,' + id;
  
                   $http.get(url2).then(function (response) {
  
                      $scope.respuestas = response.data.respuesta.records;
  
                  })
  
      var url3 = 'http://server/api.php/persona'
  
                   $http.get(url3).then(function (response) {
  
                      $scope.personas = response.data.persona.records;
  
                  })    
  
    });
  </code></pre>
  
  <p>Now, I'm triying to map <code>url2</code> with <code>url3</code> using filters.</p>
  
  <p><code>persona[0]</code> (user id) should be equal to <code>respuesta[3]</code>, in order two get user name <code>persona[3]</code>.</p>
  
  <p>So I followed the next question <a href="https://stackoverflow.com/questions/37905191/map-two-collections-inner-join-using-angularjs-html">Map two Collections (Inner Join)</a> and I did something similar in the HTML:</p>
  
  <pre><code>&lt;table class="table"&gt;
              &lt;tbody&gt; 
                  &lt;tr&gt;&lt;th&gt;{{titulo}}&lt;/a&gt;&lt;/th&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;{{texto}}&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr ng-repeat="respuesta in respuestas | orderBy : 'respuesta[0]'" id="{{respuesta[0]}} " &gt;&lt;td&gt;
                  Por  &lt;span ng-repeat="persona in personas | filter:{persona[0]:respuesta[3]}"&gt; {{persona[3]}} &lt;/span&gt;, el {{respuesta[2] | badDateToISO | date:'shortDate'}} a las {{respuesta[2] | badDateToISO | date: "HH:mm"}} Hrs.
                  &lt;br&gt;
                  &lt;br&gt;
                  {{respuesta[1]}}
                  &lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;
                  &lt;form &gt;
                  &lt;textarea class="form-control" rows="5" required&gt;&lt;/textarea&gt;
                  &lt;br&gt;
                  &lt;button type="button" class="width-35 center-block btn btn-sm btn-primary" ng-click="urlbtn()"&gt; 
                  Responder
                  &lt;/button&gt;
                  &lt;/form&gt;
                  &lt;/td&gt;&lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p>My problem is with this expression <code>filter:{persona[0]:respuesta[3]}</code>, it seems to be that AngularJS doesn't accept 2 arrays expression at the same filter. Also, I have used <code>'persona[0]:respuesta[3]'</code>, but didn't work. </p>
  
  <p>I got this error with this <code>filter:{persona[0]:respuesta[3]}</code></p>
  
  <pre><code>angular.js:14110 Error: [$parse:syntax] Syntax Error: Token '[' is unexpected, expecting [}] at column 27 of the expression [personas | filter:{persona[0]:respuesta[3]}] starting at [[0]:respuesta[3]}].
  </code></pre>
  
  <p>the other, I didn't get errors, but also I didn't get the user name.</p>