CODEWITHSUNDEEP
javascriptjqueryarrays
Zee
Zee

Reputation: 5

How to update JavaScript array dynamically

I have an empty javascript array(matrix) that I created to achieve refresh of divs. I created a function to dynamically put data in it. Then I created a function to update the Array (which I have issues). The Data populated in the Array are data attributes that I put in a JSON file.

To better undertand, here are my data attributes which i put in json file:

var currentAge      = $(this).data("age");
var currentDate     = $(this).data("date");
var currentFullName = $(this).data("fullname");
var currentIDPerson = $(this).data("idPerson");
var currentGender   = $(this).data("gender");

Creation of the array:

var arrayData   = [];

Here is the function a created to initiate and addind element to the Array :

function initMatrix(p_currentIDPerson, p_currentGender, p_currentFullName, p_currentDate, p_currentAge) {
  var isFound = false;      
  // search if the unique index match the ID of the HTML one
  for (var i = 0; i < arrayData.length; i++) {
    if(arrayData[i].idPerson== p_currentIDPerson) {
      isFound = true;
    }
  }

  // If it doesn't exist we add elements
    if(isFound == false) {
      var tempArray = [
        { 
          currentIDPerson: p_currentIDPerson,  
          currentGender: p_currentGender, 
          currentFullName: p_currentFullName,  
          currentDate: p_currentDate, currentAge: p_currentAge
        }
      ];
      arrayData.push(tempArray);
    }
  }

The update function here is what I tried, but it doesn't work, maybe I'm not coding it the right way. If you can help please.

function updateMatrix(p_currentIDPerson, p_currentGender, p_currentFullName, p_currentDate, p_currentAge) {
  for (var i = 0; i < arguments.length; i++) {
    for (var key in arguments[i]) {
      arrayData[i] = arguments[i][key];         
    }
  }
}

To understand the '$this' and elm: elm is the clickableDivs where I put click event:

(function( $ ) {    
  // Plugin to manage clickable divs
  $.fn.infoClickable = function() {
    this.each(function() {
      var elm = $( this );

      //Call init function
      initMatrixRefresh(elm.attr("idPerson"), elm.data("gender"), elm.data("fullname"), elm.data("date"), elm.data("age"));

      //call function update
      updateMatrix("idTest", "Alarme", "none", "10-02-17 08:20", 10);

      // Définition de l'evenement click
      elm.on("click", function(){});
    });
  }
  $('.clickableDiv').infoClickable();   
}( jQuery ));

Thank you in advance

Upvotes: 0

Views: 841

Answers (2)

Matheus Dal&#39;Pizzol
Matheus Dal&#39;Pizzol

Reputation: 6105

Well... I would recommend you to use an object in which each key is a person id for keeping this list, instead of an array. This way you can write cleaner code that achieves the same results but with improved performance. For example:

var myDataCollection = {};

function initMatrix(p_currentIDPerson, p_currentGender, p_currentFullName, p_currentDate, p_currentAge) {
  if (!myDataCollection[p_currentIDPerson]) {
     myDataCollection[p_currentIDPerson] = {
        currentIDPerson: p_currentIDPerson,  
        currentGender: p_currentGender, 
        currentFullName: p_currentFullName,  
        currentDate: p_currentDate,
        currentAge: p_currentAge
     };
  }
}

function updateMatrix(p_currentIDPerson, p_currentGender, p_currentFullName, p_currentDate, p_currentAge) {
  if (myDataCollection[p_currentIDPerson]) {
     myDataCollection[p_currentIDPerson] = {
        currentGender: p_currentGender, 
        currentFullName: p_currentFullName,  
        currentDate: p_currentDate,
        currentAge: p_currentAge
     };
  } 
}

Depending on your business logic, you can remove the if statements and keep only one function that adds the object when there is no object with the specified id and updates the object when there is one.

Upvotes: 1

ktilcu
ktilcu

Reputation: 3128

I think the shape of the resulting matrix is different than you think. Specifically, the matrix after init looks like [ [ {id, ...} ] ]. Your update function isn't looping enough. It seems like you are trying to create a data structure for storing and updating a list of users. I would recommend a flat list or an object indexed by userID since thats your lookup.

var userStorage = {}

// add/update users
userStorage[id] = {id:u_id};

// list of users
var users = Object.keys(users);

Upvotes: 0

Related Questions