AngularJS Array Building and Filtering

Question

Итак, в AngularJS у меня есть полный интерфейс от нашего поставщика при условии, что им не придется его поддерживать. Не лучший способ заниматься бизнесом, но эй он был бесплатным и делает СОРТ того, что мне нужно. Что, как говорится. В этом приложении он отображает целую кучу данных через websocket. Вся сложность фабрик и что-не в стороне от этого сводится к этому. Объект массивов, который затем ссылается в HTML через несколько ng-повторов.

Это объект:

var state = 
{ queues:[], 
    representatives:[], 
    representative_queues:[], 
    customer_clients:[], 
    support_sessions:[], 
    representative_support_sessions:[], 
    support_session_attributes:[], 
    support_session_skills:[] 
}; 

Это отображается через таблицы следующим образом:

<table class="table table-condensed table-striped"> 
    <thead> 
     <tr> 
      <th>Table Id</th> 
      <th>Username</th> 
      <th>User Id</th> 
      <th>Available</th> 
      <th>Skills</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="rep in state.representatives"> 
      <td>{{rep.id}}</td> 
      <td>{{rep.username}}</td> 
      <td>{{rep.user_id}}</td> 
      <td>{{rep.routing_available}}</td> 
      <td>{{rep.skill_code_names}}</td> 
     </tr> 
    </tbody> 
</table> 

Что мне нужно делать, хотя это тянуть различные предметы, которые связаны друг с другом, потому что массивы являются на самом деле построенный так же, как схема базы данных, где rep.user_id может коррелировать с другим массивом. Подобным образом, как первичные ключи. В качестве примерного примера, в котором каждый rep.user_id и цикл через каждый session.user_id для соответствия, если совпадающий pull session.session_key ... затем соответствует session.session_key в sessionDetails.session_key, и если это совпадает с эхом из всех элементов в сеансе .Details ... и т. Д. И т. Д., Хотя каждый из массивов и вишни выбирает ваши данные на основе первичных ключей.

Поскольку все уже построено, я был HOPING. Я мог бы использовать некоторые фильтры или ng-if, структурируя все это, но, откровенно говоря, я новичок в AngularJS, и, хотя я знаю несколько языков, это доказывает, что это очень сложно.

Любая помощь будет оценена, и я могу отправить дополнительный код в случае необходимости.

ОБНОВЛЕНИЕ: Вот 2 файла, которые управляют всеми синтаксическими анализами и нормализацией данных в таблицах состояний. Я думаю, проблема сложности заключается в том, что, поскольку файл datautil.js управляет данными в таблицах состояний, я не могу использовать новую функцию для создания конкретной таблицы и вместо этого использовать фильтры или что-то еще?

dashboard.js

var dataUtil = require('./datautil.js'); 

function endsWith(str, suffix) { 
    return str.indexOf(suffix, str.length - suffix.length) !== -1; 
} 

function startsWith (string, prefix) { 
    return string.slice(0, prefix.length) == prefix; 
} 

/* 
* Public members 
*/ 
module.exports = { 
    init: function(express, app, http, WebSocket, inIo) { 
     socket = new WebSocket(''); 
     var handShaken = false; 
     io = inIo; 

     socket.on('open', function open() { 
      console.log('socket is open...'); 
      socket.send('\ningredi state api\n'); 
     }); 

     socket.on('message', function(data, flags) { 
      //console.log('received message...'); 
      var strData = String.fromCharCode.apply(null, new Uint16Array(data)); 
      console.log('---------------------------'); 
      console.log(strData); 
      console.log('---------------------------'); 

      // we have to handle cases where partial results are sent 
      if (endsWith(strData,'\n')) { 
       if (partialResult.length > 0) { 
        strData = partialResult + strData; 
       } 

       // reset partial data 
       partialResult = ''; 
      } else { 
       // append to partial result 
       partialResult += strData; 
       return; 
      } 

      var result = null; 
      var handler = null; 

      if (!handShaken) { 
       handler = authenticate; 
       handShaken = true; 
      } else { 
       result = JSON.parse(fixBadJson(strData)); 
       handler = handlers[result[0].type]; 
      } 

      handler(result); 
     }); 

     io.on('connection', function(socket){ 
      io.to(socket.id).emit('model update', {'message':'Weclome to the real-time API monitoring app'}); 
      socket.broadcast.emit('model update', {'message':'A user is viewing the real-time API monitoring app'}) 
      updateState(null, true); 
      socket.on('disconnect', function(){ 
       io.emit('model update', {'message':'A user stopped viewing the realtime API monitoring app'}); 
      }); 
     }); 
    } 
}; 

/** 
* Private members 
*/ 
var partialResult = ''; 
var socket = null; 
var io = null; 

var state = 
{ queues:[], 
    representatives:[], 
    representative_queues:[], 
    customer_clients:[], 
    support_sessions:[], 
    representative_support_sessions:[], 
    support_session_attributes:[], 
    support_session_skills:[] 
}; 

var authenticate = function() { 
    console.log('authenticating...'); 
    var msg = { 
     'type' : 'authenticate', 
     'credentials' : { 
     'username' : 'reporting', 
     'password' : '' 
     } 
    }; 
    socket.send(JSON.stringify(msg)+'\n'); 
}; 

var onauthenticated = function(result) { 
    console.log('authenticated...'); 
    subscribe(result); 
}; 

