1

HTML

I have an accordion. Click on " View Report " will expand.

enter image description here

JSON

I also have a .json file that contain 4 objects.

{

    "A": {

        "report_type": "chapter test",
        "section_num": "2",
        "assignment": "algebra 1",
        "date": "2/10/2015",
        "correct_num": "15",
        "avg_score": "89"
      
    },

    "B": {

        "report_type": "section exercise",
        "section_num": "2.2",
        "assignment": "algebra 1",
        "date": "2/09/2015",
        "correct_num": "11",
        "avg_score": "44"
        
    },

    "C": {

        "report_type": "test",
        "section_num": "1",
        "assignment": "algebra 1",
        "date": "1/10/2015",
        "correct_num": "15",
        "avg_score": "75"
       
    },

    "D": {

        "report_type": "practice test",
        "section_num": "1",
        "assignment": "algebra 1",
        "date": "1/09/2015",
        "correct_num": "15",
        "avg_score": "79"
       
    }
}

My goal is to generate an accordion for each object I have in my json file - so 4 in my case.

Then, set their text fields base on the data in my json file accordingly.

Any hints / suggestions on that will be much appreciated !

How can I dynamically generate HTML dom using jQuery base on JSON data ?

JSFiddle

Improve this question
3
  • api.jquery.com/jquery.each Commented Jun 29, 2015 at 18:22
  • If you want a simple solution, check out a template library like underscore/lo-dash or jquery.tmpl. These will let you write a HTML template and pass your JSON into it. Commented Jun 29, 2015 at 18:25
  • possible duplicate of How to create HTML select option from JSON hash? Commented Jun 29, 2015 at 18:30
Related questions
4
Generate HTML tags using JSON and jQuery
0
Generate multiple HTML elements from JSON using Jquery?
0
Create JSON from Dom elements in a `div`
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.