I have a JSON file with more than 200000 records in it.
I'm using Angular CLI for accessing JSON data with the help of json-server API for accessing it locally.
Im using Angular http request to access JSON, it is getting displayed into browser but not into angular table component.
I checked if ill be able to access it with less number of records then it got displayed, with upto 1000 records i have checked but max i don't know how much it access.
so i just want any solution for accessing large JSON data into angular view efficiently.
please suggest any solution or alternative for the same.
This may be opinionated answer but you've many options.
Try lazy loading table data.
Implement Infinite Scroll by loading 50 rows initially & when user reach end of table, load next 50 and so on. Use following plugin for that to minimize your code.
ngInfiniteScroll
Add pagination to table by using custom filter on ngFor to filter out elements with their index no. You can use following awesome plugin lib
ngx-pagination
Make use of grids. This is best performance, reliable solution. There are many grids like ag-grid, slickgrid, Angular data table, etc use according to requirement. ag-grid is Angular supported and slickgrid is pure js grid but you can surely configure inside angular project. Also you can try data tables from PrimeNg.
With using grids, searching, filtering, exporting table data becomes very efficient.
ag-grid
Angular DataTables
SlickGrid
PrimeNG Table
Related
I‘m using node.js, express and handlebars.
Currently I‘m passing json via res.render() to hbs. In the hbs I‘m using {{#each dataJson}} to iterate over it and list the contents of my json. Now... what if my json had like a million entries? It would take forever to load my page then, right?
Now to my Question:
How do I load that dynamic? I want the page to load the html from the json while showing what‘s already loaded.
Sorry for my bad english. It‘s not my native language.
Best regards
Naggelus
You would need to implement a lazy loading mechanism.
Instead of loading all the million records on the initial load, you would need to send it in chunks. Based on the view port, the records can be decided and load the first page. When the user goes over those records, you need send another API request to fetch the next chunk and so on.
This would load only the necessary records to the UI.
I am creating a UI that allows users to input data in batches.
Similar to an Excel spreadsheet but the columns are already fixed.
I'm already using PrimeNG DataTable for other parts of my web app, and I would like to continue using it for the aforementioned feature if possible.
Thanks.
I figured it out.
My initial code was correct but because there was an issue when the backing array of the data table was being updated via push.
I had to create a separate array with the empty objects and assign it to the backing array.
I was using Behave and Selenium to test on something that use a large amount of data. Data tables were becoming too big and making the Gherkin documentation unreadable.
I would like to move most of the data from data tables to external file such as JSON. But I couldn't find any examples on websites.
I cannot offer an example at the moment, but I would create the JSON file as needed and give reference to the JSON file in Given or Background , then capture the value in the respective decorated method.
I wanted to develop a small search website where I will be storing the data in XML files. When we search anything, it should display those data as table format in html. How does one retrieve the data from XML files?
Below is the basic thing to display data of only two columns, but I want to display data dynamically:
html file:http://www.w3schools.com/xml/xml_applications.asp
This is the sample code for retrieving the data from xml only for two columns.
Well the first problem I see is that you have two functions in there that are not being called. Nothing programmatic will happen in this scenario. When you have a method you need to call said method with myFunction(). I would recommend reading up a little more on javascript instead of copying and pasting it and expecting it to just "work"
To further elaborate, you removed the function call from the example you took when you took off the button. What is your xml endpoint? (it's not going to be the same as the example unless you build it to be that way). In this example it's just an xml file that is hosted on the server with the same root as the html.
I want to display raw json in tabular format, I have seen jquery plugins but that need heading/labels to display, In my case, its not predefined ( means anything possible in json).
How can I display that in HTML table format ?
I found this engine on Hacker News today, it might be what you're looking for.
Tempo - a tiny JSON rendering engine
jQuery JSON-to-table plugin (demonstration) is a jQuery plugin that
can represent hierarchical data (JSON) in HTML table.
The script is developed to handle all data types passable through
JSON. At any time only one level of data is shown. The data tree can
be navigated from node-to-node without refreshing the page.
https://github.com/anuary/jquery-json-to-table
This script exactly that – it allows you to display raw JSON data in HTML table without any pre-defined templates.
You can also use this simple project on Github : Json-To-HTML-Table