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.


Skills: HTML, Javascript

See more: 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

About the Employer:
( 0 reviews ) Brazil

Project ID: #17901187

42 freelancers are bidding on average $68 for this 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 More

$100 USD in 5 days
(210 Reviews)

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 days
(234 Reviews)

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 More

$50 USD in 10 days
(52 Reviews)

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

$100 USD in 2 days
(29 Reviews)

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 More

$55 USD in 10 days
(28 Reviews)

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 day
(54 Reviews)

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 More

$90 USD in 0 days
(39 Reviews)

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 days
(5 Reviews)

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 More

$55 USD in 10 days
(19 Reviews)
$25 USD in 10 days
(8 Reviews)

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 More

$90 USD in 10 days
(8 Reviews)

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 More

$90 USD in 10 days
(6 Reviews)

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 More

$77 USD in 1 day
(12 Reviews)

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 More

$50 USD in 3 days
(17 Reviews)

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! More

$94 USD in 4 days
(1 Review)

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 More

$55 USD in 1 day
(1 Review)

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 days
(1 Review)

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 More

$55 USD in 10 days
(1 Review)

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

$66 USD in 2 days
(1 Review)

Hi there, Hope you're doing great I have more than one year of development experience in JavaScript, React.js, HTML5, CSS3, and firebase. Let me tell you bit about myself. I have more than 1 years of experience in we More

$50 USD in 10 days
(0 Reviews)