Interact with container/repeaters

[jahir_salgado]

Hi, everyone

Hoping you all are doing well

I’ve got a repeater that is connected to different items, as you can see the containers have only three things:

• The name of the item (it is connected to the database)
• The image of it (it is connected to the database)
• A free text (this is NOT connected to something)

When I try to apply code to the “Free text” (as I said before, it is not connected to something) nothing happens

Is it there a way to interact with the free text and change it using code? Obviously, the code will affect all the “Free text” from all the containers in that repeater

Thank you so much for your time, and hope there’s a way to achieve this

[russian-dima]

What would be the code?
What should do your code with the free text?
Why not just connect this field to your database aswell and work from database?

You want to do a calculation?
Step-1: Write your calculation code.
Step-2: Let your code save the data into your database.
Step-3: Get the results automatically from DATABASE by the help of your already existing DATASET.

[jahir_salgado]

Hello, Code-Ninja!

Hoping you’re doing well!

Yeah! I want to do a calculation

I’ve got another Database (a different one) where those items have entries (like an inventory, there’re items in and items out)

I get your point, this one:

You want to do a calculation?
Step-1: Write your calculation code.
Step-2: Let your code save the data into your database.
Step-3: Get the results automatically from DATABASE by the help of your already existing DATASET.

(If I didn’t misunderstood, in a nutshell what you said was: do your calculation, save it in the database and let it be shown in your repeater,) And yeah, that’s the best I can do in this situation

Here my new question is: how can I apply that calculation code to EVERY item I got?

Let’s imagine I have item A , and then with code I calculate the total of items A I have, and save it to the Database. What can I do if I want the code to repeat itself and continue then with Item B, C … until it finishes saving the total of every single item I’ve got?

Thank you so much for your time and answer!

[russian-dima]

(If I didn’t misunderstood, in a nutshell what you said was: do your calculation, save it in the database and let it be shown in your repeater,) And yeah, that’s the best I can do in this situation

Abssolutely correct!

You must always imagine, that your repeater is working with the following structure…

ARRAY including several OBJECTS, which looks for example like…

[
  {
    "_id": "1",
    "firstName": "John",
    "lastName": "Doe",
    "image": "http://someImageUrl/john.jpg"
  },
  {
    "_id": "2",
    "firstName": "Jane",
    "lastName": "Doe",
    "image": "http://someImageUrl/jane.jpg"
  }
]

All these informations you are able to find inside the REPEATER-INTRODUCTION.

Introduction - Velo API Reference - Wix.com

Everytime when you are working with an -->ÁRRAY–> you should know, that it is very easy to loop through an → ARRAY.

What is an ARRAY and how is it constructed???

let myArray = []; <-- here you are defining your new ARRAY.

Now, how we can fill an ARRAY with data?

There are several options to do that, for example…

myArray.push("newValue")

RESULT would be —>

["newValue"]

Let’s add another value to the Array…
myArray[1] = “xxx”;

RESUT —>

["newValue", "xxx"]

As you can see, i used two different methods to fill the ARRAY.

But what you need is to loop trough an ARRAY and for this you also have different options, by using for example a for-each-loop or an ordinary for-loop, or maybe even a while-loop.

Let’s use a for-each-loop.

myArray.forEach((element)=> {
    console.log("Element: ", element);  
});

So if your ARRAY do have the followind data–> [aaa, bbb, ccc, ddd, eee, fff, ggg]
…and you would do the loop shown above???

What you would get inside of your console? Right, you would get…
aaa
bbb
ccc
ddd
eee
fff

…because it would loop through all the given data inside your ARRAY and you would get a console.log for each of the item-data inside the ARRAY.

So now try to do the same, but this time you will have → OBjeCTS inside your ARRAY ← it will be exactly the situation what you need, because a REPEATER and also the Wix-Data-query is working with such a data-format.

Try to loop through this data-array-object…

[
  {
    "_id": "1",
    "firstName": "John",
    "lastName": "Doe",
    "image": "http://someImageUrl/john.jpg"
  },
  {
    "_id": "2",
    "firstName": "Jane",
    "lastName": "Doe",
    "image": "http://someImageUrl/jane.jpg"
  }
]

… and try to get all the —> firstNames <— only.

But normaly you do not have to do all these steps, because all what you need, should already be inside the RESULT-DATA, you get from your query.

[russian-dima]

So back again one more time.

• The name of the item (it is connected to the database)

• The image of it (it is connected to the database)

• A free text (this is NOT connected to something)

So let’s make clear the following things.

1. You are working on a dynamic or non-dynamic page?
2. Your repeater is placed on a dynamic or non-dynamic page?
3. Your repeater is connected with your database trough a dataset?
4. The name element inside your repeater is connected to your dataset (inside property-panel)
5. Your image-element inside your repeater is connected to your dataset (inside property-panel).
6. Your FREE-TEXT is connected to anything . → of course without any functionality, yet.

