I want some advice on what is the best way to handle data , where is i need to table it and on the API there is a pagination endpoint is something like this
"meta": {
"pagination": {
"total": 50,
"count": 10,
"per_page": 10,
"current_page": 1,
"total_pages": 5,
"links": {
"next": "http://192.168.1.1/api/sample/users?page=2"
}
}
}
what I did so far is do a for loop until I get all the data from the request but I "worry if my data will turn into hundreds or thousands" then save it to my state and call it in my table I used https://material-table.com to display, the idea I have is to create my own table cause in order to speed up what I think is every click of pagination it will request a certain page to get result rather than give me the whole data , but I worry also on how I will manage the search bar if I can't get the whole data. hope you can give me some tips or idea on how I will work on it or is there any react library that can handle the certain task?
Related
I am working on a spring boot app where I am using Postgres for my data storage,I am using pagination to structure my data.
I recieve data like this:
{
"messages": {
"dtoList": [
{
"acknowledge_msg": "null",
"status": "QUEUED",
"msg_id": 2021082012204616000,
},
{
"acknowledge_msg": "null",
"status": "QUEUED",
"msg_id": 2021082012204575500,
},
],
"totalRecords": 4,
"pageSize": 2,
"pageNumber": 1,
"numPages": 2
}},
Now in my react page,when I will navigate to pages,I will simple do this api call with page size and page number and It will give me a response.
Now I want to apply filters but filters need to filter from all the records not from respective pages.
How can I achieve this?
What you want to achieve, regards only the backend, not the reactjs application.
You should send to your spring-boot application the query you would like to perform, then apply it into your postregsql query. It would update also pagination, since less results will be presented.
Maybe show here your frontend code, instead of the JSON data, and it would be easier to help you applying the remote filters.
As it was said before, the only proper way to achieve this is to do that on backend.
You can, of course, read all of the pages and filter them in frontend, but this is an awful solution
I'm returning a JSON from the MercadoLivre API. In it I receive the following structure:
{
"seller_id": "239258430",
"query": null,
"paging": {
"total": 6241,
"offset": 0,
"limit": 100
}
I need to get all datas, not the only 100th firsts, I try set limit with my 'total' but that not works. Any Suggestion?
I need record that in my Database.
First of all, the documentation is quite clear if you read it.
Secondly, mercadolibre apis have their own custom developer forum :
Anyway, the answer would be that you need to send offset to get paginated results. Always keep in mind that in searches, your limit can´t be higher than 200. So to get results from 200 to 400, you should add &offset=200&limit=200 to your query
I'm accessing the Facebook Graph API for posts and am trying to figure out the pagination handling. I understand the use of paging.next and paging.previous properties of the results but I'd like to know when there are actually previous results. Particularly, when I make the first 'posts' call, I get back a paging.previous url even though there are no previous values. Upon calling that url I get a response with no results.
For example, calling "168073773388372/posts?limit=2" returns the following:
{
"data": [
{
"story": "Verticalmotion test added a new photo.",
"created_time": "2015-12-02T17:04:56+0000",
"id": "168073773388372_442952469233833"
},
{
"message": "http://www.youtube.com/watch?v=QD2Rdeo8vuE",
"created_time": "2013-12-16T23:19:30+0000",
"id": "168073773388372_184840215045061"
}
],
"paging": {
"previous": "https://graph.facebook.com/v2.6/168073773388372/posts?limit=2&format=json&since=1449075896&access_token=****&__paging_token=enc_AdA69SApv4VoBZB0PPZA7W5EivCYQal8KMFmRNkyhr8ZBk4w0YmFEQUJWV3JZBS70ihyMpbqieQaERhY50enqNCMBuIZATadeopYj8xPvQL7Y8KueaQZDZD&__previous=1",
"next": "https://graph.facebook.com/v2.6/168073773388372/posts?limit=2&format=json&access_token=****&until=1387235970&__paging_token=enc_AdAVMaUlPmpxjBmq5ZClVdNpFp7f9MyMFWjE7ygqsMLW7zvSx3eGHLkfwDxdCx0uO3ooAZCKDmCwMWHZA9RNyxkYUPJyjMtO3kynKm5uF2PhoPZB2gZDZD"
}
}
How can I tell if it's the first set of results?
From tidbits scattered around the documentation and web, it seems like the previous url shouldn't be there.
I don't think it matters because I get the same results in the Graph Explorer but I'm using OpenFB to access the API.
You can set the order to be reverse then get the 1st result
https://developers.facebook.com/docs/graph-api/using-graph-api
Ordering
You can order certain data sets chronologically. For example you may sort a photo's comments in reverse chronological order using the key reverse_chronological:
GET graph.facebook.com
/{photo-id}?
fields=comments.order(reverse_chronological)
order must be one of the following values:
*chronological*
*reverse_chronological*
I'm working on a weather app as a personal project. I have the bases of the app done where I make a HTTP get request to the Yahoo Weather API and it returns the data I want.
However I'm stuck on the next step, getting icons to load with the current conditions.
I setup a JSON file in my "models" folder and it looks like this:
[
{
"code": 32,
"icon": "img/sunny.png",
"text": "Sunny"
},
{
"code": 26,
"icon": "img/cloudy.png",
"text": "Cloudy"
}
]
And here's my request for that in my main controller (Not sure if I'm doing it right).
$http.get('models/conditions.json')
.success(function(data) {
vm.condition = data;
}).error(function(err) {
console.log(err);
});
In the view I'm using a combination of the ng-if and ng-src directives to try to load the icons. Again, I don't I'm doing it right.
<img ng-if="main.place.item.conditons.code === main.conditions.code" ng-src="{{main.conditions.icon}}">
Any ideas on how I can get this to work? Am I on the right track? Thanks for any answers!
You said the JSON is being retrieved correctly, so the problem lies in the fact that you are trying to use an array as an object with the ng-src tag. You have {{main.conditions.icon}}, assuming conditions is the JSON you retrieved, you must specify an array index, however, you probably don't want to do this because you don't have a way of knowing what index is related to what weather code.
The solution to this can come in a couple different ways. For one, if possible, you can alter the JSON data to simply be an object in the form:
{
"32": {
"icon": ...,
"text": ...
},
"26": {
"icon": ...,
"text": ...
}
}
If you are able to do this, then you can use conditions as an object and do:
<img ng-src="{{main.conditions[main.place.item.conditions.code].icon}}">
Of course, this is assuming the conditions property in the "main.place.item" object isn't also an array, if so you will have to adjust even further. Also, I am assuming you made a typo as you had conditions spelled wrong in your question with the ng-if attribute.
I am working on ExtJS application. I wanted to know how to load deeply nested JSON data into gridpanel.
My sample JSON is as follows:
{
"Users": [
{
"id": "1",
"status": "2",
"name": "Sample",
"email": {
"first": "sample#gmail.com",
"second": "sample2#gmail.com"
},
"feeType": [
{
"name": "Asset-class",
"fee": "20",
"billing": "flat"
},
{
"name": "Asset-class",
"fee": "20",
"billing": "flat"
}
]
},
{
"id": "2",
"status": "3",
"name": "Test",
"email": {
"first": "test#gmail.com",
"second": "test#gmail.com"
},
"feeType": []
}
]
}
I have defined three models related to Users, email and fee type array. Also define all the associations correctly.
I have two grids on gui. The first grid requires data of Users array. So this grid is loading data properly. As I have used dataIndex. It's also loading email values as I have used in model definition as
mapping : "email.first"
I have button on first grid. On click of this grid button, another grid opens, which requires the data of "feeType" array. But this second grid is not loading the data. Below is the approach that I worked upon:
Defined the store having root as "Users". And on store.load() I have taken the second store into a variable like this
var store2=store.feeType()
Now in the second grid pass this variable as store. like this
store:store2
So when I use proxy as memory, data loads into second grid properly from feeType array but when I change proxy as "rest" (as data is meant to come from REST service), data doesn't load into second grid. Why? I think the reason is that that variable store2 doesn't contain any store; that's why grid2 not showing data. But why it is working with memory as proxy then.
Sencha ExtJS is the complete framework. There should be a way to load nested data into the grid. I have defined all the stores and models.
EDIT
After trying a lot I am able to load the nested data in nested grid too. And its working fine with proxy as rest. So I defined all the models and one store accordingly.
Now I want that if the user changes or updates the grid values grid1 as well as grid 2 values, it should update the JSON and send back to the rest service. So even I achived this. But one problem is occurring. As user updates the rows of the grid and clicks the button, on the click event of this button I have written store.sync().
So it is updating the json and sending this updated JSON to rest service. But there is one problem here. For example if there are 2 rows in the grid and user updates both rows and then click button the update api i.e. the rest service is called twice. Why?
Ideally it should be called once only, right? But here it is called twice and at every call when I check the updated data that I am getting at my service end it is returning each row's updated data. For example if there are 3 rows in the grid it will call the update restservice thrice. It should not be this way.
It should call the rest service once keeping all the updates in just one JSON only instead of 3 calls to server and producing 3 updated JSONs.