List of files in the dashboard (problem)

Hi, i use two nodes to (try to) display files of a folder (fs-file-lister) in the dashboard with a list (node-ui-list). I get the files list in a debug windows, so the first node works, but my list remains empty in the dashboard although a column has been created in the node.
If someone has an idea...
Thx

Can you export your flow and attach it to a reply.

Hi, and thank you for your answer. I just need to clarify that i'm a newbie so be indulgent :slight_smile:

[
    {
        "id": "6066025ef9164372",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "98a0c2218af91ead",
        "type": "inject",
        "z": "6066025ef9164372",
        "name": "",
        "props": [],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 310,
        "y": 180,
        "wires": [
            [
                "da1bd2de8dd92cad"
            ]
        ]
    },
    {
        "id": "da1bd2de8dd92cad",
        "type": "fs-file-lister",
        "z": "6066025ef9164372",
        "name": "",
        "start": "/data",
        "pattern": "*.geojson",
        "folders": "*",
        "hidden": false,
        "lstype": "files",
        "path": true,
        "single": true,
        "depth": 0,
        "stat": false,
        "showWarnings": true,
        "x": 500,
        "y": 180,
        "wires": [
            [
                "3df651d3e8acec22",
                "39f48e0738b6efc5"
            ]
        ]
    },
    {
        "id": "3df651d3e8acec22",
        "type": "debug",
        "z": "6066025ef9164372",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 730,
        "y": 120,
        "wires": []
    },
    {
        "id": "39f48e0738b6efc5",
        "type": "ui_table",
        "z": "6066025ef9164372",
        "group": "296d76c1a5932d78",
        "name": "List",
        "order": 0,
        "width": 0,
        "height": 0,
        "columns": [
            {
                "field": "Nom",
                "title": "Nom",
                "width": "",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            }
        ],
        "outputs": 1,
        "cts": true,
        "x": 850,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "296d76c1a5932d78",
        "type": "ui_group",
        "name": "test",
        "tab": "dd5c455e543d9db0",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "dd5c455e543d9db0",
        "type": "ui_tab",
        "name": "test",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

Ok, the ui_table node needs to have an array of objects where the 'key' will be the column header. The fs-file-lister node is returning an array of filenames. So what has to happen is the array has to be transformed into an array of objects.

I've added a function node with some code (and lots of comments) to do exactly that. See if it makes sense to you. I'm sure there are other ways to do what the function node is doing (using jsonata) but I thought this would be easiest for you to understand

[{"id":"98a0c2218af91ead","type":"inject","z":"6066025ef9164372","name":"","props":[],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":210,"y":180,"wires":[["da1bd2de8dd92cad"]]},{"id":"da1bd2de8dd92cad","type":"fs-file-lister","z":"6066025ef9164372","name":"","start":"/Users/Paul/test","pattern":"*.txt","folders":"*","hidden":false,"lstype":"files","path":true,"single":true,"depth":0,"stat":false,"showWarnings":true,"x":380,"y":180,"wires":[["3df651d3e8acec22","052de3e5c70adba7"]]},{"id":"3df651d3e8acec22","type":"debug","z":"6066025ef9164372","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":590,"y":160,"wires":[]},{"id":"39f48e0738b6efc5","type":"ui_table","z":"6066025ef9164372","group":"296d76c1a5932d78","name":"List","order":0,"width":0,"height":0,"columns":[],"outputs":0,"cts":false,"x":850,"y":220,"wires":[]},{"id":"052de3e5c70adba7","type":"function","z":"6066025ef9164372","name":"","func":"// put the name of the column header here\nlet column_name = \"file name\"\n// move msg.payload inyo a variable\nconst arr = msg.payload;\n\n// create a output array\nlet arr_out = []\n//create an object to hold teh key/value pair of the object\nlet file_out = {};\n\n// loop thru the file array to build the key/value for each one\nfor(var i = 0; i < arr.length; i++){\n    // create an object for this file\n    // NOTE!!! put the name of the column header here\n    file_out = {'file name': arr[i]}\n    // put the file key/value object into the array \n    arr_out[i] = file_out\n}\n\n// set msg.payload to the new array\nmsg.payload = arr_out\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":600,"y":220,"wires":[["39f48e0738b6efc5"]]},{"id":"296d76c1a5932d78","type":"ui_group","name":"test","tab":"dd5c455e543d9db0","order":1,"disp":true,"width":"13","collapse":false,"className":""},{"id":"dd5c455e543d9db0","type":"ui_tab","name":"test","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

[EDIT: note you will need to change the fs-file-in node back to your configuration]

Thank you for your solution. It works perfectly. Next challenge for me : use this node : node-red-node-ui-list for listing my files . The previous one was ui-table i made a mistake...

There are example flows showing different ways you can use the ui-list node.

  1. go to the hamburger menu at the upper right of the editor

Screen Shot 2022-01-12 at 8.13.26 PM

  1. click on Import and a window will open. Click on `Examples':

  2. scroll down to the node-red-node-ui-list:

  3. Import the `example' flow:

and you will have several examples you can look at.

I recommend watching this playlist: Node-RED Essentials. The videos are done by the developers of node-red. They're nice & short and to the point. You will understand a whole lot more in about 1 hour. A small investment for a lot of gain.

Thank you so much :ok_hand:

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