Dynamic Loading of owners list

index.js

console.log('exported');
const header = document.getElementById('header');
const actualList = document.getElementById('ownersItem');
var mySelections = [];
var emptyDictionary = {};


// const catgories = { response from getUnique()
async function f1(){

    const cat = await fetch("http://localhost:3000/api/getDistinct") ;
    // console.log("here : ",cat);
    let response = await cat.json()
    // console.log("response : ", response);
    // return response['message'];
    // console.log('response message  : ',response.message);
    // return 1; //example
    return response.message;
}

// f1();


//-object promise-

/*
const catgories = {
    "message": {
        "category": [
            "Autre bât. < 20 m2",
            "Autre école",
            "Garage privé",
            "Hab plusieurs logements",
            "Hab. - rez activité",
            "Habitation - activités",
            "Habitation un logement"
        ],
        "name": [
            "ABBE",
            "BACCHETTA",
            "BAPST",
            "BARBALAT",
            "BENTO",
            "BERTHOLET",
            "BORTOLETTO",
            "BOVE",
            "CHETCUTI",
            "COELHO GRACA",
            "COLARUSSO",
            "DEGRAS",
            "DIAS PEREIRA SA DA SILVA",
            "DIAZ",
            "FALQUET",
            "FELIX",
            "FOUVY",
            "GAIO",
            "GARCIA",
            "GRENON",
            "GUNTERN",
            "GURTNER",
            "HAMMOND",
            "JAILLET",
            "KRAUCHI",
            "LUONGO",
            "MEKUI",
            "PERREARD",
            "PESSE",
            "PONCET",
            "RAMSEYER",
            "ROGERS",
            "ROSSO",
            "SINKOVIC",
            "SUARD",
            "TIMM",
            "TIMS",
            "VERNIORY",
            "VIOLA BARRETO",
            "VIRET",
            "WATTENHOFER",
            "WILDI",
            "ZENG",
            "ZHOU",
            "ZUCCONE"
        ],
        "commune": [
            "Chêne-Bourg",
            "Meyrin",
            "Versoix"
        ],
        "owner": [
            "PARLOCA GENEVE FONDATION D'UTILITE PUBLIQUE POUR LA LOCATION-PARTICIPATION",
            "ABBE François Alexandre",
            "ARIEX DEVELOPPEMENTS IMMOBILIERS SA",
            "ASSOCIATION LA COROLLE",
            "BACCHETTA Nathalie",
            "BAPST Eléonore Amélie Elvire",
            "BAPST Michel Frédéric",
            "BARBALAT Oscar Simon",
            "BENTO Carlos Manuel",
            "BOVE Giorgio dit Georges",
            "CHETCUTI Emmanuel",
            "CHETCUTI Nadia",
            "COELHO GRACA FRANCISCO BENTO Didia Violinda",
            "COLARUSSO Gerardo Martino",
            "COLARUSSO Lina",
            "CONFEDERATION SUISSE",
            "DAME Giel Ine",
            "DAVEL Gisela Inge",
            "DEGRAS Rahman",
            "DIAS PEREIRA SA DA SILVA Sara",
            "DUCRET Lise Andrée",
            "EDMOND DE ROTHSCHILD REAL ESTATE SICAV",
            "ETAT DE GENEVE",
            "FALQUET Jacques Joseph Marie",
            "FONDATION COMMUNALE DE VERSOIX-SAMUEL MAY",
            "FOUVY Gérard Frédéric",
            "GAIO Isabelle Anita",
            "GAIO Marino",
            "GARCIA Francisca",
            "GARCIA Juan Evangelista",
            "GRENON Julien Jean François",
            "GUNTERN Max Adolf",
            "GURTNER Olivier René",
            "HONEGGER Madeleine Heather",
            "KUNZ Marielle",
            "LEFEBVRE Danièle",
            "LUONGO Patrick",
            "MEKUI Christelle Anaëlle",
            "PERREARD René Charles Marius",
            "ROGERS Averel Lilias",
            "ROGERS John Maxwell",
            "SI VERSOIX CENTRE GARE E",
            "SINKOVIC Janja",
            "SOCIETE IMMOBILIERE VERSOIX CENTRE GARE",
            "SUARD Jean-Pierre",
            "VERNIORY Jean-Marc François Gilles",
            "VIOLA BARRETO Joao Felipe",
            "VIRET Lionel Alexandre",
            "WATTENHOFER Michèle",
            "WATTENHOFER Ursus",
            "WILDI Barbara",
            "ZENG Xuemei",
            "ZHOU Zhiyu",
            "ZUCCONE Bernard Denis",
            "ZUCCONE Louis Adrien Alfred"
        ]
    }
}

*/


