Automatically build a HTML with collapsible rows with JavaScript, given a JSON file.

I have a JSON that looks something like this (still to be finished, can be adapted throughout the project, can use fake data):


var rows = [

{'date': ('2016-01-01'), 'account': 'Revenues', 'code': 3000000, 'value': 4700.0, 'level': 1},

{'date': ('2016-01-01'), 'account': 'Revenues', 'code': 3010000, 'value': 4700.0, 'level': 2},

{'date': ('2016-01-01'), 'account': 'Revenues', 'code': 3010000, 'value': 4700.0, 'level': 3},

{'date': ('2016-01-01'), 'account': 'Revenues', 'code': 3010100, 'value': 4700.0, 'level': 4},

{'date': ('2016-01-01'), 'account': 'Benefits', 'code': 3010102, 'value': 300.0, 'level': 4},

{'date': ('2016-01-01'), 'account': 'Expenses', 'code': 3010102, 'value': 0, 'level': 1},

{'date': ('2016-01-01'), 'account': 'Expenses', 'code': 3010102, 'value': 0, 'level': 2},

{'date': ('2016-01-01'), 'account': 'Expenses', 'code': 3010102, 'value': 0, 'level': 3},

{'date': ('2016-01-01'), 'account': 'Rent', 'code': 4020101, 'value': -2150.0, 'level': 4},

{'date': ('2016-01-01'), 'account': 'Car', 'code': 4020108, 'value': -400.0, 'level':4},

{'date': ('2016-01-01'), 'account': 'Food1', 'code': 4020201, 'value': -1191.58, 'level': 4},

{'date': ('2016-01-01'), 'account': 'Food2', 'code': 4020202, 'value': -264.88, 'level': 4},


I need to make a HTML table using JavaScript.

This table has the following features:

1. Collapsible: when I click Level 1, it collapses all of it's direct children (and the children of the children as well). The for Level 2 and Level 3.

2. Columns: the first two columns are fixed (account and code), the value is given for a specific month, and the columns are the monthly data.

3. Style: Level 1 rows are bold and have a different style from level 2, 3 and 4, for example.

4. Fixed TOTAL column: the last column is the sum of all previous columns values, and it is fixed.

5. Loading Time: it has to be fast.

6. Totals Rows: Revenus minus Costs will equal (GROSS PROFIT) which is a calculated row. GROOS PROFIT minus EXPENSES will equal EBIT. I can even make the calculation on the backend, but the table must consider this.

I probably could restructure the JSON on the backend if needed, so we can discuss which data structure would be best to work with.

Even though I would prefer vanilla JavaScript, there's nothing too bad about jQuery.


Fähigkeiten: HTML, Javascript

Mehr darüber build html page, combobox html icon css javascript, showhide table rows javascript, create html table from json, json table example, jquery dynamically create table from json, json to html table, populate html table with json data, display json data in html table using javascript, json to table jquery, display json data in html table using jquery, collapsible rows ajax, build html newsletter, html applications using javascript, html photo gallery javascript mysql, html textarea rows incorrect, html form redirect javascript, javascript php json sql css html, php html javascript ajax json web program, javascript expand collapse html table rows

Über den Arbeitgeber:
( 0 Bewertungen ) Brazil

Projekt-ID: #17901187

41 Freelancer bieten im Durchschnitt $68 für diesen Job


Hi, Sure, We can do this. We have 6+ years experince in this field. We have done multiple similar jobs before, check out my profile, We are in top 10 web designers and devel Mehr

$100 USD in 5 Tagen
(215 Bewertungen)

Hi, I would like to discuss more about the table structure Are all the records with same code be attach into 1 collapsible element with header is level 1? Thanks for reading Ngan Le

$77 USD in 10 Tagen
(257 Bewertungen)

Greetings. I'm an expert web developer. I've checked your requirements carefully and researched on them a lot. I have some questions. Could we use jQuery plugin for this job? I've ever built collapsible table usin Mehr

$50 USD in 10 Tagen
(61 Bewertungen)

Hello Sir, Sir,I saw your project and it matches with my Skills and Expertise. I'm having 9 Years of experience within the same technology. After studding your requirements ,there are few questions that needs to be Mehr

$55 USD in 10 Tagen
(29 Bewertungen)

Hello I am well experienced Web developer. please have a look at my portfolio and past work reviews. Regards Mukesh

$100 USD in 2 Tagen
(30 Bewertungen)

Hi there! Allow me to complete this task. Please ping me so that we can discuss more and I can start off my work right away :)

$90 USD in 1 Tag
(55 Bewertungen)

Hi there Nice to meet you. I read your proposal and understood your idea. I am a senior JAVASCRIPT developer. So I can help you perfectly. I'd like to work with you. Let's discuss more details. Best rega Mehr

$90 USD in 10 Tagen
(19 Bewertungen)

I request you to contact me further in order to have a detailed discussion on your project related requirements. Please refer my portfolio below for more details. Waiting for your reply. > Web Applications using Mehr

$90 USD in 0 Tagen
(41 Bewertungen)

Hello! Your project seems simple and I think I can complete it in 1 day. I will use vanilla js. Let me know if you’re interested.

$66 USD in 3 Tagen
(5 Bewertungen)

We can deliver you the best with in your time frame. I would say please don't look on the price go for the service and the relation you will get because I always believe in Win Big never in Lose Small. Thank you ver Mehr

$55 USD in 10 Tagen
(19 Bewertungen)
$25 USD in 10 Tagen
(8 Bewertungen)

Hi, I possess excellent skills in javascript, jquery, bootstrap, css and can create the html table dynamically using javascript with table data coming from a JSON file. Please contact me to discuss in detail and mov Mehr

$90 USD in 10 Tagen
(6 Bewertungen)

Hi, Your requirements are fully clear to me and I am applying only because I meet all the requirements that you are looking for. I have been working as a wordpress developer and designer for more than 6 years and I Mehr

$77 USD in 1 Tag
(14 Bewertungen)

Hello, i'm a fullstack web developer with 7+ years of experiencia. I'm a Javascript expert and i can have it ready for you by tomorrow in the morning working perfectly. Please contact me on chat if you're interested Mehr

$50 USD in 3 Tagen
(18 Bewertungen)

Hi there, I can deliver this code in vanilla js, everything in the brief seems to be clear and very much doable. I've put delivery time to 4 days but most likely will be finished way before that time. Let's chat! Mehr

$94 USD in 4 Tagen
(1 Bewertung)

Kindly consider me. I can start on your project immediately and looking forward to work for you. “WILL BE AVAILABLE 40HRS/WEEK” Thanks “Quality in short span of time”

$100 USD in 10 Tagen
(1 Bewertung)

How are you, sir. I have checked your post. And I just have known that you want a developer to work for your job - 'Automatically build a HTML with collapsible rows with JavaScript, given a JSON file.' I have much and Mehr

$55 USD in 1 Tag
(1 Bewertung)

Hello, I hope you are doing well ,as I have gone through your job description carefully . I am absolutely sure that I can do the project very well. I have worked on similar projects to what you are looking for and I a Mehr

$55 USD in 10 Tagen
(1 Bewertung)

I worked with json files and collapsible data tables on my projects before. So I think I can do this job. :) Best regards...

$83 USD in 10 Tagen
(1 Bewertung)

Hi I can do it as you expected using Html, javasctipt/jquery

$66 USD in 2 Tagen
(1 Bewertung)