Return of Json

Question

I still don’t understand how JSON works, but here I have a Controller code that returns a JSON and I want to know how to display this data on the screen.

public ActionResult ShowPlaylists()
{
    if (string.IsNullOrEmpty(Session["token"].ToString()))
        return View("Index");

    var access_token = Session["token"].ToString();

    SpotifyService spotifyService = new SpotifyService();

    SpotifyUser spotifyUser = spotifyService.GetUserProfile(access_token);

    Playlists playlists = spotifyService.GetPlaylists(spotifyUser.UserId, access_token);

    return Json(playlists);
}

Answer 1

You are mixing the functions in the controller, to use json in a method you must use Jsonresult as the return type identifier. In Asp.net mvc there are two ways to make an Ajax call and with that have a record or a list of records in json, follow two examples that calls in the same controller so you have a better understanding:

Controller:

[HttpPost]
public async Task<JsonResult> JsonX()
{
    var frente = (from d in db.Imagem
                  orderby d.IdImagem
                  select new
                  {
                      d.IdImagem,
                      d.EnderecoImagem,
                      d.DescricaoLegenda,
                      d.CorFundoLegenda,
                      d.Descricao,
                      d.Largura,
                      d.Altura,
                      d.DescricaoAlternativa,
                  });
    return Json(await frente.ToListAsync());
} 

Ajax call option 1 - I use in situations I want to create html elements dynamically, mount a table, for example, and show to the user:

 <script type="text/javascript">            
    $.ajax({
        url: "/ControllerX/JsonX",
        type: "POST",
        ifModified: true,
        cache: true,
        async: true,
        dataType: "json",
        success: function (data) {
            if (data.length > 0) {
                var linha = "";
                for (i = 0; i < data.length; i++) {
                    linha += data[i] + "<br>";
                }
         }
    });
 </script>

Ajax call option 2 - I use more in situations I don’t want to reflesh on the whole page, for example, add an item in a cart in a virtual store. Anyway, depending on the form you do you can use both forms for the same purpose:

 <form class="form-inline" method="post" action="/ControllerX/JsonX" data-ajax="true" 
        data-ajax-failure="FalhaAjax" data-ajax-success="SucessoAjax">
        <div class="form-group">
            <div class="col-sm-6">
                <input class="input-sm form-control" type="submit" />
            </div>
        </div>
</form>

<script type="text/javascript">         
   function SucessoAjax(data) {
        if (data.length > 0) {
                var linha = "";
                for (i = 0; i < data.length; i++) {
                    linha += data[i] + "<br>";
                }
         }
   }
   function FalhaAjax(data) {
        alert("erro");
   }
</script>