0

I am a beginner in angular. My question is - Based on the excel file which user uploads, api returns some data in JSON format. So the column headers and data are dynamic. I want to display the json data in HTML table.

I want to know how should my json look like and its respective TS and HTML code.

User upload an excel file like this file example

My output should look like this : output First column and row is dynamic.

Improve this question
3
  • This seems like a full-stack question. When I google JavaScript libraries that read Excel, I see dollar signs. Generating JSON in JavaScript is straightforward (JSON.stringify a JS object) but I'd instead use Newtonsoft to generate the JSON server side because I'd also use a free .NET library to read the Excel (there are many). I'm commenting and not answering as I don't know if this is feasible for you. Plus, my answer would be HUGE as it would include posting a blob with rxjs, subscribing and parsing the JSON response into a table -- I don't even know what server-side tech you are using. Commented Jun 6, 2021 at 21:13
  • I don’t have to read excel. The user uploads a file and I send that file to the back end through an endpoint, then the back end sends json data through another endpoint which I want to display in a table. My confusion here is when I don’t know column headers , what should I write in interface? Please check image 2, to show that image in a table how should my json look like? Also, the first row and column (headers) change every time depending on the file they upload. Commented Jun 7, 2021 at 2:58
  • OK. Your image links aren't working for me. They would probably have helped me to be more on the nose with my comment. Commented Jun 7, 2021 at 3:22

1 Answer 1

Reset to default
1

As you are new to Angular, I will show you one of the procedure you can use

Angular part:

Every time the server sends data, you can get your data by HTTP methods or web-socket by "service" from angular.

Service:

in services, you can import HTTP to get data and after you get data you can emit it by using "behavior-subject" to any component you want which contains your tables and save data values there. (behavior-subject is from rxjs library).

Component:

Now your component in angular has the json data every time and you can analyze
your JSON file, based on your JSON shape you can use *ngfor in the HTML part of the component table and it will change the table online.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.