Update a database (using "query"), from a repeater's input {SOLVED}

clementserie · November 19, 2020, 4:36pm

Hi,

I have a repeater connected to a data :

Which is working with this code :

import wixData from 'wix-data';

let queryResults;

$w.onReady(async function () {
  queryResults = await wixData.query("MYDATA")
    .limit(6)
    .find();

  $w('#repeater1').data = queryResults.items;
 
} );

export function repeater1_itemReady($item, itemData, index) {
 
  $item("#Title").text = itemData.title;

  $item("#Text").text = itemData.text;
}

And now, I want to do this :

People add an adjective in the input : $item(“#Adjective”)
They click in the button : $item(“#Button”)
The text that was put in the input is inserted to “MYDATA”

So, for example, if :

I put “green”, in $item(“#Adjective”) of The dog
I click in $item(“#Button”)
My data is updated to be like this :

I search a lot, and I don’t find anything like this…

Someone can help me ?

THANK YOU FOR YOUR HELP !!

EDIT : PROBLEM SOLVED (THANK YOU @russian-dima ) <<<<<<<<<<<<

here it is the code :

import wixData from 'wix-data';

var queryResults;

$w.onReady(async function () {
    queryResults = await wixData.query("MYDATA")
//    .limit(6)
    .find();

    console.log(queryResults.items)
    $w('#repeater1').data = queryResults.items;

    $w("#repeater1").onItemReady(($item, itemData, index) => {   
        $item("#Title").text = itemData.title;
        $item("#Text").text = itemData.text;
        $item('#button1').onClick(async(event) => {
            console.log ("INDEX: = " + index)
            console.log("ID: " + itemData._id)              
            //console.log("TITLE: " + itemData.title)
            //console.log("TEXT: " + itemData.text)

 let toSave = {
 "_id":          itemData._id,
 "title":        itemData.title,
 "text":         itemData.text,
 "adjective":    $item('#Adjective').value,
            };
 await wixData.save("MYDATA", toSave)
                .then( (results) => {
                } )

 await wixData.query("MYDATA")
            .find()
            .then((results) => {
 let Lenght = results.items.length  
                console.log("Length = " + Lenght)
 if(Lenght > 0) {
/*
                    for (var i = 0; i < Lenght; i++) {
                        let myItem = results.items[i].title; 
                        console.log(myItem)
 
                        if (i === index) {console.log ("Right title found = " + myItem)
                            let toSave = await {"adjective":        $item('#Adjective').value,
 
                        };
                        await wixData.save("MyData", toSave)
 
 
 
                        //  $w('#Adjective').value = myItem
                        }
                        else{ }
                    }
*/
                } 
 else { }
            })
        })
    })
});

luczkiewiczaymeric · November 21, 2020, 10:18am

I need it too !

CODE-NINJA · November 22, 2020, 10:27am

import wixData from 'wix-data';

let queryResults;

$w.onReady(async function () {
  queryResults = await wixData.query("MYDATA")
    .limit(6)
    .find();

  $w('#repeater1').data = queryResults.items;
 
} );

export function repeater1_itemReady($item, itemData, index) {
  $item("#Title").text = itemData.title;
  $item("#Text").text = itemData.text;

  $item('#myButton').onClick((event) => {
     console.log(index);
     console.log(itemData);
  })
}

Better way…

import wixData from 'wix-data';
  
$w.onReady(function () {
            $w("#repeater1").onItemReady(($item, itemData, index) => {
                $item('#myButton').onClick((event) => {
                console.log(index);
                console.log(itemData);
            })
        });

Which result do you get in the console?
You should get the right Index-Number of the selected item in the repeater and also the right item-data.

When you know the index of the selected data, then you can use this index to find and modify the right-selected DATA in your DATASET or DATABASE.

Example for DATASET… (not tested, but should be something in this direction)

import wixData from 'wix-data';
  
$w.onReady(function () {
     $w('#yourDataset').onReady(()=>{
            $w("#yourRepeater").onItemReady(($item, itemData, index) => {
                $item('#yourButton').onClick((event) => {
                console.log(index);
                console.log(itemData);

                $w('#yourDataset').setCurrentItemIndex(index)
                $w('#yourDataset').setFieldValue("title", "")
            })
     });
});

CODE-NINJA · November 22, 2020, 11:34am

Take also a look here…

clementserie · November 22, 2020, 2:12pm

@russian-dima Hello , thank you for answer !

I get this :

So it seems working good, but now, the point is how do I insert the value of the input $item(" #Adjective ") , to my specific item of wixData . query ( “MYDATA” ) ?

In my case, I necessarily need to use wixData.Query (and not dataset ) with my website which is a little more complex than this example.

But I don’t find the specific code to do this with wixData.Query.

Thank you in advance for your help if you can !!

CODE-NINJA · November 22, 2020, 3:00pm

@clementserie
You have already the RIGHT —> ID, don’t you?
Use the ID of the selected item in your repeater.

Or use the title —> “The Cat” and find it in your query.
Or use the length of your query and stop at (—>2<—) —> Index = 2 ??? right?
Or search your query by ----> OWNER. ← NO, i think this one will not work.

You should have enoght possibilities.

CODE-NINJA · November 22, 2020, 3:00pm

@clementserie
You have already the RIGHT —> ID, don’t you?
Use the ID of the selected item in your repeater.

Or use the title —> “The Cat” and find it in your query.
Or search your query by ----> OWNER. ← NO, i think this one will not work.
Or you can use the search by ADJECTIVE! (which i can not see in your results)

You should have enough possibilities.
But the best way would be to use the given INDEX —> ( 2 ).
Now you can search for INDEX-2 in your query to find the right line, where to put in your ADJECTIVE into your DATABASE. (using a for loop)

Something like…

wixData.query("MYDATA")
.find()
.then( (results) => {
 let Lenght = results.items.length  
 if(Lenght > 0) {
 
 for (var i = 0; i < Lenght; i++) {
 let myItem = results.items[i].ADJECTIVE; 
 
 if (Length === 2) {
              console.log ("Adjective-found = " + myItem)
            }
 else{  }
      }
 
    } else {
 // handle case where no matching items found
    }
  } )
  .catch( (err) => {
 let errorMsg = err;
  } );

tdlambert50 · November 22, 2020, 4:43pm

Do you need all this coding? Why not have a form with a dropdown box connected to your database with a dataset, example - MyData | Mysite (wixsite.com) . The only coding I have added is for the “Thank you for submitting” message -
$w.onReady( function () {
});

export function button1_click(event) {
$w( ‘#text18’ ).show();
}

Database -

Hope this helps.

tdlambert50 · November 22, 2020, 4:47pm

Meant to give you this link for a video Corvid by Wix | How to Create a Custom Form and Connect It to a Database - YouTube

clementserie · November 22, 2020, 5:54pm

@russian-dima Thank you a lot for your answer again !

But I’m not an expert and unfortunately it dosen’t work… Now I have nothing in the console neither in the database…

Here is the entire code :

import wixData from 'wix-data';

let queryResults;

$w.onReady(async function () {
  queryResults = await wixData.query("MYDATA")
  .limit(6)
  .find();

  $w('#repeater1').data = queryResults.items;
});

export function repeater1_itemReady($item, itemData, index) {
 
  $item("#Title").text = itemData.title;

  $item("#Text").text = itemData.text;

  $item('#Button').onClick((event) => {
 
  wixData.query("MYDATA")
  .find()
  .then( (results) => {
  let Lenght = results.items.length  
  if(Lenght > 0) {
 
 for (var i = 0; i < Lenght; i++) {
 let myItem = results.items[i].adjective; 
 
 if (Lenght === 2) {
 
    console.log ("Adjective-found = " + myItem)
 }

 else{ }
 }
 } 
 else { }
 })
 .catch( (err) => {
 let errorMsg = err;
 });
})
}

Thank you again in advance !

CODE-NINJA · November 22, 2020, 6:33pm

@clementserie

Try this one…
Take also a look at the console-logs!

import wixData from 'wix-data';

var queryResults;

$w.onReady(async function () {
    queryResults = await wixData.query("MYDATA")
    .find()
    .then((results) => {console.log(results.items);
 if(results.items.length > 0) {
 let firstItem = results.items[0]; 
            $w('#repeater1').data = queryResults.items;
        } 
 else { }
    })


    $w("#repeater1").onItemReady(($item, itemData, index) => {   
        console.log("Index = " + index);
        console.log(itemData);
        $item("#Title").text = itemData.title;
        $item("#Text").text = itemData.text;

        $item('#Button').onClick((event) => {
            wixData.query("MYDATA")
            .find()
            .then( (results) => {
 let Lenght = results.items.length  
                console.log("Length = " + Lenght)
 if(Lenght > 0) {
 for (var i = 0; i < Lenght; i++) {
 let myItem = results.items[i].adjective; 
 
 if (Lenght === 1) {
                            console.log ("Adjective-found = " + myItem)
                        }
 else{ }
                    }
                } 
 else { }
            })
        })
    })
});

clementserie · November 23, 2020, 6:29pm

@russian-dima Thank you again for your help !

But it still dosen’t work, and the repeater dosen’t work any more…

Here a zoom :

So I tried to change a little bit the code.

Now the repeater work, but it still not saving the data …

Here the new code :

import wixData from 'wix-data';

var queryResults;

$w.onReady(async function () {
    queryResults = await wixData.query("MYDATA")
    .limit(6)
    .find();

  $w('#repeater1').data = queryResults.items;
});
 

export function repeater1_itemReady($item, itemData, index) {
 
     console.log("Index = " + index);
        console.log(itemData);
        $item("#Title").text = itemData.title;
        $item("#Text").text = itemData.text;

        $item('#Button').onClick((event) => {
            wixData.query("MYDATA")
            .find()
            .then( (results) => {
 let Lenght = results.items.length  
                console.log("Length = " + Lenght)
 if(Lenght > 0) {
 for (var i = 0; i < Lenght; i++) {
 let myItem = results.items[i].adjective; 
 
 if (Lenght === 3) {
      console.log ("Adjective-found = " + myItem)
      }
 else{ }
          }
       } 
 else { }
            })
        })
 
}

Thank you again in advance !!

CODE-NINJA · November 23, 2020, 8:50pm

@clementserie

Hello again.

This code here is tested and works perfectly for me. It does find what i am searching for in the DATABASE trough the repeater…

import wixData from 'wix-data';

var queryResults;

$w.onReady(async function () {
    queryResults = await wixData.query("MyData")
//    .limit(6)
    .find();

    console.log(queryResults.items)
    $w('#repeater1').data = queryResults.items;

    $w("#repeater1").onItemReady(($item, itemData, index) => {   
        $item("#Title").text = itemData.title;
 
        $item("#Text").text = itemData.text;
 

        $item('#button1').onClick((event) => {
            console.log ("INDEX: = " + index)
            console.log("TITLE: " + itemData.title)
            console.log("TEXT: " + itemData.text)
            wixData.query("MyData")
            .find()
            .then( (results) => {
 let Lenght = results.items.length  
                console.log("Length = " + Lenght)
 if(Lenght > 0) {
 for (var i = 0; i < Lenght; i++) {
 let myItem = results.items[i].adjective; 
                        console.log(myItem)
 
 if (i === index) {console.log ("Adjective-found = " + myItem)
                            $w('#Adjective').value = myItem
                        }
 else{ }
                    }
                } 
 else { }
            })
        })
    })
});

Tested it here, with this EXAMPLE… (take also a look onto CONSOLE) !

https://www.media-junkie.com/repeater-problem

clementserie · November 23, 2020, 10:25pm

@russian-dima Hi thank you very much for your answer and your test !!!

But it’s very frustrating because it still not working for me !!

The repeater works, but the database is not saved, and when I put an adjective and I click on the button, the cosole says me that :

I verificated all the things, it’s the same code than yours, and it seems all OK…

I guess I’m very close to the goal, maybe have you any idea what could make this not work ?

Than you again in advance !!!

Here the last code, just in case :

import wixData from 'wix-data';

var queryResults;

$w.onReady(async function () {
    queryResults = await wixData.query("MYDATA")
//    .limit(6)
    .find();

    console.log(queryResults.items)
    $w('#repeater1').data = queryResults.items;

    $w("#repeater1").onItemReady(($item, itemData, index) => {   
        $item("#Title").text = itemData.title;
 
        $item("#Text").text = itemData.text;
 

        $item('#button1').onClick((event) => {
            console.log ("INDEX: = " + index)
            console.log("TITLE: " + itemData.title)
            console.log("TEXT: " + itemData.text)
            wixData.query("MYDATA")
            .find()
            .then( (results) => {
 let Length = results.items.length  
                console.log("Lenght = " + Length)
 if(Length > 0) {
 for (var i = 0; i < Length; i++) {
 let myItem = results.items[i].adjective; 
                        console.log(myItem)
 
 if (i === index) {console.log ("Adjective-found = " + myItem)
                            $w('#Adjective').value = myItem
                        }
 else{ }
                    }
                } 
 else { }
            })
        })
    })
});

CODE-NINJA · November 23, 2020, 11:40pm

@clementserie

Yes you are close! Now you should get the last error by yourself.

Check everything step by step. The Console-Loging will help you out.

Index = 0 —> showing of the selected item-index works!
Lenght = 3 —> showing how many items are in your DB works!
Title & Text-Fields working!
The only thing which is not working is —> “ADJECTIVE” ! ? !

Could it be the permissions of your DB ? —> NOPE !
Could be something wrong with the setup of your DATASET? —> NOPE!
At which point starts the PROBLEM in the CONSOLE ? —> console.log(myItem)

Something wrong here ?

let myItem = results.items[i].adjective;

But why it found —> “green” ? —> DELAY-Problem ? → forget to use —> async await or .then(), or onReady somewhere?

I don’t know, check all these possibilities out.

EDIT: !!! ATTENTION !!!

Wait, first do this TEST…
Fill out your ADJECTIVES MANUALLY in your database.
Then run the code again. My example works not exactly the same way you expect it to work.

See the given DB-pic in the example. All the Adjectives are already in the DB.
You just click on the BUTTON —> “GO” and it starts.

I think you have tested it in another way. You typed in the adjectives into the input-field and then pressed the button, or something like that, right?

That means, the DATA is not ready, when you ask the DB for output, because the input is still in progress. ----> just some theoretical thoughts

clementserie · November 24, 2020, 8:40am

@russian-dima Hi, thank you (again and again)

You’re right, it’s not the same way to use… (I chose a basic example which doesn’t make too much sense, but it’s for afterwards applying the code in a case that makes more sense haha)

So, I will explain again (sorry for the misunderstanding) :

I have a database (’ MYDATA '), with nothing in ’ adjective ':

I create a repeater connected ( with query ) to my database (’ MYDATA ').

Something like that :

import wixData from 'wix-data';

var queryResults;

$w.onReady(async function () {
    queryResults = await wixData.query("MYDATA")
    .find();

    console.log(queryResults.items)
    $w('#repeater1').data = queryResults.items;

    $w("#repeater1").onItemReady(($item, itemData, index) => {   
        $item("#Title").text = itemData.title; 
        $item("#Text").text = itemData.text;
        $item("#Adjective").value = itemData.adjective;
    })
});

And now, what I want it’s :

I put “green”, in $item(“#Adjective”) of The dog item’s (it dosen’t matter if there is already any word here, people can erase it, and replace with a new one)
I click on the $item(“#Button”)
My data is automaticly updated to be like this :

And now my repeater will appear like this :

I hope this time it’s clearer, and I really hope it will be possible !

THANK YOU AGAIN IN ADVANCE RUSSIAN-DIMA !

CODE-NINJA · November 24, 2020, 9:30am

I will take a look today at the evening on it.

But all you need is to get the data of your input into the database first and then run my codepart.
You have already everything you need in your code.

CODE-NINJA · November 24, 2020, 4:53pm

Here we go again, check this out. . . . .

https://www.media-junkie.com/repeater-problem

import wixData from 'wix-data';

var queryResults;

$w.onReady(async function () {
    queryResults = await wixData.query("MYDATA")
//    .limit(6)
    .find();

    console.log(queryResults.items)
    $w('#repeater1').data = queryResults.items;

    $w("#repeater1").onItemReady(($item, itemData, index) => {   
        $item("#Title").text = itemData.title;
        $item("#Text").text = itemData.text;
        $item('#button1').onClick(async(event) => {
            console.log ("INDEX: = " + index)
            console.log("ID: " + itemData._id)              
            //console.log("TITLE: " + itemData.title)
            //console.log("TEXT: " + itemData.text)

 let toSave = {
 "_id":          itemData._id,
 "title":        itemData.title,
 "text":         itemData.text,
 "adjective":    $item('#Adjective').value,
            };
 await wixData.save("MYDATA", toSave)
                .then( (results) => {
                    $w('#dataset1').refresh()
                } )

 await wixData.query("MYDATA")
            .find()
            .then((results) => {
 let Lenght = results.items.length  
                console.log("Length = " + Lenght)
 if(Lenght > 0) {
/*
                    for (var i = 0; i < Lenght; i++) {
                        let myItem = results.items[i].title; 
                        console.log(myItem)
 
                        if (i === index) {console.log ("Right title found = " + myItem)
                            let toSave = await {"adjective":        $item('#Adjective').value,
 
                        };
                        await wixData.save("MyData", toSave)
 
 
 
                        //  $w('#Adjective').value = myItem
                        }
                        else{ }
                    }
*/
                } 
 else { }
            })
        })
    })
});

Good luck. Next time try to find your solution on your own xDDDD (there are so many ways how to solve a problem).

clementserie · November 24, 2020, 5:16pm

@russian-dima OMG !!!

THANK YOU SO SO MUCH !!!

It is perfectly working now !

I will edit my post, and put your answer !

Thank you again @russian-dima , you really helped me !!!

CODE-NINJA · November 24, 2020, 5:23pm

@clementserie
Party-time!

Topic		Replies	Views
Querying more than 1000 enteries. To push data in a repeater Ask the community code , question	1	111	September 28, 2022
Help in update a repeater Ask the community code , question	4	146	February 26, 2022
Retrieve items from query and assign to Repeater Ask the community code , question	9	608	August 28, 2020
Replacing items in a repeater Ask the community code , question	1	89	June 22, 2023
Can I update a repeater's data Ask the community code , wix-stores , question	6	1145	June 30, 2020

Update a database (using "query"), from a repeater's input {SOLVED}

Related topics