How to make list of files in Angular with http method get

Question

I make my first steps into Angular and i am stuck with listing all files in ClientApp.

I have a Web Api on C# and GET request that shows all files in folder, but i dont know how to display that array in Angular.

[HttpGet]
    [Route("/getAllFiles")]
    public IEnumerable<string> GetAllFiles()
    {
        string folderName = "Upload";
        string webRootPath = _hostingEnvironment.WebRootPath;
        string newPath = Path.Combine(webRootPath, folderName);
        List<string> files = new List<string>();
        DirectoryInfo dirInfo = new DirectoryInfo(newPath);
        foreach (FileInfo fInfo in dirInfo.GetFiles())
        {
            files.Add(fInfo.Name);
        }
         return files.ToArray();
    }

I am trying to use this method, but i think i am wrong

return this.http.get(`https://localhost`)

You need to specify the server port and the endpoint: this.http.get('https://localhost:3000/getAllFiles'). (Assuming the port is 3000). — Tsvetan Ganev
– Tsvetan Ganev, Commented Jun 26, 2018 at 10:58
@TsvetanGanev i added url like this just for example, i think this is a bad code for my task — Artem Averin
– Artem Averin, Commented Jun 26, 2018 at 11:02
@Pac0 because i want to transfer an array and when i tried this , i have exception cannot GET — Artem Averin
– Artem Averin, Commented Jun 26, 2018 at 11:06
Your url is probably incorrect, as stated here in comments by Tsvetan and in my answer, — Pac0
– Pac0, Commented Jun 26, 2018 at 11:07

Pac0 · Accepted Answer · 2018-06-27 16:29:39Z

1

This is more a API server configuration ASP.NET routing problem, not really an Angular one.

PORT NUMBER

First, you need to know the port on which you API server runs.

The port is written like this : https://localhost:portnumber, like https://localhost:8080

CORRECT ROUTE

Secondly, in your C# / ASP.NET API code, your route is specified as [Route("/getAllFiles")] . This means that, if you want to go to this C# function, you need to attack this specific URL, like this :

https://localhost:portnumber/getAllFiles

SUBSCRIBE TO OBSERVABLE

(this does not seem to be your problem as per your last comment)

thirdly, the angular http service get method returns an Observable, which you should subscribe to of you want to acutally send a request.

const url = 'https://localhost:portnumber/getAllFiles';
this.http.get(url).subscribe(
    (result) => { 
         console.log(result); 
         // here you can assign the result to some private variable of your component,
         // and bind this variable to your template somehow
    },
    (error) => { console.log('an error occured!'); console.log(error); }
)

edited Jun 27, 2018 at 16:29

answered Jun 26, 2018 at 11:03

Pac0

23.4k9 gold badges76 silver badges85 bronze badges

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

2 Comments

Artem Averin Over a year ago

Ok i get it, but what should i transfer to html page?

Pac0 Over a year ago

you can save the result as a variable in your component (instead of console.log(), you can do this.myResults = result;), and in your HTML template use a *ngFor to create a list corresponding to your array.

Collectives™ on Stack Overflow

How to make list of files in Angular with http method get

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related