Web API returning list of files from folder via JSON

Question

I am trying to get a list of the jpg files in a particular folder, and return that list via json to an angular bootstrap carousel. The angular bootstrap part works fine if I hard code the list of files in json format and manually put that on the scope, but I can not figure out how return the data in the proper format from this web api controller. The problem is mainly with the foreach loop I believe. I've tried various methods with the @ symbol, double quotes, single quotes, etc. I am definitely stuck at this point. Thank you.

[Route("api/GetIncidentPhotos/{Id}/Incidents")]
public IEnumerable<string> GetIncidentPhotos(int Id)
{ 
    List<string> files = new List<string>();
    DirectoryInfo dirInfo = new DirectoryInfo(@"C:\SecurityManager\Photos\3\");

    foreach (FileInfo fInfo in dirInfo.GetFiles())
    {
        files.Add("{ 'path:' + '\\Photos\\3\\' + fInfo.Name + '}' ");            
    }

    return files.ToList();

}

Here is the html/bootstrap/angular markup that uses the list of files returned from the API call to build the image carousel.

<div class="carousel-inner">
    <div class="item" ng-class="{active:!$index}" ng-repeat="photo in photoPath">            
        <img src="{{ photo.path }}" class="img-responsive" style="border: solid 1px;">
    </div>
</div>

Answer 1

First of all, use a model class for your path objects so you don't have to rely on serializing to JSON by hand.

 [Route("api/GetIncidentPhotos/{Id}/Incidents")]
    public IEnumerable<FilePath> GetIncidentPhotos(int Id)
    {
        List<FilePath> files = new List<FilePath>();
        DirectoryInfo dirInfo = new DirectoryInfo(@"C:\SecurityManager\Photos\3\");

        foreach (FileInfo fInfo in dirInfo.GetFiles())
        {
            files.Add(new FilePath(){ path = @"\Photos\3\" + fInfo.Name});      
        }

        return files.ToList();
    }
    public class FilePath
    {
        public string path { get; set; }
    }