var subscribe = function() { 
    console.log('subscribing...'); 
    var msg = { 
     'type' : 'subscribe', 
     'tables' : 'all' 
    }; 
    socket.send(JSON.stringify(msg)+'\n'); 
}; 

var onsubscribed = function(result) { 
    console.log('subscribed...'); 
    updateState(result, true); 
}; 

var onmodelupdate = function(result) { 
    updateState(result, true); 
}; 

var onmodeltruncate = function() { 
    state = { 
     queues:[], 
     representatives:[], 
     representative_queues:[], 
     customer_clients:[], 
     support_sessions:[], 
     representative_support_sessions:[], 
     support_session_attributes:[], 
     support_session_skills:[] 
    }; 
}; 

var updateState = function(result, sendToClient) { 
    if (result != null && typeof result != 'undefined') { 
    dataUtil.parseResult(result, state, io); 
    } 

    if (sendToClient) { 
    io.emit('state change', state); 
    } 
}; 

var fixBadJson = function(json) { 
    var retVal = '[' + json.trim().split('\n').join(',') + ']'; 
    return retVal; 
}; 

var handlers = { 
    'authenticate_response':onauthenticated, 
    'subscribe_response':onsubscribed, 
    'model_update':onmodelupdate, 
    'model_truncate':onmodeltruncate 
}; 

datautil.js

/* 
* Public members 
*/ 
module.exports = { 
    parseResult: function(result,state,io) { 
     if (typeof result == 'undefined' || result == null) { 
      return; 
     } 
     for (var i=0; i<result.length; i++) { 
      var obj = result[i]; 

      for (var type in obj) {/* type is like insert, update, delete */ 
       if (type == 'type') { 
        continue; 
       } 
       for (var table in obj[type]) { /* table are the table names */ 
        var handlerType = type + '_' + table; 
        handler = updaters[type]; /* runs the corresponding function by associating the updaters obj to 3 functions like updaters[insert]= insertTable() */ 
        handler(obj[type][table],state,io,type,table); 

        io.emit('model update', {'message':'Received... ' + handlerType}); 
       } 
      }  
     } 
    } 
}; 

var insertTable = function(obj,state,io,type,table) { 
    //console.log('inserting ' + table + '...'); 
    var tablePlural = table + 's'; 
    for (var item in obj) { 
     var itemExists = false; 
     for (var i=0; i<state[tablePlural].length; i++) { 
      var tableItem = state[tablePlural][i]; 
      if (tableItem.id == item) { 
       itemExists = true; 
       break; 
      } 
     } 
     if (!itemExists) { 
      var tableObj = {}; 
      for (var field in obj[item]) { 
       tableObj[field] = obj[item][field]; 
      } 
      tableObj.id = item; 
      state[tablePlural].push(tableObj); 
     } 
    } 
}; 

var updateTable = function(obj,state,io,type,table) { 
    console.log('updating ' + table + '...'); 
    var tablePlural = table + 's'; 
    for (var item in obj) { 
     for (var i=0; i<state[tablePlural].length; i++) { 
      var tableItem = state[tablePlural][i]; 
      if (tableItem.id == item) { 
       for (var field in obj[item]) { 
        if (obj[item][field] != null && typeof obj[item][field] != 'undefined') { 
         //state[tablePlural][i][field] = obj[item][field]; 
         tableItem[field] = obj[item][field]; 
        } 
       } 
       break; 
      } 
     } 
    } 

}; 

var deleteTable = function(obj,state,io,type,table) { 
    console.log('deleting ' + table + '...'); 
    var tablePlural = table + 's'; 
    for (var x=0; x<obj.length; x++) { 
     var item = obj[x]; 
     for (var i=0; i<state[tablePlural].length; i++) { 
      var tableItem = state[tablePlural][i]; 
      if (tableItem.id == item) { 
       state[tablePlural].splice(i,1); 
       break; 
      } 
     } 
    } 
}; 

var updaters = { 
    'insert':insertTable, 
    'update':updateTable, 
    'delete':deleteTable 
}; 

Answer 1

Я понял это в интерфейсе.

<div ng-repeat="support_session in state.support_sessions"> 
     <div ng-repeat="client in state.customer_clients"> 
      <div ng-if="client.support_session_id == support_session.id"> 
       <div ng-repeat="rep_session in state.representative_support_sessions"> 
        <div ng-if="rep_session.support_session_id == client.support_session_id"> 
         <div ng-repeat="rep in state.representatives"> 
          <div ng-if="rep.id == rep_session.representative_id" class="row" style="background-color: #f2f2f2;border-bottom: 1px solid black;"> 
           <div class="col-xs-6 col-sm-3" style="width:25%">{{rep.public_display_name}} ({{rep.username}})</div> 
           <div class="col-xs-6 col-sm-3" style="width:25%;background-color: #ffffff">{{client.hostname}}</div> 
           <div class="col-xs-6 col-sm-3" style="width:25%">{{support_session.customer_name}}</div> 
           <div class="col-xs-6 col-sm-3" style="width:25%;background-color: #ffffff">{{client.operating_system}}</div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 2

Так что вы хотите что-то вроде этого: (пример)

if rep.user_id == session.user_id then 
    pull session.session_key 
     if session.session_key == sessionDetails.session_key 
     pull session.Details object with properties 

или я missunderstood? Пожалуйста, предоставьте мне правильную информацию (с реальными переменными и свойствами), которую вам нужно обработать, и я попытаюсь дать вам подсказку о том, как это сделать.