Symfony 4: JSON API Endpoint

Video loading...

  • 0:04
    Symfony 4: JSON API Endpoint with Ryan Weaver
  • 0:07
    When we click the heart icon,
  • 0:09
    we need to send an Ajax request to the server
  • 0:12
    that will eventually update something in a database
  • 0:15
    to show that we liked this article.
  • 0:18
    That API endpoint also needs to return the new number of hearts
  • 0:23
    to show on the page,
  • 0:25
    you know, in case 10 other people liked it since we opened the page.
  • 0:31
    In ArticleController, make a new public function toggleArticleHeart.
  • 0:38
    Then add the route above, @Route (“/news/slug)
  • 0:45
    to match the show URL, then /heart".
  • 0:50
    Give it a name immediately, "article_toggle_heart".
  • 0:55
    I included the slug wildcard in the route
  • 0:58
    so that we know which article is being liked.
  • 1:02
    We could also use an ID wildcard, once we have a database.
  • 1:07
    Add the corresponding slug argument, but since we don’t have
  • 1:11
    a database yet, I’ll add a TODO actually heart/unheart the article!
  • 1:20
    We want this API endpoint to return JSON, and remember,
  • 1:24
    the only rule for a Symfony controller
  • 1:27
    is that it must return a Symfony response object.
  • 1:31
    So, we could literally say, return_new Response
  • 1:35
    (json_endcode ([‘hearts’ => 5])),
  • 1:40
    but that’s too much work.
  • 1:42
    Instead, say return_new JsonResponse
  • 1:47
    ([‘hearts’ => rand(5,100]));
  • 1:52
    There’s nothing special here.
  • 1:54
    JsonResponse is a sub-class of response.
  • 1:58
    It calls Json_encode for you and also sets the content
  • 2:03
    type header to application/json,
  • 2:06
    which helps your JavaScript understand things.
  • 2:09
    Let’s try this in the browser first.
  • 2:11
    Go back and add /heart to the URL.
  • 2:16
    Yes! Our first API endpoint!
  • 2:20
    Eventually, this endpoint will modify something on the server.
  • 2:24
    It will like the article.
  • 2:26
    So, as a best practice, we should not be able to make a git request to it.
  • 2:32
    Let’s make this route only match when a post request is made.
  • 2:37
    How? Add another option to the route, methods={"POST"}.
  • 2:45
    As soon as we do that,
  • 2:47
    we can no longer make a git request in the browser.
  • 2:51
    It does not match the route anymore.
  • 2:54
    Run ./bin/console debug:router
  • 2:58
    and you'll see that the new route only responds to POST requests.
  • 3:03
    Pretty cool! By the way, Symfony has a lot more tools
  • 3:07
    for creating API endpoints.
  • 3:09
    This is just the beginning.
  • 3:12
    In future tutorials, we’ll go further.
  • 3:15
    Our API endpoint is ready.
  • 3:18
    Copy the route name and go back to article_show.js.
  • 3:23
    But wait, if we want to make an Ajax request to the new route,
  • 3:28
    how can we generate the URL?
  • 3:30
    This is a pure JS file, so we can't use the Twig path function.
  • 3:36
    Actually, there is a really cool bundle called FOS JS routing bundle
  • 3:41
    that does allow you to generate routes in JavaScript,
  • 3:46
    but I'm going to show you another simple way.
  • 3:49
    Back in the template, find the heart section.
  • 3:53
    Let’s just fill in the href on the link.
  • 3:57
    Add path, paste the route name,
  • 3:59
    and pass the slug wildcard set to a slug variable.
  • 4:05
    Actually, there is not a slug variable in this template yet.
  • 4:09
    If you look at ArticleController, were only passing 2 variables.
  • 4:14
    Add a third, ‘slug’=>$slug’.
  • 4:19
    That should at least set the URL on the link.
  • 4:24
    Go back to the showpage in your browser and refresh.
  • 4:30
    Yep, the heart link is hooked up.
  • 4:34
    Why did we do this?
  • 4:37
    Because now we can get that URL really easily in JavaScript.
  • 4:42
    Add $.ajax, and pass method: 'POST’,
  • 4:48
    and URL set to $link.attr (‘href’).
  • 4:53
    That’s it. At the end, add .done
  • 4:57
    with a callback that has a data argument.
  • 5:01
    The data will be whatever our API endpoint sends back.
  • 5:05
    That means that we can move the Article count .html line into this
  • 5:10
    and set it to data.heart.
  • 5:13
    Oh, and if you're not familiar with the .done function or promises,
  • 5:18
    I’d highly recommend checking out our JavaSscript track.
  • 5:21
    It’s not beginner stuff; it’s meant to take your JS up to the next level.
  • 5:27
    Anyways, let’s try it already.
  • 5:29
    Refresh and click.
  • 5:33
    It works! And, I have a surprise.
  • 5:38
    See this little arrow icon in the web debug toolbar,
  • 5:42
    this showed up as soon as we made the first Ajax request.
  • 5:47
    Actually, every time we make an Ajax request,
  • 5:50
    it’s added to the top of this list.
  • 5:52
    That’s awesome because remember the Profiler?
  • 5:56
    You can click to view the Profiler for any Ajax request.
  • 6:02
    Yep, you now have all the performance and debugging tools
  • 6:05
    at your fingertips, even for Ajax calls.
  • 6:10
    Oh, and if there were an error, you would see it
  • 6:13
    in all its beautiful styled glory on the Exception tab.
  • 6:18
    Being able to load the Profiler for an Ajax call,
  • 6:21
    is kind of an Easter egg, not every one knows about it,
  • 6:25
    but you should.
  • 6:27
    I think it’s time to talk
  • 6:28
    about the most important part of Symfony, Fabien.
  • 6:32
    I mean, services.

Symfony 4: JSON API Endpoint

Loading...

In this tutorial, we'll learn how to wire up our app to send and receive data to/from an API endpoint.

Downloads: 
Log in or sign up to download companion files.
Additional resources: