Format to return data from C# Web Api to Angular ng-repeat

Question

I would like to return back from my API a list of all the products that were updated by the API. The API is called by some AngularJS code that uses a promise that returns data. In what format should I build a string of Products on the server-side that can be interpreted by Angular on the client-side?

C#

 string results = "WidgetA - $12, WidgetB - $22 - ....":
 return Request.CreateResponse<string>(HttpStatusCode.OK, results);

HTML

<div ng-repeat="model in data ">
    {{model.ProductName  + '  ' + model.ProductPrice + ' imported'  }}
</div>

Angular

.then(function (data) {
    // promise fulfilled
    if (data === '') {
        alert("No Data Returned");
    } else {
        // Data is returned
        // How to get it in model that can be iterated over
    }
}

Ideally I would like to end up with a list a Products and Prices that were updated.

David · Accepted Answer · 2016-11-03 16:25:59Z

2

The problem is that you're returning a string. Which is just, well, a string. But you want to return an array of something.

So return an array of something:

var results = new List<Product>
{
    new Product("WidgetA", 12.0),
    new Product("WidgetB", 22.0)
};
return Request.CreateResponse<IEnumerable<Product>>(HttpStatusCode.OK, results);

(Assuming you've created a Product class, of course. Construct that however you like.)

Then client-side:

.then(function (data) {
    // promise fulfilled
    if (data.length === 0) {
        alert("No Data Returned");
    } else {
        // "data" is an array of products here
    }
}

Structured and defined models are generally easier to work with than string blobs that would need to be parsed and interpreted anywhere you want to use them.

answered Nov 3, 2016 at 16:25

David

221k42 gold badges245 silver badges337 bronze badges

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

2 Comments

webworm Over a year ago

Thanks David! That makes a lot of sense.Given that array returned as data how would I iterate over that in Angular in the ng-repeat?

David Over a year ago

@webworm: I'm not entirely an expert on Angular, but I suspect the view would just be binding to the model, no? I found a simple example here: jsfiddle.net/austinnoronha/RkykR Basically data is your array, just as m is an array in that example.

Collectives™ on Stack Overflow

Format to return data from C# Web Api to Angular ng-repeat

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