Table of contents
One of our needs in the applet is to display a two-dimensional array. A two-dimensional array means that the elements in the array are also arrays. For example, we take a recipe as an example. The recipe has a name and ingredients, and the ingredients are another array. If We can construct data like this
[
{
name:'凉拌茄子',mix:['茄子','蒜末','小米椒','葱花']},
{
name:'清炒丝瓜',mix:['丝瓜','盐','糖']}
]
After defining the data, let's take a look at how the two-dimensional array is displayed in the low-code tool
1 Define variables
If we want to display data, we must first store the data in variables, open our console, create a blank application
type, select Web (H5/PC)
, and then create a custom variable in the code area of the application editor
. Select array for the variable type, then select JSON for the data model, change the variable name to menu, and paste the data we constructed into the default value
2 outer loop
We need to use loop nesting to display two-dimensional arrays. First, drag in a loop display component
and click on the fx of the loop data on the right, and we bind it to the menu variable we created.
The text component automatically recognizes the name attribute
3 inner loop
In the outer loop, we display the name of the recipe, and in the inner loop, we display the ingredients, and then place a loop display component under the text component. At this time,
we need to find our mix attribute from the elements in the outer loop and bind it to the inner layer. In the loop,
the loop display component requires the type of the bound object to be [{}], and the element of the array is an object, so we use the map method of the array to repack it
$w.item_repeater1.mix.map(item=>{
return{
name:item}})
In order to make the ingredients and our recipe name have a certain level, set a certain padding for the text component of the inner loop
Summarize
When displaying a two-dimensional array, it is mainly realized by loop nesting. The loop in the low-code tool is completed using components. Pay attention to the level of components, and certain data processing is required when the inner loop is executed. As long as the two-dimensional array display is handled well, it is relatively simple, learn to practice according to the examples.