Confirming the existence of a folder with AngularJS

Currently, I am attempting to determine if a folder exists so that I can make decisions on which files to include using ng-include.

This is what I have so far:

$scope.isVisible = {
        buttons: checkForClientOverwride('buttons'),
        itemList: checkForClientOverwride('itemList'),
        // ... more variables
        onLoad: checkForClientOverwride('onLoad'),
        configurationManager: checkForClientOverwride('configurationManager')
    };

function checkForClientOverwride(fn){
        var result = {
                url: 'app/modules/functions/' + fn + '/' + fn + '.html'
            },
            clientPath = 'app/modules/client code/' + fn + '/' + fn + '.html';

        if(view.viewFunctions[fn] === undefined){
            return false;
        }

        $http.get(clientPath)
            .then(function(response){
                console.info('response : ', clientPath, response);
                result.url = clientPath;
            })
            .catch(function(error){
                console.info('error : ', clientPath, error);
            })
            .finally(function(){
                console.info('result : ', result);
                return result;
                $scope.isVisible[fn] = result;
            });
    };


Here is how the view is set up:

<div ng-if="isVisible.itemList" ng-include="'app/modules/functions/itemList/itemList.html'"></div>
<div ng-if="isVisible.inputFields" ng-include="'app/modules/functions/inputFields/inputFields.html'"></div>
<div ng-if="isVisible.configurationManager" ng-include="{{ isVisible.configurationManager.url }}"></div>
<div ng-if="isVisible.calculate" ng-include="'app/modules/functions/calculations/calculations.html'"></div>


This is my tree structure:

+ app
+--+ modules
|  +--+ functions
|  |  +--+ buttons
|  |  |  +--- buttons.html
|  |  +--+ itemList
|  |  |  +--- itemList.html
|  |  +--+ onLoad
|  |  |  +--- onLoad.html
|  |  +--+ configurationManager
|  |  |  +--- configurationManager.html
|  +--+ client code
|  |  +--+ configurationManager
|  |  |  +--- configurationManager.html
+--- core.js
+--- route.js
+ index.html


The current code checks if a file exists, but I am looking for a way to check if a folder exists. Also, is there a method to load this synchronously?


EDIT

When attempting to utilize $http.get on the folder app/modules/client code, I encounter the following error in my console.log:

config: Object
data: "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ↵<html xmlns="http://www.w3.org/1999/xhtml"&...

Answer №1

Many have advised against searching for server side folders from the client side, but thanks to @deceze's suggestion, I was able to come up with a solution:

function initialize(){
        var functions = ['buttons', 'itemList', 'allowPrint', 'datePicker', 'pickWeek', 'calculate', 'summarize', 'dropdown', 'inputFields', 'onLoad', 'configurationManager'],
            visible = {};

        for(var i = 0; i < functions.length; i++){
            var fn = functions[i];
            checkForClientOverwride(fn);
        }

        $scope.isVisible = visible;
    };

    function checkForClientOverwride(fn){
        var baseUrl = 'app/modules/functions/' + fn,
            clientPath = 'app/modules/client code/' + fn;

        if(view.viewFunctions[fn] === undefined){
            return undefined;
        }

        $http.get(clientPath)
            .then(function(response){
                baseUrl = clientPath;
            })
            .catch(function(error){
                if(error.status === 403){ // Folder found but access is denied
                    baseUrl = clientPath;
                }
            })
            .finally(function(){
                var result = {
                    url: baseUrl + '/' + fn + '.html'
                };

                $scope.isVisible[fn] = result;
            });
    };


During our folder search, we encountered a 403 - access forbidden error, indicating that the folder does exist but we lack permission to access it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determine the exact location where the mouse was clicked on a webpage containing an iframe

I am trying to retrieve the mouse position on my HTML page, but I am encountering some issues. Here's what I have so far: document.onclick = function(click) { if (click.clientX<340){ myControl.inputs.selection = false; btnRotate.remove ...

Modify the PrimeFaces dialog to be modal using client-side code

One of my primefaces dialogs is set up like this: <p:dialog widgetVar="dlg" width="320" height="220" modal="false" closable="false" showHeader="false" resizable="false" position="right,top"> I am looking to make this dialog modal if a certain eleme ...

display the HTML form when the page is clicked

