How to set the length of an arraylist in js and save the changes?

Welcome to Programming Tutorial official website. Today - we are going to cover how to solve / find the solution of this error How to set the length of an arraylist in js and save the changes? on this date .

I’m here because I’m trying to set the length of an array to 0 but it doesn’t save it.

Here is the list(I want to set the length of id_list to 0 and delete all element in it):

let constraints = [
        {
        id: 8, // id de la TTC
        name: "Covoiturage", // nom du type de TTC
        weight: 1, // poids de la TTC
        is_active: true, // contrainte active ?
        comment: "", // commentaire sur la TTC
        last_modification: null, // date de création
        weeks : [{nb: 14 , year: 2021},{nb: 33 , year: 2021}], // week a la forme : {nb: int , year: int}
        parameters : [
            {
            name: "Prof", // nom du paramètre dans la TTC
            type: 'people.Tutor', // nom du type des objets dans ce paramètre
            required: true, // paramètre obligatoire ?
            all_except: true, // tous sauf ?
            multiple : true,
            id_list: [2,6], // ids des objets pour le paramètre dans la TTC
            acceptable: [1,2,3,4,5,6,7,8,9,10,11] // ids des objets acceptables comme valeur du paramètre
            },
            {
            name: "bonjour", // nom du paramètre dans la TTC
            type: 'people.Tutor', // nom du type des objets dans ce paramètre
            required: false, // paramètre obligatoire ?
            all_except: true, // tous sauf ?
            multiple : true,
            id_list: [1,8,5,6,7,8,9], // ids des objets pour le paramètre dans la TTC
            acceptable: [1,2,3,4,5,6,7,8,9,10,11,12] // ids des objets acceptables comme valeur du paramètre
            },
            {
            name: "Module", // nom du paramètre dans la TTC
            type: 'base.Module', // nom du type des objets dans ce paramètre
            required: true, // paramètre obligatoire ?
            all_except: true, // tous sauf ?
            multiple : true,
            id_list: [1,2,3], // ids des objets pour le paramètre dans la TTC
            acceptable: [1,2,3,4] // ids des objets acceptables comme valeur du paramètre
            }
        ]
    },
    {
        id: 9, // id de la TTC
        name: "Random", // nom du type de TTC
        weight: 2, // poids de la TTC
        is_active: false, // contrainte active ?
        comment: "", // commentaire sur la TTC
        last_modification: null, // date de création
        weeks : [{nb: 14 , year: 2021},{nb: 33 , year: 2021}], // week a la forme : {nb: int , year: int}
        parameters : [
            {
            name: "Lettre", // nom du paramètre dans la TTC
            type: "people.Tutor", // nom du type des objets dans ce paramètre
            required: true, // paramètre obligatoire ?
            all_except: true, // tous sauf ?
            multiple : false,
            id_list: ["A"], // ids des objets pour le paramètre dans la TTC
            acceptable: ["A","B"] // ids des objets acceptables comme valeur du paramètre
            },
            {
            name: "Nombres", // nom du paramètre dans la TTC
            type: 'people.Tutor', // nom du type des objets dans ce paramètre
            required: false, // paramètre obligatoire ?
            all_except: true, // tous sauf ?
            multiple : true,
            id_list: [5], // ids des objets pour le paramètre dans la TTC
            acceptable: [1,5,6,8,9] // ids des objets acceptables comme valeur du paramètre
            }
        ]
    },
    {
        id: 10, // id de la TTC
        name: "Bonsoir", // nom du type de TTC
        weight: 8, // poids de la TTC
        is_active: true, // contrainte active ?
        comment: "", // commentaire sur la TTC
        last_modification: null, // date de création
        weeks : [{nb: 14 , year: 2021},{nb: 33 , year: 2021}], // week a la forme : {nb: int , year: int}
        parameters : [
            {
            name: "Lettre", // nom du paramètre dans la TTC
            type: "people.Tutor", // nom du type des objets dans ce paramètre
            required: true, // paramètre obligatoire ?
            all_except: true, // tous sauf ?
            multiple : false,
            id_list: ["A"], // ids des objets pour le paramètre dans la TTC
            acceptable: ["A","B"] // ids des objets acceptables comme valeur du paramètre
            },
            {
            name: "Nombres", // nom du paramètre dans la TTC
            type: 'people.Tutor', // nom du type des objets dans ce paramètre
            required: false, // paramètre obligatoire ?
            all_except: true, // tous sauf ?
            multiple : true,
            id_list: [1], // ids des objets pour le paramètre dans la TTC
            acceptable: [1,7,6,8,9] // ids des objets acceptables comme valeur du paramètre
            }
        ]
    }];

I use a button which is in a loop to set the length to 0, here is the button:

for (let l = 0; l < constraints.length; l++) {
  for (let k = 0; k < constraints[l].parameters.length; k++) {

 let btn_Suppr = document.createElement('input');
        btn_Suppr.setAttribute('type', 'image');
        btn_Suppr.setAttribute('id', 'image_Delete');
        btn_Suppr.setAttribute('src', '/static/base/img/suppression.png');
        btn_Suppr.addEventListener('click', () => suppr(constraints[l].parameters[k].id_list));
        btn_Suppr.setAttribute('width', '15px');
        btn_Suppr.setAttribute('height', '15px');

case_param_required.appendChild(btn_Suppr);// case_param_required is an html div where i add my button

  }
}

and here is the function suppr():

function suppr(param){
            console.log(param);
            param.length=0;
            console.log(param);

    }

In the console I get this :

(3) [1, 2, 3]

    []

Answer

Here a basic example of what happens if you try set length property:

let arr = [1, 2, 3];

console.log(arr.length); //3

arr.length = 0; 

console.log(arr); // [] length is 0, that means, no values here.

