Problem in fetching data from json response

Questions
1

//home.f7

        ${categories.map((cat) => $h`
          <li>${cat.title}</li>
          `)}

//script
export default (props, { $f7, $on }) => {

const title = 'Component Page';



const openAlert = () => {

  $f7.dialog.alert('Hello world!');

}

$on('pageInit', () => {

       


        $f7.request.get('http://localhost/api/categories').then((res) => {

          console.log(res.data)

          const categories = res.data;

  });

});

$on('pageAfterOut', () => {

});

$f7.request.setup({

  headers: {

    'Authorization': 'Bearer ' + localStorage.token,

    contentType: 'application/json'

  }

})

return $render;

}

Response :

{“data”:[{“id”:2,“name”:“Lunch”,“image”:“D8CZO8usghRe-1627731618.jpg”,“status”:0,“description”:null},{“id”:1,“name”:“Break fast”,“image”:“ohIMte2avWvx-1627731515.jpg”,“status”:0,“description”:null}],“links”:{“first”:“http://localhost/api/categories?page=1",“last”:“http://localhost/api/categories?page=1”,“prev”:null,“next”:null},“meta”:{“current_page”:1,“from”:1,“last_page”:1,“links”:[{“url”:null,“label”:"« Previous”,“active”:false},{“url”:“http://localhost/api/categories?page=1",“label”:“1”,“active”:true},{“url”:null,“label”:"Next »”,“active”:false}],“path”:“http://localhost/api/categories",“per_page”:5,“to”:2,"total”:2}}

When i try to getting res.data.data getting undefined error.
I have using laravel in backend.(laravel jsonresource)

//laravel function

return CategoriesResource::collection(Category::orderBy(‘id’,‘desc’)->paginate(config(‘global.pagination_records’)));

Screenshot (1)
Screenshot (1)1920×1080 174 KB

2

You don’t have property name data in res.data. Based on your response, it’s an array, not an object.

1 Like
3

above json is result of console.log(res.data).
I want to get like this from above json
[{“id”:2,“name”:“Lunch”,“image”:“D8CZO8usghRe-1627731618.jpg”,“description”:null,“status”:0,“deleted_at”:null,“created_at”:“2021-07-31T11:40:18.000000Z”,“updated_at”:“2021-07-31T11:40:18.000000Z”},{“id”:1,“name”:“Break fast”,“image”:“ohIMte2avWvx-1627731515.jpg”,“description”:null,“status”:0,“deleted_at”:null,“created_at”:“2021-07-31T11:38:35.000000Z”,“updated_at”:“2021-07-31T11:38:35.000000Z”}]

I have done backend using vuejs and laravel.

The same api response i have fetch data like
response.data.data.it working perfectly.

4

The same api response i have fetch data like
response.data.data.it working perfectly.

I am not sure, but at this point you can get your result with res.data just like your console.log

1 Like
5

@Sreenish_CP the code examples you post are unreadable:

  1. use formatting
  2. please create a live example using template from here How to ask a good question on forum
    otherwise it is hard to understand where you have an issue
6

I have updated index.html with my home.f7 and app.js with my app.js

I want loop this api response.
Response from api.

{“data”:[{“id”:2,“name”:“Lunch”,“image”:“D8CZO8usghRe-1627731618.jpg”,“status”:0,“description”:null},{“id”:1,“name”:“Break fast”,“image”:“ohIMte2avWvx-1627731515.jpg”,“status”:0,“description”:null}],“links”:{“first”:“[http://localhost/api/categories?page=1",“last”:“http://localhost/api/categories?page=1”,“prev”:null,“next”:null},“meta”:{“current_page”:1,“from”:1,“last_page”:1,“links”:{“url”:null,“label”:"« Previous”,“active”:false},{“url”:“http://localhost/api/categories?page=1",“label”:“1”,“active”:true},{“url”:null,“label”:"Next »”,“active”:false}],“path”:“http://localhost/api/categories",“per_page”:5,“to”:2,"total”:2}}

Also getting component-loader.js:49 Uncaught (in promise) Error: ReferenceError: categories is not defined error.

7

Problem solved when url change like this ,
$f7.request.getJSON(‘http://localhost/api/categories’).then((res) => {
}