When I try to apply code to the “Free text” (as I said before, it is not connected to something) nothing happens

Where is your code?

Is it there a way to interact with the free text and change it using code?
Yes there is a way, there are even several ways of how to solve it, but to find the right solution for your issue will depend on your exact project-setup.

-What to calculate?
-Where to get data from for calculation ?

Obviously, the code will affect all the “Free text” from all the containers in that repeater

Describe a detailed flow of all actions…

1. When exactly starts your process? User clicks on a button? Where this button can be found → inside repeater / outside-repeater?
2. Ok, we know you want to loop trough all of the repeater, items and doing some calculations?
3. We also know, that some of your elements are connected with your dataset and some not.
4. How does look your database?
5. How does look like your current working/not working code?

Maybe this little code-snipet will help you out…

$w.onReady(function () {
    $w("#dataset1").onReady(()=>{
        const data = $w("#repeater1").data;
        console.log("Repeater-Data: ", data);
    });

    $w("#container1").onClick((event) => {       
        let $item = $w.at(event.context);
        let clickedItemData = $item("#dataset1").getCurrentItem();
        console.log("Data: ", clickedItemData);
    });
});

Modify the element IDs for your own needs.
Inspect the OUTPUTS inside ----> CONSOLE.

What next?

[jahir_salgado]

Hola, Code-Ninja!

Happy to see you again, sorry for the late response! It really surprises me how creative you can be with this kind of situations

Before starting, I’d say that I liked too much your idea of doing the calculation and then placing that result in the database. Something like:

{
Item1
Calculates total of Item1
Saves that total in the row of Item1
}

Loop

{
Item2
Calculates total of Item2
Saves that total in the row of Item2
}

Loop…

Until it finishes all items in list

---

1. You are working on a dynamic or non-dynamic page?
   It is a dynamic page

2. Your repeater is placed on a dynamic or non-dynamic page?

It is a dynamic page

3. Your repeater is connected with your database trough a dataset?

Yes, it is

4. The name element inside your repeater is connected to your dataset (inside property-panel)

Yes, they are

5. Your image-element inside your repeater is connected to your dataset (inside property-panel).

Yes, it is

6. Your FREE-TEXT is connected to anything. → of course without any functionality, yet.

That’s right

---

Where is your code?

Okay, I’ll show you my code for calculating the result I want (you’ll know more about how I calculate this and the explanation of it in the next questions):

export function columnStrip3_viewportEnter ( event ) {

let  total ; 
let  filter  =  wixData . filter (); 

total  =  "Item1" ; 

if  ( total ){ 
    filter  =  filter . eq ( "material" , "Item1" );   
} 

wixData . aggregate ( "Inventario" ) 
. filter ( filter ) 
. sum ( "cantidad" ,  "total" ) 
. run () 
. then  (( result ) => { 
    var  income  =  result.items [ 0 ]. total 
    $w ( '#total' ). text  =  income . toLocaleString () 
}) 

}

(I know, I’m not the best at coding, but this is what I do and it works )

• The database “Inventario” is where all movements are saved (items in, items out)

• This code gives me only the total of Item1 available (and shows it in $w ( ‘#total’ ). What I want is to save that result (in column “Stock”, we’ll see it later) and then, automatically, loop to Item2, Item3…

-What to calculate?

In a nutshell, the total of items in an inventory. For example, (there were +3 Items1, and -1 Item1, so the result I want to save is 2, that is the total of Item1 I have available)

-Where to get data from for calculation ?

Okay, I’ve got 2 databases. In the first one you can see the movements (items in, items out) of my materials, this is the database “Inventario” :

(as you can see, here I save the movements)

Okay, then

The second database is the one where all my items are saved:

This is “Item1”, “Item2”, “Item3”… The are ordered from A to Z

This database is also the one that is connected to the repeater. So, I the empty column, named “Stock”, I want to save there the total available, let’s use the previous example, there were +3 Items1, and -1 Item1, so the result I want to save is 2, that number (number two) is the one that has to be saved in the column “Stock”, when it finishes saving, so it goes for Item2, Item3…

1. When exactly starts your process? User clicks on a button? Where this button can be found → inside repeater / outside-repeater?
   I’d like the trigger to be a “viewportEnter”, outside-repeater

2. Ok, we know you want to loop trough all of the repeater, items and doing some calculations?
   Well, yeah, every item has its own calculation (the result of Item1, Item2…)

3. We also know, that some of your elements are connected with your dataset and some not.
   That’s right. What I’m thinking (using your point of view that I liked too much) is to connect the no connected elements (“free text”) to the “Stock”, that is the result that has to be shown

4. How does look your database?
   It is already shown

5. How does look like your current working/not working code?
   It is already shown

Thank you so much for your time and answer!