AngularJS Array Building und Filtering

Question

Also in AngularJS habe ich ein ganzes Frontend von einem unserer Lieferanten bekommen, unter der Bedingung, dass sie es nicht unterstützen müssten. Nicht der beste Weg, Geschäfte zu machen, aber hey, es war kostenlos und macht SORT von dem, was ich brauche. Das wird gesagt. In dieser App wird eine ganze Reihe von Daten über einen Websocket angezeigt. Die ganze Komplexität der Fabriken und was - abgesehen davon - läuft darauf hinaus. Ein Objekt von Arrays, das dann im HTML durch einige ng-Wiederholungen referenziert wird.

Dies ist das Objekt:

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

Es durch Tabellen wie so angezeigt ist:

<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> 

Was ich ist es, verschiedene Elemente ziehen, obwohl tun müssen, die miteinander in Beziehung stehen, weil die Arrays wirklich sind ähnlich aufgebaut wie ein Datenbankschema, in dem rep.user_id mit einem anderen array.item wie Primärschlüssel korrelieren kann. Als formuliertes Beispiel, das jede rep.user_id nimmt und jede session.user_id für eine Übereinstimmung durchläuft, wenn passed pull session.session_key ... dann stimmt session.session_key in sessionDetails.session_key überein, und wenn dies übereinstimmt, werden alle Elemente in der Sitzung ausgegeben .Details ... etc, etc ... gehen Sie durch jede der Array-und Kirsche pflücken Ihre Daten auf der Grundlage der Primärschlüssel zusammenpassen.

Da alles bereits gebaut wurde, war ich HOPING Ich könnte ein paar Filter oder ng-wenn Strukturierung mit all dies aber ehrlich gesagt, ich bin neu in AngularJS und während ich eine Reihe von Sprachen, das erweist sich als sehr hart.

Jede Hilfe würde geschätzt werden und ich kann zusätzlichen Code veröffentlichen, sollte es benötigt werden.

UPDATE: Hier sind die 2 Dateien, die alle Daten analysieren und normalisieren in die Statustabellen. Ich denke, das Problem der Komplexität ist, dass, weil die Datei "datautil.js" die Daten in den Statustabellen antreibt, ich keine neue Funktion verwenden kann, um eine bestimmte Tabelle zu erstellen und stattdessen Filter oder etwas anderes zu verwenden?

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

Ich habe es im Front-End herausgefunden.

<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

Also, was Sie ist so etwas wollen: (Beispiel)

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 

oder ich Missunderstood? Bitte geben Sie mir die richtigen Informationen (mit realen Variablen und Eigenschaften), die Sie behandeln müssen, und ich werde versuchen, Ihnen einen Hinweis zu geben, wie es geht.