Trying to implement an onclick method for selecting form types. I have multiple form types available - example here Clicking on one submenu should open up the desired form type directly below the menu How can I dynamically load a form based on the select ...

Display all the names of the files from various file inputs in a unified notification

I have developed a function that checks if the selected file names already exist in the database. It currently alerts a message for each file name found in the database, which can be overwhelming with multiple files. I am looking for suggestions on how t ...

Finding the height of concealed content within a div using the overflow:hidden setup

I'm trying to create a div that expands when clicked to reveal its content. I've taken the following steps so far: Established a div with overflow:hidden property Developed a JavaScript function that switches between a "minimized" and "maximize ...

Understanding JavaScript for Reading a Website's "Local Storage"

Can the local storage of one website be accessed by a different domain, or is it restricted to only the domain that saved it? ...

Display an image with HTML

My current project involves creating a chrome extension that will display a box over an image when hovered, while also zooming the image to 1.5 times its original size. In my research, I came across a similar example. .zoomin img { height: 200px; wi ...

Retrieving information from a hyperlink or input field within a list using jQuery

I'm working with the following script : <script> $().ready(function(){ $('.request_list').click(function(){ requesting_dept = $('#requesting_department_name').val(); alert(requesting_dept); $. ...

Solving issues with Angular4 Router changes

I'm attempting to chain the router resolver for my application. Below are my Router options: { path: '', component: AdminComponent, resolve: [ SessionResolve, LocaleResolve ] } The desired flow is to first call S ...

Can we enhance this JavaScript setup while still embracing the KISS principle (Keep it simple, Stupid)?

I have completed the following tasks: Ensured all event handlers are placed inside jQuery DOM ready to ensure that all events will only run Defined a var selector at the top of events for caching purposes Please refer to the comments below for what I be ...

Is it possible to prevent users from clearing data in an Android application when using Ionic framework?

Currently, I am developing an app using the Ionic framework. The data is being stored on the mobile device via SQLite, but there is a concern that users can easily clear this data by clicking on the "clear data" button in the application info settings. The ...

Is there a way to send a non-JSON value to an angular.js http.post function?

Struggling to send two parameters using the HTTP POST method in Angular.js. Here is the code I have implemented: Controller var installerApp = angular.module('installerApp', []); installerApp.controller('InstallerCntlr',function($scop ...

Start up Angular with a Fire $http.get when the page loads

I am facing an issue where my $http.get() request is firing after the home page has already loaded. How can I ensure that the request fires before the page loads so I can utilize the returned data on the page? Here is a snippet of the routing code: var l ...

What are the steps for generating website endpoints using search query outcomes?

I am currently working on a ReactJS website as a part of my web development bootcamp project. One interesting feature I have incorporated is a search functionality that uses Flask routes to connect ReactJS endpoints (../Language.js) with my Sqlite3 databa ...

Struggling with rendering an HTML element utilizing jQuery's attribute functionality, encountering issues exclusively in Internet Explorer version

I need assistance with generating and inserting an HTML element using jQuery. In my code, I am including a class attribute for the element as shown below: jQuery('<li></li>', { class: "myClass" }); However, when testing in IE ...

JQuery transmits null values

I have been troubleshooting my code for what feels like forever, but I just can't seem to find the error... My current project involves experimenting with JQuery and AJAX. I created a simple form with a textarea for submission. The form works perfect ...

Can you explain the distinction between sockets and proxy passing in nginx compared to uwsgi?

My latest project setup involves flask, uwsgi, and nginx. The backend solely serves json data through an API, while the client side takes care of rendering. Typically, my Nginx configuration looks like this: My usual setup (with basic proxy passing): se ...

Converting a Jquery object into a Javascript object

Can someone help me decipher this piece of code? //... obj.dd.on('click', function(event){ $(this).toggleClass('active'); return false; }); //... $(function() { var dd = new DropDown( $('#dd') ); $(doc ...

Implement a redux-form within a react-bootstrap modal

I am facing a challenge with incorporating a multipage 'redux-form' form into a react-bootstrap modal. My goal is to have the form displayed within the modal overlay when the modal is opened. How can this be achieved? The code below is producin ...

How can I unselect a radio button by double clicking on it?

I am in need of a specific feature: When a user clicks on a radio button that is already checked, I want it to become unchecked. I've attempted to implement this code but unfortunately, it has not been successful. $(document).on('mouseup' ...