Home > Software design >  how to add new row for every new login key word in object
how to add new row for every new login key word in object

Time：07-27

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var displayArray = [], tempstateData={readyDuration:0,notReadyDuration:0};

  localArray = [
    {"state":"LOGIN","startTime":"10.25"},
    
    {"state":"READY","startTime":"10.26","endTime":"10.35","duration":"615"},
    
    {"state":"NOT_READY","startTime":"11:26","endTime":"10.35","duration":"874"},
    
    {"state":"READY","startTime":"10.26","endTime":"10.35","duration":"222"},
    
    {"state":"NOT_READY","startTime":"11:26","endTime":"10.35","duration":"111"},
    
    {"state":"READY","startTime":"10.26","endTime":"10.35","duration":"333"},
    
    {"state":"NOT_READY","startTime":"11:26","endTime":"10.35","duration":"888"},
    
    {"state":"READY","startTime":"10.26","endTime":"10.35","duration":"444"},
    
    {"state":"NOT_READY","startTime":"11:26","endTime":"10.35","duration":"999"},
    
    {"state":"LOGOUT","startTime":"13.26"},
    // he logged in again, so we need to add new row
    {"state":"LOGIN","startTime":"08.58"},
    
    {"state":"READY","startTime":"10.26","endTime":"10.35","duration":"12"},
    
    {"state":"NOT_READY","startTime":"11:26","endTime":"10.35","duration":"13"},
    
    {"state":"READY","startTime":"10.26","endTime":"10.35","duration":"14"},
    
    {"state":"NOT_READY","startTime":"11:26","endTime":"10.35","duration":"15"},
    
    {"state":"READY","startTime":"10.26","endTime":"10.35","duration":"16"},
    
    {"state":"NOT_READY","startTime":"11:26","endTime":"10.35","duration":"17"},
    
    {"state":"READY","startTime":"10.26","endTime":"10.35","duration":"18"},
    
    {"state":"NOT_READY","startTime":"11:26","endTime":"10.35","duration":"19"}
    ];
    //alert(JSON.stringify(localArray));
    for(i=0;i<localArray.length;i  ){
    tempOBJ = localArray[i];
    if(tempOBJ.state == "LOGIN")
    {
        tempstateData.loginTime = tempOBJ.startTime;
    }
    if(tempOBJ.state == "READY")
    {
  tempstateData.readyDuration = tempstateData.readyDuration   parseInt(tempOBJ.duration);
    }
    if(tempOBJ.state == "NOT_READY")
    {
        tempstateData.notReadyDuration = tempstateData.notReadyDuration   parseInt(tempOBJ.duration);
    }
    if(tempOBJ.state == "LOGOUT")
    {
        tempstateData.logOutTime = tempOBJ.startTime;
    }
    displayArray.push(tempstateData);
   //alert(JSON.stringify(tempstateData));
    row = "<tr><td>" displayArray[i].loginTime "</td><td>" displayArray[i].readyDuration "</td><td>" displayArray[i].notReadyDuration "</td><td>" displayArray[i].logOutTime "</td></tr>";
    }
    
    $('#dataAdd').append(row);
});
</script>
</head>
<body>
<table border="1">
<thead>
<th>Login Time</th>
<th>Ready Duration</th>
<th>Not_ready Duration</th>
<th>Logout Time</th>
</thead>
<tbody id="dataAdd"></tbody>
<table>

</body>
</html>

Here i have some array of object which contains two LOGINs(may have more than two logins in future) in object. For every login i need to add all READY durations and NOT_READY Durations and have to show it in one row irrespective of STATE:LOGOUT

i did for first login and i am getting any idea how to get new row for new login(Which Dont have STATE:LOGOUT yet)?

Any help would be appreciated.

Thanks in advance.

CodePudding user response：

You can use a "state machine" to accumulate the data and reset it as you go.

Update: Support for case when didn't logout last.

