Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

Creating list of items from rest response


  • Guys, I know this is completely due to my own ineptitude using Angular but could you please point me in the right direction for how to create a list on a dashboard based on the response from the REST API? For example, if I want to query the file store and then create a list of items from that.

    Thank you thank you thank you


  • Jared's already got the maFileStore service. I take it you want to do it with the $http service to call the restful file API instead?
    No point in reinventing the wheel that's all.
    EDIT:
    Can you give more info on which restful call you're making here so I've got apples and apples?


  • There are certain limitations to the maFileStore such as you can't prevent a user from moving around in the filestore and that kind of thing. I was curious how I could access say /rest/v2/filestore/filstorename and just simply list the items there. If it's a pain in the butt it's fine but if it's a real simple thing I'm inclined to try it. ng-repeat already exists, if I knew how to make that http call and bind it to ng-repeat I'd be on my way. All examples on the interwebs for angular stuff assume you need to write your own controller and everything, which just confuses me even further :)


  • ok cool, that's easy enough, So you're going to restrict them to a given filestore directory?
    If so, let's get this ball rollin!


  • Alright! As promised, how to use what you need to get data from a specific filestore.
    I've utilised/hacked some of Jared's code (Sorry Jared!) to make a quicker turnaround.

    1. the /opt/mango/overrides/modules/mangoUI/web/dev/controllers/userFileStore.js component
    /*
    File:userFileStore.js
    Date:16/5/2019
    Author: Matt 'Fox' Fox
    Desc: quick file list generator of anchor links in angular js for @psysak
    */
    define(['angular', 'require'], function(angular, require) {
    
    function UserFilesController($http,maFileStore)
    {
    	var ctrl = this;
    	ctrl.fileStoreName = 'default';
    	
    	const fileStoreUrl = '/rest/v2/file-stores';
    	const fileStoreUrlSplit = fileStoreUrl.split('/');
    	
    	this.$onChanges = function(e)
    	{
    		if(e.fileStoreName && e.fileStoreName.currentValue!==undefined)
    		{
    			ctrl.fileStoreName = e.fileStoreName.currentValue.split('/');
    			getFileList();
    		}
    	}
    	
    	var toUrl = function(isDirectory) {
        	const parts = ctrl.fileStoreName.map(function(part) {
        		return encodeURIComponent(part);
        	});
        	let url = fileStoreUrl + '/' + parts.join('/');
        	if (isDirectory) {
        		url += '/';
        	}
        	return url;
        };
    	
    	var getFileList = function(){
    		
    		if (ctrl.fileStoreName.length < 1) {
    			throw new Error('Must specify the file store name');
    		}
    		const folderUrl = toUrl(true);
    		return $http({
    			method: 'GET',
    			url: folderUrl
    		}).then(function(response) {
    			ctrl.fileStoreList=response.data.map(function(file) {
    				// return new FileStoreFile(ctrl.fileStoreName[0], file);
    				return new maFileStore.newFileStoreFile(ctrl.fileStoreName[0], file);
    			});
    		});
    	};	
    				
    }
    		UserFilesController.$inject = ['$http','maFileStore'];
    	return	{
            bindings: {
    	   fileStoreName:'<'
            },
            scope: {},
            templateUrl: "/modules/mangoUI/web/dev/views/userFileStore.html",
            // you can inject services into the controller
            controller:('UserFilesController',UserFilesController)
    	};
    	
    	
    });//define
    
    1. /opt/mango/overrides/modules/mangoUI/web/dev/views/userFileStore.html
    <a ng-repeat="file in $ctrl.fileStoreList" class="md-icon-button md-button md-mangoLight-theme md-ink-ripple"  style="display:inline-block;min-width:300px;"  ng-if="!file.directory" download="" ng-href="file.url" ng-click="$ctrl.cancelClick($event)" aria-label="" href="{{file.url}}">
    {{file.filename}}
    		        		<md-icon class="md-mangoLight-theme material-icons" style="display:inline-block" role="img" aria-label="file_download">file_download</md-icon>
    		        		
    <div class="md-ripple-container"></div></a>
    
    
    1. /opt/mango/overrides/modules/mangoUI/web/dev/userModule.js
    define(['angular', 'require','./controllers/userFileStore.js'], function(angular, require,userFileStore)
    {
    var userModule = angular.module('userModule', ['maUiApp']);
    try {
    userModule.component('userFileStore', userFileStore);
    }catch(e){console.log(e);}
    });//define
    

    EDIT:
    Oops, forgot the component tag:

    <user-file-store file-store-name="'default'"></user-file-store>
    

    Let me know if you need further help.

    Fox


  • Sorry just realised the URl ain't working. Fixing it now..
    EDIT:
    done, sorry spent some time trying to make it look at least a little bit pretty!


  • WOW!! That's something! Thank you @MattFox , I'll give this a go.


  • Yep, please let me know how you get on, the feedback is always welcome.