console.log(arr.length); //0

arr.length = 3;

console.log(arr); //length is 3 and has undefined values.

console.log(arr.length); //3

Now seeing your structure, a issue is try add a element with same id, i change the property to class, but that isn’t the real issue, because click event works with that.

function suppr(param){
    console.log(param);
    param.length=0;
    console.log(param);
}


let constraints = [
        {
        id: 8, // id de la TTC
        name: "Covoiturage", // nom du type de TTC
        weight: 1, // poids de la TTC
        is_active: true, // contrainte active ?
        comment: "", // commentaire sur la TTC
        last_modification: null, // date de création
        weeks : [{nb: 14 , year: 2021},{nb: 33 , year: 2021}], // week a la forme : {nb: int , year: int}
        parameters : [
            {
            name: "Prof", // nom du paramètre dans la TTC
            type: 'people.Tutor', // nom du type des objets dans ce paramètre
            required: true, // paramètre obligatoire ?
            all_except: true, // tous sauf ?
            multiple : true,
            id_list: [2,6], // ids des objets pour le paramètre dans la TTC
            acceptable: [1,2,3,4,5,6,7,8,9,10,11] // ids des objets acceptables comme valeur du paramètre
            },
            {
            name: "bonjour", // nom du paramètre dans la TTC
            type: 'people.Tutor', // nom du type des objets dans ce paramètre
            required: false, // paramètre obligatoire ?
            all_except: true, // tous sauf ?
            multiple : true,
            id_list: [1,8,5,6,7,8,9], // ids des objets pour le paramètre dans la TTC
            acceptable: [1,2,3,4,5,6,7,8,9,10,11,12] // ids des objets acceptables comme valeur du paramètre
            },
            {
            name: "Module", // nom du paramètre dans la TTC
            type: 'base.Module', // nom du type des objets dans ce paramètre
            required: true, // paramètre obligatoire ?
            all_except: true, // tous sauf ?
            multiple : true,
            id_list: [1,2,3], // ids des objets pour le paramètre dans la TTC
            acceptable: [1,2,3,4] // ids des objets acceptables comme valeur du paramètre
            }
        ]
    },
    {
        id: 9, // id de la TTC
        name: "Random", // nom du type de TTC
        weight: 2, // poids de la TTC
        is_active: false, // contrainte active ?
        comment: "", // commentaire sur la TTC
        last_modification: null, // date de création
        weeks : [{nb: 14 , year: 2021},{nb: 33 , year: 2021}], // week a la forme : {nb: int , year: int}
        parameters : [
            {
            name: "Lettre", // nom du paramètre dans la TTC
            type: "people.Tutor", // nom du type des objets dans ce paramètre
            required: true, // paramètre obligatoire ?
            all_except: true, // tous sauf ?
            multiple : false,
            id_list: ["A"], // ids des objets pour le paramètre dans la TTC
            acceptable: ["A","B"] // ids des objets acceptables comme valeur du paramètre
            },
            {
            name: "Nombres", // nom du paramètre dans la TTC
            type: 'people.Tutor', // nom du type des objets dans ce paramètre
            required: false, // paramètre obligatoire ?
            all_except: true, // tous sauf ?
            multiple : true,
            id_list: [5], // ids des objets pour le paramètre dans la TTC
            acceptable: [1,5,6,8,9] // ids des objets acceptables comme valeur du paramètre
            }
        ]
    },
    {
        id: 10, // id de la TTC
        name: "Bonsoir", // nom du type de TTC
        weight: 8, // poids de la TTC
        is_active: true, // contrainte active ?
        comment: "", // commentaire sur la TTC
        last_modification: null, // date de création
        weeks : [{nb: 14 , year: 2021},{nb: 33 , year: 2021}], // week a la forme : {nb: int , year: int}
        parameters : [
            {
            name: "Lettre", // nom du paramètre dans la TTC
            type: "people.Tutor", // nom du type des objets dans ce paramètre
            required: true, // paramètre obligatoire ?
            all_except: true, // tous sauf ?
            multiple : false,
            id_list: ["A"], // ids des objets pour le paramètre dans la TTC
            acceptable: ["A","B"] // ids des objets acceptables comme valeur du paramètre
            },
            {
            name: "Nombres", // nom du paramètre dans la TTC
            type: 'people.Tutor', // nom du type des objets dans ce paramètre
            required: false, // paramètre obligatoire ?
            all_except: true, // tous sauf ?
            multiple : true,
            id_list: [1], // ids des objets pour le paramètre dans la TTC
            acceptable: [1,7,6,8,9] // ids des objets acceptables comme valeur du paramètre
            }
        ]
    }];


/*constraints[0].parameters[0].id_list.length = 0;

console.log(constraints[0].parameters[0].id_list);*/
let case_param_required = document.getElementsByTagName("body")[0];

for (let l = 0; l < constraints.length; l++) {
  for (let k = 0; k < constraints[l].parameters.length; k++) {

 let btn_Suppr = document.createElement('input');
        btn_Suppr.setAttribute('type', 'image');
        btn_Suppr.setAttribute('class', 'image_Delete'); //Can't have the same id, i replace it to class.
        btn_Suppr.setAttribute('src', '/static/base/img/suppression.png');
        btn_Suppr.addEventListener('click', () => suppr(constraints[l].parameters[k].id_list));
        btn_Suppr.setAttribute('width', '15px');
        btn_Suppr.setAttribute('height', '15px');

        case_param_required.appendChild(btn_Suppr);// case_param_required is an html div where i add my button

  }
}

An example:

This is how is the constraint id_list value of the first button without remove data:

Any data removed.

Now i will click to the first button:

Output when clicking

Now i will check in constraints[0].parameters[0].id_list:

enter image description here