如何根据 HTML 标签属性和值生成 JSON 文件答案

【问题标题】：How to generate JSON file based on the HTML tag attributes an values如何根据 HTML 标签属性和值生成 JSON 文件
【发布时间】：2014-01-21 10:48:47
【问题描述】：

我想将一些 HMTL 数据保存到 JSON 文件中，并且需要有关使用 jQuery 生成 JSON 的代码的帮助。 HTML结构看起来是这样的，但是会有很多类似结构的部门，包括相同的标签和类：

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

要生成到 JSON 文件的数据：

制造商名称（来自<h1></h1>）；
项目名称（来自<div class="project_name">）；
span 类和子类属性（它们都有相同的主类栏，但子类不同，子类可能会重复，如您所见有两个带有子类 .red 的 span 标签）

如果每次都有不同数量的相同子类的 span 标签，我最需要建议如何构建 JSON。

预期的 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
                        }
                    ]
                }
            ]
        }
    ]
}

【问题讨论】：

你有没有尝试实现一些东西？
this data 是否足以满足您的目的？
您的问题是关于如何使用 JSON 表示您的 HTML 结构？
@MikeBrant 甚至没有尝试过我的代码，只是希望有人写它！！！
@n1k1ch 感谢您推荐 JSON 结构

标签： jquery html ajax json

【解决方案1】：

这个怎么样，我猜这就是你要找的东西

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

更新：我编辑了代码，它现在可以按您的意愿工作，但问题是您应该学会阅读代码并编写自己的代码，而不仅仅是要求其他人为您这样做，玩得开心。

更新 2：你可以read this自己写

【讨论】：

感谢您的帮助，但它与我正在寻找的完全不同。持有者可以有多个部门，每个部门可以有多个项目，JSON 的结构应该是这样的：
我在尝试自己编写代码时遇到了一些困难并寻求帮助，再次感谢。生成的JSON的结构也应该显示每个项目每种颜色的数量。（我在我的问题中添加了上面的结构），再次感谢您的帮助。
什么意思，需要我重新为你重写代码吗？
我只是说我很感激，但你的回答和我问的完全不同，祝你好运