Javascript object to array and delete some key? Need help on javascript syntax

[cptutrecht]

The method getListdata() works perfect.... almost for me And my Javascript skills are letting me down

I want to grab the field value of 1 row in a list and store it in a JSONFORM
But I don't want to define the JSONFORM as a detailview of that list, nor do I want to have any databinding on the JSONFORM


I get as result from a list (row):

[{"Kontpers_volg_nummer":"326","Relaties_nummer":"40","Kontpers_default":"","Kontpers_achternaam":"nummertje 5","Kontpers_voorletters":"","Kontpers_tussenvoegsel":"","Kontpers_geslacht":"V","Titu_kod_titulatuur":"Mevrouw","Aans_kod_aanspreking":"Geachte mevrouw","Kontpers_roepnaam":"Lena","Kontpers_opmerkingen":"Dit is het memoveld en de memo opmerkingen","Kontpers_tweede":"","Kontpers_funktie":"directrice","KontpersArchief":"","KontpersAchterVoegsel":"","KontpersGeboorteDatum":"","KontpersIdentieteitsbewij":"88888888","Kontpers_niet_in_bericht":"","__primaryKey":"326","__selected":true}]

If I use the code above with setValue(JSONFORM), the field of the form are filled, but the form becomes uneditable.


How do I remove in Javascript: the brackets [ ]
and preferably also the last two data pair- inclusive comma: ,"__primaryKey":"326","__selected":true


So I need as result a javascript variable containing:

{"Kontpers_volg_nummer":"326","Relaties_nummer":"40","Kontpers_default":"","Kontpers_achternaam":"nummertje 5","Kontpers_voorletters":"","Kontpers_tussenvoegsel":"","Kontpers_geslacht":"V","Titu_kod_titulatuur":"Mevrouw","Aans_kod_aanspreking":"Geachte mevrouw","Kontpers_roepnaam":"Lena","Kontpers_opmerkingen":"Dit is het memoveld en de memo opmerkingen","Kontpers_tweede":"","Kontpers_funktie":"directrice","KontpersArchief":"","KontpersAchterVoegsel":"","KontpersGeboorteDatum":"","KontpersIdentieteitsbewij":"88888888","Kontpers_niet_in_bericht":""}

If I feed this code to the jsonform with SetValue, everything works as a charm.


Thanks

[madtowng]

Hi Ger... Time to cheat.
2023-12-13_17-54-27.jpg

[Lance Gurd]

Hi Ger,

While Greggs nice code will give you the result you need, this is much simpler with a viewbox instead of a list and give you a much lighter component.

If you configure your viewbox to look like a list similar to Selwyn's video "AA UX Viewbox Making A List" - Videos - Viddler and then set your list value ({Action} in the video) to {[count]} and then in the items tab of the viewbox builder set the onClick event to

 var _D=this.data[v];
{dialog.object}.setValue('JSONFORM_NAME',_D);

this will give you the object data needed to populate the Jsonform
As per attached crude but very fast example

[Russell Craycraft]

Gregg, I see you're embracing ChatGPT! Do you like it so far? I love it.

This is a little different, but works great, I've added some code for testing, commented for its removal, and added the commented out code to setValue, and get data as well if this is what you want.

//Use this to test that it works how you like, then remove it.
var data = [
{
"Kontpers_volg_nummer": "326",
"Relaties_nummer": "40",
"Kontpers_default": "",
"Kontpers_achternaam": "nummertje 5",
"Kontpers_voorletters": "",
"Kontpers_tussenvoegsel": "",
"Kontpers_geslacht": "V",
"Titu_kod_titulatuur": "Mevrouw",
"Aans_kod_aanspreking": "Geachte mevrouw",
"Kontpers_roepnaam": "Lena",
"Kontpers_opmerkingen": "Dit is het memoveld en de memo opmerkingen",
"Kontpers_tweede": "",
"Kontpers_funktie": "directrice",
"KontpersArchief": "",
"KontpersAchterVoegsel": "",
"KontpersGeboorteDatum": "",
"KontpersIdentieteitsbewij": "88888888",
"Kontpers_niet_in_bericht": "",
"__primaryKey": "326",
"__selected": true
}
];

//Use the below line of code to get the value, instead of using the above hardcoded test example
//var data = {dialog.object}.getListData('LIST1');

var formattedData = data.map(function (item) {
var newItem = Object.assign({}, item);
delete newItem['__primaryKey'];
delete newItem['__selected'];
return newItem;
});

var formattedDataJSON = JSON.stringify(formattedData);
var formattedDataWithoutBrackets = formattedDataJSON.slice(1, -1);

//Below code will alert the output, then remove once you use the setValue
alert(formattedDataWithoutBrackets);

//Use this to set value
//{Dialog.Object}.setValue('EnterControlNameHere', formattedDataWithoutBrackets);


Additionally, the only reason for this amount of code, is to remove data from the array. If you didn't want to remove the fields, it would be much cleaner as:

var data = {dialog.object}.getListData('LIST1');
var dataJSON = JSON.stringify(data);

[madtowng]

Russell Craycraft I did that specifically because last week's demo.
My preferred way to use chatGPT is to put Fix this : before the code I can't seem to get right.
The code I provided, not including the array of objects definition and the console log is all
of 3 short lines.

Lance Gurd Due to the love Alpha gives the list control while ignoring the viewbox, I've
stopped trying to convince people to use the viewbox.

[Lance Gurd]

madtowng I often wish that Alpha would add some of the list methods for the viewbox, but then realise a) it only bloats the component, which we don't want and b) most of what they do in the list control is only programming which can be emulated in the viewbox anyway

[madtowng]

We know that’s especially true for finding and filtering.
One of these days I’ll learn how to add images to my viewboxes.

[cptutrecht]

Hi Ger... Time to cheat.

Thanks Greg!
I had your solution working, and I learned a lot extra of javascript and resources for it, Even used chatgpt in BING to find out how to get the variable listdata in the array instead of hardcoding it,
But than came Russel with his solution, which was easier to understand for me. So I choosed that. (see my reaction on his post)

[Russell Craycraft]

madtowng, I find you have to boss ChatGPT around. I was being too nice for it to work correctly. Also, I started adding Fix this javascript, mssql, or mysql, because I am using too many now.

cptutrecht THERE ARE REACTIONS HERE?!

[cptutrecht]

Hi Ger,
While Greggs nice code will give you the result you need, this is much simpler with a viewbox instead of a list and give you a much lighter component.

Hi Lance,
I agree, and would like a solution with viewbox more. But I haven't discoverd yet possibilities to have a page navigater in a viewbox footer and a nice keyword search option, which I want to implement at this place.

But I try to avoid to make havey use of the list featured. Esspecially here in Holland we certainly don't need the disconnected features of the list because the quality of internetconnections. So:
- I don't use the detailview features
- don't use the list for update or inserts, hesitate about deletes
- stay away form parent/child connections between component as much as possible, use client site javascript for that as much as possible
- use JSONFORM for updates and inserts, and take care that I can do that with 1 JForm per entity

In this way it will also a small task to replace list later with viewboxes if they would become more versatile.
But maybe the JSONForm will evolve in that role...

[madtowng]

Ger,
Thanks to Lance Gurd and Pete Conway I chose to work with viewboxes instead of the list control.

If you can deal with functionality over appearance, my VideoFinderProject is a practical example of
using search in a viewbox.

The searches are all performed client-side.

[cptutrecht]

[QUOTE=
Additionally, the only reason for this amount of code, is to remove data from the array. If you didn't want to remove the fields, it would be much cleaner as:

var data = {dialog.object}.getListData('LIST1');
var dataJSON = JSON.stringify(data);[/QUOTE]

Thanks Russel!

I implemented you solution and it workes great.

Unfortunately the quoted easy solution above is a no go: the brackets make that the JSONFORM becomes uneditable after the fields are filled.
The extra fields is not a problem here. But I have to remove them before feeding them into a sql_upsert command.

Would be no big deal to to that in a XB pointer. I have to do some work in xbasic anyway because the JSONFORM checkbox an combox return 'false' if they are empty and touched. Even if you set the off-value to ""....

Below my implementation of your code, i placed it in the onclick event of an edit icon on the list row'.

//Value of persons_list is primary key kontpers_volg_nummer of the row we clicked on
var listObj = {dialog.object}.getControl('PERSONS_LIST');
var _keyPersons = {dialog.Object}.getValue('PERSONS_LIST');

//alert("s0 Kontpers_volg_nummer = key field of the list: " + _keyPersons);

//We filter the list by this value
listObj.filterListClientSide(_keyPersons);

//We get json data of only the row we clicked on
var _dataListRow = {dialog.Object}.getListData('PERSONS_LIST');
//alert("s1 listrow raw data: " + _dataListRow);

//and remove the list filter
listObj.filterListClientSide('');

//Start code Russel Craycraft,20231214, to remove [] and 2 system fields
//The brackets causes to become the JSONFORM uneditable
//The extra fields we have to remove them here do that in xb before feeding it tot the sql_upsert funtion

var formattedData = _dataListRow.map(function (item) {
var newItem = Object.assign({}, item);
delete newItem['__primaryKey'];
delete newItem['__selected'];
return newItem;
});

var formattedDataJSON = JSON.stringify(formattedData);
var formattedDataWithoutBrackets = formattedDataJSON.slice(1, -1);

var _dataPersons_JF = formattedDataWithoutBrackets;
//end code Russel Craycraft

var _dataPersons_JF = formattedDataWithoutBrackets;

//We set the value of the JSON Form
//{Dialog.object}.setValue('JSONFORM::Persons_JF::Kontpers_opmerkingen',_dataPersons_JF); //-for testing--
{Dialog.object}.setValue('Persons_JF',_dataPersons_JF);

// we bring forward the Persons_JF crud panel
{dialog.object}.panelSetActive('PANELCARD_PERSONS_DETAILVIEW_CRUD',true);​

[Russell Craycraft]

You're welcome.
I'm not familiar with view boxes, but use lists. Alpha has done great with building them out, and I haven't seen anything that I'd rather switch out of yet.

Much like some of the people still using grids I guess. Eventually, I'll look into JSON Forms or view boxes, but until I have a real client need for it, I'll stay where I'm at.

[madtowng]

Ger,
Are you willing to export your component so we can see what you're looking at?
It really would make things a lot easier.

[cptutrecht]

Ger,
Are you willing to export your component so we can see what you're looking at?
It really would make things a lot easier.

Hi Gregg

No .problem, attached the component I'm working on and the mysql table you need for it.
It is a childcomponent, but the parent is not needed for testing editing existing persons, new is not possible without it.
The xbasis function sql-combi is work in progress, i know there are errors in the data correction section

If someone needs acces to a testenvironment, pls dm me