# MySQL to uibuilder - Parse array

**URL:** https://discourse.nodered.org/t/mysql-to-uibuilder-parse-array/42843
**Category:** General
**Created:** [18 March 2021 20:19 UTC](https://discourse.nodered.org/t/mysql-to-uibuilder-parse-array/42843 "2021-03-18T20:19:59Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![ChZeman](https://avatars.discourse-cdn.com/v4/letter/c/76d3ee/32.png) [@ChZeman](https://discourse.nodered.org/u/ChZeman)
#### Post date: [18 March 2021 20:19 UTC](https://discourse.nodered.org/t/mysql-to-uibuilder-parse-array/42843/1 "2021-03-18T20:19:59Z")

</div>

I've tried all sorts of things and I'm sure the solution is simple, but how do I go about looping through the array I'm getting in uibuilder so I can display a simple table? 🙂

Thank you,  
Chris

 ![MWSnap 2021-03-18, 14_40_38](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/6/46f3403a7c0cf6e5f48d5e1bab4cb44688987c29.png)

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [18 March 2021 20:31 UTC](https://discourse.nodered.org/t/mysql-to-uibuilder-parse-array/42843/2 "2021-03-18T20:31:59Z")

</div>

First you need to choose whether you want to send the whole thing through uibuilder in 1 go and process on the front end. Or whether you want to split it in Node-RED and send each entry separately.

In the example you show, you may as well send the whole output to your front-end.

Then in your index.js file, inside the uibuilder.onChange function, simply assign the array to a Vue data variable. You need to set the data variable up in the data section of the Vue app, assigning it an empty array so that Vue knows what to expect.

Armed with the data, you set up a b-table in your index.html file, assigning the data variable as the data for the table. Each array entry is treated as a row, each property in the row Object is treated as a column.

---

<div class="post-metadata">

### Author: ![ChZeman](https://avatars.discourse-cdn.com/v4/letter/c/76d3ee/32.png) [@ChZeman](https://discourse.nodered.org/u/ChZeman)
#### Post date: [19 March 2021 18:43 UTC](https://discourse.nodered.org/t/mysql-to-uibuilder-parse-array/42843/3 "2021-03-19T18:43:17Z")

</div>

Just to be sure I understand, do I iterate each array in the object or do I assign the entire object to the variable? I'm new to Javascript and Vue.

Thank you,  
Chris

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [19 March 2021 19:47 UTC](https://discourse.nodered.org/t/mysql-to-uibuilder-parse-array/42843/4 "2021-03-19T19:47:06Z")

</div>

> [@ChZeman](#):
>
> assign the entire object

The point of using something like Vue or REACT is to let the framework do all the hard bits.

> [@ChZeman](#):
>
> I'm new to Javascript and Vue.

Just have a play and follow the docs, you'll be fine.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [2 April 2021 19:47 UTC](https://discourse.nodered.org/t/mysql-to-uibuilder-parse-array/42843/5 "2021-04-02T19:47:18Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
