How to generate JSON file based on the HTML tag attributes an values

Question

I would like to save some of HMTL data to JSON file and need help with code which generates JSON using jQuery. HTML structure looks like this, but there will be many departments with similar structure including same tags and classes :

 <div class="department_one">
      <h1>Name Of Manufacturer</h1>
      <div class="project">
        <div class="project_name">Name of Projects</div>
        <div class="chart">
            <span class="bar red"></span>
            <span class="bar red"></span>
            <span class="bar red"></span>
            <span class="bar red"></span>
            <span class="bar red"></span>
            <span class="bar red"></span>
            <span class="bar blue"></span>
            <span class="bar green"></span>
            <span class="bar green"></span>
            <span class="bar green"></span>
            <span class="bar gray"></span>
        </div>
    </div>    
    </div>
    </div>

The data to generated to JSON file:

name of manufacturer (from <h1></h1>);
name of project (from <div class="project_name">);
span class and sub class attributes (they all have same main class bar, but sub-classes are different and sub-classes may repeated, as you see there are two span tags with sub-class .red)

I need most advise to how structure JSON if every time there will be different amounts of same sub classes of span tags.

the expected JSON:

{
    "holder": [
        {
            "deptName": "main department",
            "project": [
                {
                    "projName": "Proj_1.2",
                    "chartItems": [
                        {
                            "color": "grey",
                            "amount": 3
                        },
                        {
                            "color": "red",
                            "amount": 7
                        },
                        {
                            "color": "blue",
                            "amount": 2
                        },
                        {
                            "color": "green",
                            "amount": 1
                        }
                    ]
                }
            ]
        },
        {
            "deptName": "other department",
            "project": [
                {
                    "projName": "Proj_2.2",
                    "chartItems": [
                        {
                            "color": "grey",
                            "amount": 1
                        },
                        {
                            "color": "red",
                            "amount": 1
                        },
                        {
                            "color": "blue",
                            "amount": 3
                        },
                        {
                            "color": "green",
                            "amount": 5
                        }
                    ]
                }
            ]
        }
    ]
}

Is [**this data**](http://jsfiddle.net/n1k1ch/YnUr2/1/) enough for your purpose? — n1k1ch, Jan 20 '14 at 23:43
Is your question on how to represent your HTML structure using JSON? — rdonatoiop, Jan 20 '14 at 23:44
@MikeBrant not even tried my code, just want someone writes it !!! — PRAISER, Jan 21 '14 at 01:05

score 0 · Answer 1 · edited May 23 '17 at 11:49

how about this, I guess this what you're looking for

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="jquery.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="holder">
            <div class="department_one">
                <h1>Name Of Manufacturer</h1>
                <div class="project">
                    <div class="project_name">Project 1</div>
                    <div class="chart">
                        <span class="bar red"></span>
                        <span class="bar red"></span>
                        <span class="bar blue"></span>
                        <span class="bar green"></span>
                        <span class="bar gray"></span>
                    </div>
                </div>    
                <div class="project">
                    <div class="project_name">Project 2</div>
                    <div class="chart">
                        <span class="bar gray"></span>
                    </div>
                </div>    
            </div>
            <div class="department_one">
                <h1>Name Of Manufacturer 2</h1>
                <div class="project">
                    <div class="project_name">Project 1</div>
                    <div class="chart">
                        <span class="bar red"></span>
                        <span class="bar blue"></span>
                        <span class="bar green"></span>
                    </div>
                </div>    
            </div>
        </div>
        <script>
            $(function() {
                var json = [];

                var holder = $('#holder');
                var departements = holder.find('> div');
                departements.each(function(idx) {
                    var projects = $(this).find('.project');

                    json[idx] = {};
                    json[idx].manufactor = $(this).find('> h1').text();
                    projects.each(function(project_idx) {
                        var charts = $(this).find('.chart > span');

                        json[idx][project_idx] = {};
                        json[idx][project_idx]['title'] = $(this).find('.project_name').text();
                        json[idx][project_idx]['charts'] = {};
                        charts.each(function() {
                            var title = $(this).attr('class');
                            json[idx][project_idx]['charts'][title] = {'title': title};
                        });
                    });
                });

                console.log(json);
            });
        </script>
    </body>
</html>

update: I edit the code, it's working as you want now, but the thing is you should learn to read the code and write your own code, not just asking to the others do that for you, have fun.

update 2: you may read this and write it by yourself

thanks for help but its quite different what i am looking for. The holder could have more then one department, each department could have more then one project and JSON should be structured like this: — , Jan 21 '14 at 00:31
I was trying to write by my self code and had some difficulties and ask for help, thanks again.The structure of generated JSON also should show the number of each color per project. (I have added structure above in my question),appreciate you help again. — , Jan 21 '14 at 01:42
what do you mean, you need I rewrite the code for you again ? — PRAISER, Jan 21 '14 at 02:36
I just say that I am so thankful but your answer was quite different from I was asking, have a good one — , Jan 21 '14 at 02:39

How to generate JSON file based on the HTML tag attributes an values

1 Answers1