function listUpdate(ArrayOfItems,item){

    console.log('array of items : ',ArrayOfItems);
    // if item is already there means double click
    // so remove it from the selection and update List
    // if mySelections.

    // item = "'"+item+"'";
    item = item;

    // let myString = '';
    // console.log('adding to list : ',item);
    ArrayOfItems.push(item);
    // console.log('now items  : ',ArrayOfItems);
    let myString = ArrayOfItems.join(',')
    // console.log('myString : ','['+myString+']');
    actualList.textContent = '['+myString+']';
    
    //checking if owner already in list
    let dummyOwner = actualList.textContent;
    // if(dummyOwner.){
// 
    // }
}



const catgories =  await f1();

console.log("categories  \n\n",catgories);

// let owners = catgories.message.owner.sort();
let owners = catgories.owner;
// console.log("pwners : ",owners);

// using response from api;

// adding a owners div to header
let ownersCollection = document.createElement('div');
ownersCollection.id = 'ownersCollection';
header.appendChild(ownersCollection);

// console.log('owners : ',owners);
for(let i=0;i<owners.length;i++){
    let divOwner = document.createElement('div');
    divOwner.id='owner';
    divOwner.innerText = owners[i];
    ownersCollection.appendChild(divOwner);
    divOwner.addEventListener('click',function(e){
        
        // for dictionary management
        // document.getElementById('FieldName').textContent = divOwner.id;
        document.getElementById('FieldName').textContent = 'ownersList';
        // ownersList
        // console.log('you clicked : ',e);
        // console.log('target : ',e.target);
        console.log('target textContent: ',e.target.textContent);
        // mySelections.push();

        let ownerItem = e.target.textContent;

        // if mySelections
        listUpdate(mySelections , ownerItem);
        console.log("updated mySelections put in dictionary");
        // emptyDictionary[divOwner.id] = mySelections;
        emptyDictionary['ownersList'] = mySelections;

        console.log("dictionary now : ",emptyDictionary);
        divOwner.style.backgroundColor = "beige";
        console.log("color changed");
        // console.log('\n\n\n\nowners in  dictionary : ',emptyDictionary['owner']);

    })
}


// testing custom querying

// Example POST method implementation:
async function postData(url = '', data = {}) {
    // Default options are marked with *
    const response = await fetch(url, {
      method: 'POST', // *GET, POST, PUT, DELETE, etc.
      mode: 'cors', // no-cors, *cors, same-origin
      cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
      credentials: 'same-origin', // include, *same-origin, omit
      headers: {
        'Content-Type': 'application/json'
        // 'Content-Type': 'application/x-www-form-urlencoded',
      },
      redirect: 'follow', // manual, *follow, error
      referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
      body: JSON.stringify(data) // body data type must match "Content-Type" header
    });
    let response1 = await response.json();
    console.log("response " , response1);
    return response1; // parses JSON response into native JavaScript objects
  }
  

document.getElementById('fetchButton').addEventListener('click',function(){
    console.log("fetched called ...");
    // let myData = document.getElementById('myQuery').textContent;
    console.log("use  : ",emptyDictionary);
    postData('http://localhost:3000/api/customQuery', emptyDictionary)
      .then(data => {
        console.log(data); // JSON data parsed by `data.json()` call
        // document.getElementById('outPut').textContent = data.message;
        for(let i =0;i<data.message.length;i++){
            console.log("running for : ",data['message'][i]);
            document.getElementById('outPut').textContent += JSON.stringify(data['message'][i]) +"\n\n";
            // document.getElementById('outPut').appendChild(document.createElement('br')).appendChild(document.createElement('hr'));;

        }
      });
  
});