$(document).ready(function() {

  localArray = [{
      "state": "LOGIN",
      "startTime": "10.25"
    },

    {
      "state": "READY",
      "startTime": "10.26",
      "endTime": "10.35",
      "duration": "615"
    },

    {
      "state": "NOT_READY",
      "startTime": "11:26",
      "endTime": "10.35",
      "duration": "874"
    },

    {
      "state": "READY",
      "startTime": "10.26",
      "endTime": "10.35",
      "duration": "222"
    },

    {
      "state": "NOT_READY",
      "startTime": "11:26",
      "endTime": "10.35",
      "duration": "111"
    },

    {
      "state": "READY",
      "startTime": "10.26",
      "endTime": "10.35",
      "duration": "333"
    },

    {
      "state": "NOT_READY",
      "startTime": "11:26",
      "endTime": "10.35",
      "duration": "888"
    },

    {
      "state": "READY",
      "startTime": "10.26",
      "endTime": "10.35",
      "duration": "444"
    },

    {
      "state": "NOT_READY",
      "startTime": "11:26",
      "endTime": "10.35",
      "duration": "999"
    },

    {
      "state": "LOGOUT",
      "startTime": "13.26"
    },
    {
      "state": "LOGIN",
      "startTime": "08.58"
    },

    {
      "state": "READY",
      "startTime": "10.26",
      "endTime": "10.35",
      "duration": "12"
    },

    {
      "state": "NOT_READY",
      "startTime": "11:26",
      "endTime": "10.35",
      "duration": "13"
    },

    {
      "state": "READY",
      "startTime": "10.26",
      "endTime": "10.35",
      "duration": "14"
    },

    {
      "state": "NOT_READY",
      "startTime": "11:26",
      "endTime": "10.35",
      "duration": "15"
    },

    {
      "state": "READY",
      "startTime": "10.26",
      "endTime": "10.35",
      "duration": "16"
    },

    {
      "state": "NOT_READY",
      "startTime": "11:26",
      "endTime": "10.35",
      "duration": "17"
    },

    {
      "state": "READY",
      "startTime": "10.26",
      "endTime": "10.35",
      "duration": "18"
    },

    {
      "state": "NOT_READY",
      "startTime": "11:26",
      "endTime": "10.35",
      "duration": "19"
    },

    {
      "state": "LOGOUT",
      "startTime": "09.45"
    },

    {
      "state": "LOGIN",
      "startTime": "09:58"
    },

    {
      "state": "READY",
      "startTime": "10.26",
      "endTime": "10.35",
      "duration": "12"
    },

    {
      "state": "NOT_READY",
      "startTime": "11:26",
      "endTime": "10.35",
      "duration": "13"
    },

    {
      "state": "READY",
      "startTime": "10.26",
      "endTime": "10.35",
      "duration": "14"
    },

    {
      "state": "NOT_READY",
      "startTime": "11:26",
      "endTime": "10.35",
      "duration": "15"
    }
  ];

  var state = null;
  var bucket = null;

  for (i = 0; i < localArray.length; i  ) {
    tempOBJ = localArray[i];

    if (tempOBJ.state == "LOGIN") {
      state = "STATE_LOGIN";
      bucket = {
        login: tempOBJ.startTime,
        ready: 0,
        not_ready: 0,
      };
      continue;
    }

    if (state == "STATE_LOGIN") {

      if (tempOBJ.state == "READY") {
        bucket.ready  = parseInt(tempOBJ.duration, 10);
      }
      if (tempOBJ.state == "NOT_READY") {
        bucket.not_ready  = parseInt(tempOBJ.duration, 10);
      }
      if (tempOBJ.state == "LOGOUT") {
        row = "<tr><td>"   bucket.login   "</td><td>"   bucket.ready   "</td><td>"   bucket.not_ready   "</td><td>"   tempOBJ.startTime   "</td></tr>";
        $('#dataAdd').append(row);
        state = null;
      }

    }

  }

  if (state != null) {
    row = "<tr><td>"   bucket.login   "</td><td>"   bucket.ready   "</td><td>"   bucket.not_ready   "</td><td>"   "..."   "</td></tr>";
    $('#dataAdd').append(row);
    state = null;
  }


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<table border="1">
  <thead>
    <th>Login Time</th>
    <th>Ready Duration</th>
    <th>Not_ready Duration</th>
    <th>Logout Time</th>
  </thead>
  <tbody id="dataAdd"></tbody>
</table>

CodePudding user response：

Esentially what you want to do is aggregate up all of your data, forming an array of login events with the relevant info within. This can be done with reduce

const result = localArray.reduce( (acc,i) => {
   if(i.state == "LOGIN"){
      acc.push({loginTime:i.startTime,readyDuration:0,notReadyDuration:0,logOutTime:null });
   }
   if(i.state == "READY"){
      acc[acc.length-1].readyDuration  = parseInt(i.duration,10);
   }
   if(i.state == "NOT_READY"){
      acc[acc.length-1].notReadyDuration  = parseInt(i.duration,10);
   }
   if(i.state == "LOGOUT"){
      acc[acc.length-1].logOutTime = i.startTime;
   }
   return acc;
},[]);

This will produce an array, which you can then loop over to build your rows - demonstration below:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){

  localArray = [
    {"state":"LOGIN","startTime":"10.25"},
    
    {"state":"READY","startTime":"10.26","endTime":"10.35","duration":"615"},
    
    {"state":"NOT_READY","startTime":"11:26","endTime":"10.35","duration":"874"},
    
    {"state":"READY","startTime":"10.26","endTime":"10.35","duration":"222"},
    
    {"state":"NOT_READY","startTime":"11:26","endTime":"10.35","duration":"111"},
    
    {"state":"READY","startTime":"10.26","endTime":"10.35","duration":"333"},
    
    {"state":"NOT_READY","startTime":"11:26","endTime":"10.35","duration":"888"},
    
    {"state":"READY","startTime":"10.26","endTime":"10.35","duration":"444"},
    
    {"state":"NOT_READY","startTime":"11:26","endTime":"10.35","duration":"999"},
    
    {"state":"LOGOUT","startTime":"13.26"},
    // he logged in again, so we need to add new row
    {"state":"LOGIN","startTime":"08.58"},
    
    {"state":"READY","startTime":"10.26","endTime":"10.35","duration":"12"},
    
    {"state":"NOT_READY","startTime":"11:26","endTime":"10.35","duration":"13"},
    
    {"state":"READY","startTime":"10.26","endTime":"10.35","duration":"14"},
    
    {"state":"NOT_READY","startTime":"11:26","endTime":"10.35","duration":"15"},
    
    {"state":"READY","startTime":"10.26","endTime":"10.35","duration":"16"},
    
    {"state":"NOT_READY","startTime":"11:26","endTime":"10.35","duration":"17"},
    
    {"state":"READY","startTime":"10.26","endTime":"10.35","duration":"18"},
    
    {"state":"NOT_READY","startTime":"11:26","endTime":"10.35","duration":"19"}
    ];
    const result = localArray.reduce( (acc,i) => {
       if(i.state == "LOGIN"){
          acc.push({loginTime:i.startTime,readyDuration:0,notReadyDuration:0,logOutTime:null });
       }
       if(i.state == "READY"){
          acc[acc.length-1].readyDuration  = parseInt(i.duration,10);
       }
       if(i.state == "NOT_READY"){
          acc[acc.length-1].notReadyDuration  = parseInt(i.duration,10);
       }
       if(i.state == "LOGOUT"){
          acc[acc.length-1].logOutTime = i.startTime;
       }
       return acc;
    },[]);
    
    for(let i=0;i<result.length;i  ){
      const row = "<tr><td>" result[i].loginTime "</td><td>" result[i].readyDuration "</td><td>" result[i].notReadyDuration "</td><td>" result[i].logOutTime "</td></tr>";
      

      $('#dataAdd').append(row);
    }
});
</script>
</head>
<body>
<table border="1">
<thead>
<th>Login Time</th>
<th>Ready Duration</th>
<th>Not_ready Duration</th>
<th>Logout Time</th>
</thead>
<tbody id="dataAdd"></tbody>
<table>

</body>
</html>

Page link：https//www.codepudding.com/Softwaredesign/490385.html

Prev:Content of ckeditor textarea is not sent through Ajax Jquery
Next:Parse text and special characters from SQL Server
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding