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.
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 new with Angular, Js etc, and have a problem with understanding how should work with nested data. For example:
I have four json files:
categories
subcategories
posts
comments
It's better to have 4 different files like above, or one like this:
{
"id_category":"1",
"name":"business",
"subcategories":{
"id":"1",
"name":"ecommerse",
"posts": {
"id": 1,
"title": "New post"
"comments": {
"id": 1,
"text": "text text text"
}
}
}
Of course it's only an example, but for that example I need to find comment by Id = 1 to get information about which post this comment is related to, which subcategory and category.
Now I have four different files, and services to get data from json files. I can get a specific comment by ID:
getComment(Id: number) {
return this.comments.find(
(comment) =>
comment.id === Id
);
}
ok, fine. But If I want to get information about post, subcategory, and main category for this comment? What should I do?
It depends on what the specific needs of your application are.
With this structure:
{
"id_category":"1",
"name":"business",
"subcategories":{
"id":"1",
"name":"ecommerse",
"posts": {
"id": 1,
"title": "New post"
"comments": {
"id": 1,
"text": "text text text"
}
}
}
You could iterate over Categories and display a list, then allow a user to select a single category, and assign that to var currentCategory.
You could then iterate over currentCategory.subcategories to allow the user to select a subcategory and assign that to var currentSubCategory. You would keep drilling down then into currentSubCategory.posts, allow the user to select a post, assign that to var currentPost and then iterate over that to display currentPost.comments.
If you're fetching from a database in order to allow the user to drill down into the data for display only, then something like this would work.
If you're maintaining data in JSON files, then I would look at something like JSON Server https://github.com/typicode/json-server
If you're building something more substantial and you have a database backend, make use of the database and don't try to recreate that functionality in your JSON, use JSON as a transport for the data, but don't try to replicate entire tables or complex data structures in your front end code, just fetch what you need as you need it, as that will make for a much more stable and scalable application, and will also make it easier for you do fetch and update data in small manageable chunks.
For mocking a data backend using JSON, consider json-server
https://www.npmjs.com/package/json-server
I'm trying to figure out a way to grab the top 50,000 most subscribed youtube channels using javascript. These only need to be grabbed once and will be stored in a file to be used for an autocomplete input in a webpage.
I've gotten pretty close to getting the first top 50 by using search:list (/youtube/v3/search) by searching with parameters maxResults=50, order=viewCount, part=snippet, type=channel, fields=nextPageToken,items(snippet(channelId,title))
Returning:
{
"nextPageToken": "CDIQAA",
"items": [{
"snippet": {
"channelId": "UC-9-kyTW8ZkZNDHQJ6FgpwQ",
"title": "Music"
}
},{
"snippet": {
"channelId": "UC-lHJZR3Gqxm24_Vd_AJ5Yw",
"title": "PewDiePie"
}
},{
"snippet": {
"channelId": "UCVPYbobPRzz0SjinWekjUBw",
"title": "Анатолий Шарий"
}
},{
"snippet": {
"channelId": "UCam8T03EOFBsNdR0thrFHdQ",
"title": "VEGETTA777"
}
},...
Then all I'd have to do is fetch that 1000 more times using the nextPageToken to get a list of the top 50,000.
Unfortunately, sorting by relevance, rating, viewCount, or nothing is not yielding the 50 most subscribed channels, and there doesn't seem to be any sort of way to order them by subscriber count according to the documentation; so it seems like i am stuck.
Just before you writing your 50 results in file (or database), you can make one more API call, using channelId field from your result, and merge all of them with comma delimited and make another API call Channels: list.
On that page for example you can use following parameters:
(these are IDs from your example above)
part=statistics
id=UC-9-kyTW8ZkZNDHQJ6FgpwQ,UC-lHJZR3Gqxm24_Vd_AJ5Yw,UCVPYbobPRzz0SjinWekjUBw,UCam8T03EOFBsNdR0thrFHdQ`
And result will look something like this:
{
"kind": "youtube#channel",
"etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/MG6zgnd09mqb3nAdyRnPDgFwfkE\"",
"id": "UC-lHJZR3Gqxm24_Vd_AJ5Yw",
"statistics": {
"viewCount": "15194203723",
"commentCount": "289181",
"subscriberCount": "54913094",
"hiddenSubscriberCount": false,
"videoCount": "3175"
}
}
And you can take subscriberCount from result for each channel.
I know, this is not the way to sort your 50 results while writing into the file,
but with this you can sort later your results by "subscriber count" while fetching from file for your autocomplete input.
I didn't find any other way to sort results by subscriber count, so maybe this can be helpful.
The idea to do is to run a server side script, that makes RESTful api calls in a loop, and writes the results to .JSON file, to save results. For that you can create PHP script, that makes REST API call to google, and fetch first 50 results, and then use file write operations to write your results. Run that PHP script as corn job to update results at regular intervals. Executing corn job at every specific time interval you set keeps results fresh.
Hit CURL command with loop for next, to fetches 50 results every time and create temp file with all the results saved in .JSON file. Once your results are fetched, replace your old JSON file with newly created temporary file. This will generate fresh JSON file are regular, with new results if any changes are made to data.
However, the idea to use temporary file is to avoid script avoid wait/slow of AJAX down due to consistent read and write operations on same file. Once temporary file is written, simply use move command to replace the actual file.
Make sure, you use cache control headers in AJAX results to keep its freshness of data.
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.