Question 15792 in Laravel Question posted in
The official Laravel Documentation can be found here.

How to make a get request api call in Laravel

I am trying to learn how to use an API in Laravel and show json results in my view. This is a sample code I have made but nothing is showing. The API is with values because when I try it in Postman, it returns json results.

    <html>
    <head>
        <meta charset="utf-8">
        <title>Item Manager</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    </head>
    <body>
    
    <div class="container">
        <ul id="items" class="list-group">
        </ul>
    </div>
    
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    
    <script type="text/javascript">
        $(document).ready(function (){
            getItems();
    
           function getItems(){
               $.ajax({
                   url:'https://www.boredapi.com/api/activity'
               }).done(function (items){
                let output = '';
                $.each(items, function (key, activity){
                    output += '<li class="list-group-item">' +
                        '<strong>${activity.text}</strong>${text.body}' +
                        '</li>'
                });
               });
           }
        });
    </script>
    </body>
    </html>

I suspect it might have a problem with the key tags i am trying to call. I am trying to make the call from blade not needed from the controller.

json returned from the API:

{
    "activity": "Write a list of things you are grateful for",
    "type": "relaxation",
    "participants": 1,
    "price": 0,
    "link": "",
    "key": "2062010",
    "accessibility": 0
}
Tags:

2

Answers


  1. 0

    try adding this:

    $.ajax({
url:'https://www.boredapi.com/api/activity',
type: "GET",
},

    Also console.log() your result might be helpful.

    Login or Signup to reply.
  2. 0

    Here is the completed code.

     <html>
    <head>
        <meta charset="utf-8">
        <title>Item Manager</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    </head>
    <body>
    
    <div class="container">
        <ul id="items" class="list-group">
        </ul>
    </div>
    
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    
    <script type="text/javascript">
        $(document).ready(function (){
            getItems();
            var output = '';
           function getItems(){
               $.ajax({
                   url:'https://www.boredapi.com/api/activity'
               }).done(function (items){
                let output = '';
                $.each(items, function (key, activity){
                    output += '<li class="list-group-item">' +
                        '<strong>'+key+'</strong>' + activity +
                        '</li>'
                });
                      $("#items").append(output);

               });
           }
        });
    </script>
    </body>
    </html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search