使用ASP.NET Web API将JSON转换为HTML表

Question

I have a functioning web api using .NET Web API. The return is JSON data via the api url call /api/v1/Au/Get. Right now I don't know how to feed that data into something useful as this url path is my api call and not associated with a view. How do I return data that I can pass into an HTML table or list? I have been researching a lot and haven't come up with anything too useful.

this is the form that makes the call

<form class="rhc" method="POST" action="/api/v1/Au/Get">
    <input type="text" name="twitter_handle" class="form-control" placeholder="Twitter" />
    <span class="input-group-btn">
        <button class="btn btn-default" type="submit">
            <span class="ladda-label">Free Preview</span>
            <span class="ladda-spinner"></span>
        </button>
    </span>
</form>

The returned JSON contains a lot of data and the raw string is all that appears on the page after the submission of the form is made. Any help on this would be so much appreciated.

Answer 1

The answer from the Web API is JSON, which is a JavaScript object serialized as string (JSON is JavaScript Object Notation). What you need to do is to

1. get the JSON answer form the server
2. convert it to a JavaScript object
3. and use some kind of template or MV* framework to show it easyly in a table.

For 1, you need to make the query using AJAX to get the JSON response.

For 2 you can use the JSON functionality of the Browser ( JSON.parse ) or a JSON library if the browser is too old (for example JSON 3 ).

However, if you use a framework like jQuery to make the Ajax requests, you can directly get the JavaScript object.

For 3, you can use JavaScript template libraries like Handlebars or Mustache , or an MV* library like the MVVM Knockout.JS

Pseudocode:

$.post('service url', {twitter_handle: 'value'}).done(function(data) {
   // Use any of the template or MV* solution to generate the HTML
   // from the data object and the template
});

Alternatively, you can use any of the available grid JavaScript libraries, like the jQuery plugins datatables or SlickGrid or jqGrid .

As you can see, there aa lot of options, but the basic idea is explained in the 3 points at the beginning of this answer.