How to load and display json files list from folder automatically in angularjs or nodejs?

Question

I am doing one task like I am loading sample json files data list in dropdown box and it's data is displaying in the textarea for the selected json file from dropdown list(It's working fine).

But my requirement is: I want to load all these json files automatically from a folder(say: I have a test folder and it is having all these json files) instead of adding all these files separately with $http.get() in the code manually in my application, and these files list should be populated in dropdown box automatically, so if I select any json file from that dropdown list then it's data should be displayed in the textarea.

Please note that if I add any few more json files in the same test folder in the future then those list also should be populated in the dropdown box automatically. Please let me know that how can I do this ?

Sample Plkr is created.

Angular is a client side library. Getting files from file directories is a backend capability. You can read files from directory at backend and send the list of files at frontend as options in select list. at the front end, you need to write only one common get request for getting the data of selected file. — Devidas Kadam
– Devidas Kadam, Commented Sep 29, 2016 at 11:05
@DevidasKadam, can I know any examples on it please ? as I am new to node.js. — Dhana
– Dhana, Commented Sep 29, 2016 at 11:18

Ravi Teja · Accepted Answer · 2016-09-29 12:10:32Z

-1

plunker

<body ng-controller="MainCtrl">
    <p>Select json from drowdown: </p>
    <select name="jsonfilenames" ng-model="selectedjson" ng-change="optionChanged()">

     <option ng-repeat= "file in JSONFiles track by $index" value={{file}}>test{{$index+1}}</option>

   </select>


   <div style="display: flex">
    <div class="container">
        <h4 for="textarea1">Selected json data:</h4>
        <textarea id="textarea1" style="width: 100%; height: 100%;">
       {{textAreaData}} </textarea>
    </div>
</div>
</body>

Have a ng-repeat, which track JSONFiles array and updates select control options each time array is updated

edited Sep 29, 2016 at 12:10

answered Sep 29, 2016 at 11:20

Ravi Teja

1,1058 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dhana Over a year ago

I am getting already selected json data in the textarea box from dropdown, But I need it automatically load all my json files list and if I select then selected json data should be displayed in textarea box.

Ravi Teja Over a year ago

Try this plnkr.co/edit/GmbtthTWkqdGHldgmJNK?p=preview. First it adds 3 files then after 2 seconds it adds a forth file. You Can keep adding options and JSON files as and when you get then from backend.

Dhana Over a year ago

Thanks for your reply. Yes from UI wise this plnkr is perfect and the remaining is how to list out the files only instead of giving manually ?(either can be from folder with node or angularjs )

Ravi Teja Over a year ago

From UI lets say every 3 seconds you have to send a request to backend. You should have a backend implementation which look into folder and retrieves all the JSON files and returns them back to UI. Then you have to update the JSONFiles array

Dhana Over a year ago

I have one query, May I know that you are available, I am getting my files list from my back-end, but I am not sure how can I display those in my UI ? Created at: stackoverflow.com/questions/39849899/… Please let me know and Thanks in advance.

Collectives™ on Stack Overflow

How to load and display json files list from folder automatically in angularjs or nodejs?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related