Handle data of big JSON file in React - javascript

I have big JSON file it is about 4 million line this is structure :
{
"name": "...",
"type": "personal_chat",
"id": 1744378997,
"messages": [
//some data here
]
}
I want make a chat and I have this chat I want to make as JSON file, I want put this data in UI (design) to display it perfectly for user,
Problem: The file is very big as I said it about 4,400,000 line and about 300,000 objects in messages array, How can I load data when user is swipe up because it's impossible to put all this data when user is open website
The last object in messages array should put in the first of the chat. It is the last message!

Related

Nested json data in Angular 2 - how to filter?

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

How to create append an array to a json value using (js/node/express)

I'm trying to re-create a CRUD app in NodeJs that I did using php/mysql etc, that takes a users form information and stores it in a file called "sample-data.json".
Essentially, with NodeJs a user fills in a form, front-end JS takes that info, passes it along to an api route I set up, and then using FS, writes that info to the sample-data.json file etc.
With the code below, once a users hits submit on the form, the code takes that info, and passes it to the "sampledataapi" route.
$("#createTodoForm").submit(function(evt){
evt.preventDefault();
$.post("/sampledataapi",{
todoCompany : $("#todoTitle").val(),
thisTodoIsFor : $("#todoIsFor").val(),
todoPostedBy : $("#todoPostedBy").val(),
todoCompleted : $("#todoCompleted").val(),
todoPriority : $("#todoPriority").val(),
todoMessages : $("#todoFirstMessage").val()
}, showDataGotten );
});
Once it saves the data, my sample-data.json file which initially has an empty array inside of it, then gets populated with info.
So sample-data.json goes from this: []
To this(once data has been entered):
[
{
"todoCompany":"sample company",
"thisTodoIsFor":"todo is for me",
"todoPostedBy":"admin",
"todoCompleted":"no",
"todoPriority":"green",
"todoMessages" : "sample message"
}
]
Now when I do this, all works fine but I run into problems when I want to have "todoMessages" be an array from the get go. Reason is that once the user posts their data, they will have the ability to erase/add messages from that block.
So I need that when the user submits the data, instead of that "todoMessages" being a regular string, I want it to be like this:
"todoMessages" : [ "sample message" ]
This way, I can push info into it OR delete from it etc.
How can I make it so that when the user creates his data, and the data passes the info to the route/json file, that it automatically creates todoMessages as an array?
I have tried (on front end)
todoMessages : [$("#todoFirstMessage").val()]
but then the front end reads "undefined"
and the backend json has this:
"todoMessages[]":"sample message"

Fetch list of 50,000 most subscribed channels

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.

Load nested JSON data into gridpanel

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.

process csv/json data in java servlets and javascript

I need an opinion on how to approach my problem. I have no idea on how to start and on how to implement which functions on which parts of the software. So this is what I want to do:
I have a Java servlet which creates a simple csv file:
name1, value1
name2, value2
etc.
This needs to be somehow converted to JSON data, so it can be displayed on a jsp page:
[
{
"name": "name1",
"value": "value1"
},
{
"name": "name2",
"value": "value2"
}
]
Then the user will be redirected to the jsp page. Is it possible to send the whole JSON structure via request object to the jsp page? Or is it the easiest if all processing is done in javascript and only the path to the csv file is sent via request object?
I'm kind of lost on this, since I first started last week with programming of web applications. I'd just need a push in the right direction and then I should be able to figure out the rest on my own ;)
First, look for a CSV parser which can turn a CSV file into a List<Bean> or List<Map<K,V>>.
Then, look for a JSON parser which can turn a List<Bean> or List<Map<K,V>> into a JSON string.
Finally, just do the math and set the resulting JSON string as a request attribute which you print in JSP as if it's a JS variable, like so <script>var data = ${data};</script>.

Categories

Resources