Question

我想将一些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
                        }
                    ]
                }
            ]
        }
    ]
}

Answer 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自己写一下

如何基于HTML标记生成JSON文件属性值

1 个答案: