How to Parse CMS database JSON response into textbox?

Ask the community
, , ,
1

Question:
Hi everyone, I think I just need help on the correct syntax to parse out JSON response into textbox fields on my webpage as part of an administrative review page.

Product:
Wix Studio Editor

What are you trying to achieve:
Read data from the database (app1) using the uniId (unique ID field/customer number) and take the JSON response and pull values individually into textboxes like legalFirstName and display that value for legalFirstName into a textbox.

I think all i need is help with parsing the response, I am successful in pulling data from the database (please see screenshots)

Full Code

import wixData from ‘wix-data’;

//Variables
let uniIDValue = “”;

//On Page Load
$w.onReady(function () {

//Filter selection in dropdown for finding new applicants
$w('#filterDropdown').onChange(() => {
    const selectedValue = $w('#filterDropdown').value;

    let filter = wixData.filter();

    if (selectedValue.length > 0) {
        filter = filter.hasSome("member", selectedValue)
    }

    $w('#dataset1').setFilter(filter);
});

});

//Red X to reset filter
export function vectorImage1_click(event) {
$w(‘#dataset1’).setFilter(wixData.filter());
}

//Review Application Button
export function reviewApplicant_click(event) {

//Collect the UniIDValue from the input
    let uniIDValue = $w('#uniIdInput').value;

//Log when its clicked
    console.log("You Clicked Me!")

//Query CMS app1 database using uniId (that the end-user entered)
    wixData.query("app1")
    .eq("uniId", uniIDValue)
    .find()
    .then((results) => {
        
        //Log items into the console
            console.log(results.items);

        //I Need help here, how do I parse the JSON response into a textbox
        //I am getting the full CMS data back, but I want to pull a single value into a single textbox
        $w('#firstNameTextBox1').value = results.query.eq("legalFirstName").toString(); //this returned an object but not the value

    });

}

What have you already tried:
See my code example.

Additional information:
this is pretty much a wix velo code syntax question that I do not see covered in the API reference.

image
image834×276 31.1 KB

image

2

A second query doesn’t need to be made so can replace this with: $w('#firstNameTextBox1').value = results.items[0].legalFirstName

The query gives back an array of matching results. If you only want the first matching result then this is the way to get the first item of the array [0] and then access a property on that item .legalFirstName.

You might also wanted to have an if statement check that results.items.length > 0 to deal with cases where a query returns nothing.

Lastly just as a reminder since this collection seems to contain sensitive user data make sure your permissions are set properly so only people that should query this info can. CMS: Collection Permissions Overview | Help Center | Wix.com

3

Thank you. That was exactly the help I needed and I wasn’t understanding the WIX array structure, when I see results.items[0] in my mind that is the first item in the array and the item: legalFirstName might be in array position 22 meaning results.items[22] (this was incorrect thinking on my part). This example made things so much clearer to me, the API reference should reflect multiple use cases such a pulling a single value as opposed to the whole array would be helpful.

Your comments about the database are spot on and everyone should be keenly aware to set the CMS database permissions correctly for security purposes. I have already done this and have data encrypted.

Thank you Anthony!

1 Like
4

You’re very welcome!