Cant get the current id of a data from local Storage using jquery

Question

I am working on an app to store data offline. My problem is when I try to retrieve the data from local storage for update/edit, it keeps calling only the id of the first item, and not calling the id of the data in view.

Please what am I doing wrong?

Here is my code for loading employees:

// load cases from localStorage
var employees;

if (localStorage.getItem('employees')) {
  employees = JSON.parse(localStorage.getItem('employees'));
} else {
  // If no cases, create and save them
  employees = [];
  // offling storing of our cases
  localStorage.setItem('employees', JSON.stringify(employees));
}

// show case listing in list view page
var showEmployees = function () { 
  //erase existing content
  $('#employee_list').html('');

  //insert each employee
  for (var i = 0; i<employees.length; i++) {
    addEmployees(employees[i]);       
  }
};

Here is my code to add an employee to list view:

//add an eliment to list view
var addEmployees = function (empData) {
  //HTML content of one list element
  var listElementHTML = '<li><a class="employee_list" ui-btn ui-btn-e ui-btn-icon-right ui-icon-carat-r" data-transition="fade" data-split-icon="delete"  href="#item'+empData.id+'">' + empData.employeename + '<br> ' + empData.dateofbirth + '</br></a></li>';

  //appending the HTML code to list view
  $('#employee_list').append(listElementHTML);
};

Here is my code for Edit function:

//User input to edit form
$('#edit_employee_page').on('click' , function () {
  var editEmployee = JSON.stringify({
  id: employees.length+1,
  employeeno: $('#employeeno').val(),
  employeename:$('#employeename').val(),
  stateoforigine:$('#stateoforigine').val(),
  employeephone: $('#employeephone').val(),
  dateofbirth:$('#dateofbirth').val()
  });

  //Alter the slected data
  localStorage.setItem("employees", JSON.stringify(employees));   
  return true;
});

for (var i in employees) {
  var id = JSON.parse(localStorage.getItem(employees[i]));
}

Here is my code for the Edit button:

//register Edit button 
$('.edit_button').live('click', function (e) {
  alert('I was Cliked!');
  e.stopPropagation();

  $.each(employees, function(a, b) {
    //if(b.id == employees[i]){ 
    $('#id').val(b.id);
    $('#employeeno').val(b.employeeno);
    $('#employeename').val(b.employeename);
    $("#stateoforigine").val(i.stateoforigine);
    $('#employeephone').val(b.employeephone);
    $('#dateofbirth').val(b.dateofbirth);
    $("#id").attr("readonly","readonly");
    $('#employeeno').focus();
    $.mobile.changePage('#edit_employee_page');

    return false;
    //}
  });
});

Here is my local Storage:

[
   {"id":1,
           "employeeno":"DEF/234/20014",
           "employeename":"Bill Gates",
           "stateoforigine":"Osun",
           "employeephone":"080765432",
           "dateofbirth":"12/11/1965"},

   {"id":2,
           "employeeno":"DEF/234/20014",
           "employeename":"Bill Gates",
           "stateoforigine":"Osun",
           "employeephone":"080765432",
           "dateofbirth":"12/11/1966"},

   {"id":3,
           "employeeno":"DEF/234/20014",
           "employeename":"Bill Gates",
           "stateoforigine":"Osun",
           "employeephone":"080765432",
           "dateofbirth":"12/11/1966"},

   {"id":4,
           "employeeno":"DAST/003/2003",
           "employeename":"Gold Base",
           "stateoforigine":"",
           "employeephone":"",
           "dateofbirth":"12/03/1986"}
]

Thanks for helping me out

Answer 1

I had a similar task to do . I did it this way. I passed the dynamic Id to be passed as an id attribute

    id="'+empData.id+'"

and then inside the

 $('.edit_button').live('click', function (e) {
    alert('I was Cliked!');
    var empId=$(this).attr('id');

rest of the code is same.

Answer 2

The way you are storing your employees into localStorage is correct, but the way you are getting them out is incorrect. You stored your employees by stating:

localStorage.setItem("employees", JSON.stringify(employees));

So, in order to retrieve them, you must use:

var employees = JSON.parse(localStorage.getItem("employees"));

You see, you stored the data as a string with a key of "employees"; therefore, you can only retrieve it by that key. Since all data stored in localStorage is saved as a string, you must use JSON.parse() to convert the data back into an object - an array in this case. Then you can iterate over your employees.

Update: You should be running this code as soon as the page is rendered (see below). I'm not sure how you're doing that - if you're using an IIFE or jQuery's document.ready() function. I don't think it's necessary to store an empty array into localStorage if none were loaded initially, so, I took your else clause out.

var employees = [];

if (localStorage.getItem('employees') !== null) {
  employees = JSON.parse(localStorage.getItem('employees'));
}

Debug this line-by-line when it runs and make positive your employees variable contains data. If it doesn't contain data, well then, there's nothing to edit.

If, however, there is data, then execute your showEmployees() function. Oddly, I'm not seeing in your code where you actually call this. Is it bound to a button or action in your UI? Also, what is that for loop doing after your $('#edit_employee_page') click event function? It's trying to read data from localStorage improperly and it does nothing.

I think if you simply stepped through your code one line at a time using breakpoints and desk-checking your inputs/outputs you'd find out where you're going wrong.

Answer 3

It also appears that there's a disconnect in your code. May be you left out some lines; you define a string editEmployee but out of the blues you store JSON.stringify(employees) whereas employees is not defined in your code:

$('#edit_employee_page').on('click' , function(){ 

    var editEmployee = JSON.stringify({
        id: employees.length+1,
        //........
    });

    //Alter the slected data
    localStorage.setItem("employees", JSON.stringify(employees));     
    return true;
});