How to update JavaScript array dynamically

Question

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

Matheus Dal'Pizzol · Accepted Answer · 2017-10-16 17:22:04Z

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.

thanks your help but i need to work with an array not a list, would it be the same logic/code ? @Matheus
Hey, @Zee! Why exactly is an array mandatory? Are you using some plugin or API that requires it to be an array? Otherwise, I don't see why not to use an object...
after reflection, i did exactely like you said..it's better...thank's for your help (:

ktilcu · Accepted Answer · 2017-10-16 17:14:33Z

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

Collectives™ on Stack Overflow

How to update JavaScript array dynamically

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related