如何根據HTML標記屬性生成JSON文件值

-1

我想將一些HMTL數據保存到JSON文件，並需要使用jQuery生成JSON的代碼的幫助。 HTML結構看起來是這樣，但會有很多部門有類似的結構，包括相同的標籤和類：如何根據HTML標記屬性生成JSON文件值

<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">）;
跨度類和子類屬性（它們都具有相同的主類吧，但子類是不同的子類可以重複，當你看到有與.red子類中的兩個跨度標籤）

我需要大多數建議如何結構JSON如果每次會有不同數量的相同子類別的span標籤。

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

來源

2014-01-20 IrecoGnizedYou

寫你有什麼企圖實現什麼？ –

[**此數據**]（http://jsfiddle.net/n1k1ch/YnUr2/1/）是否足以滿足您的需求？ – n1k1ch

您的問題是關於如何使用JSON來表示您的HTML結構？ – rdonatoiop

這個怎麼樣，我想這個你正在尋找

<!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和自己

來源

2014-01-20 23:56:38 PRAISER

感謝您的幫助，但它與我所尋找的完全不同。持有者可以有多個部門，每個部門可以有多個項目，JSON的結構應該是這樣的： – IrecoGnizedYou

它的工作原理與你剛纔所說的一樣 – PRAISER

我試圖用自己的代碼寫下來，並且遇到了一些困難，並要求幫助，再次感謝。生成的JSON的結構也應該顯示每個項目的每種顏色的數量。（我在問題中添加了上面的結構），感謝您的幫助。 – IrecoGnizedYou

如何根據HTML標記屬性生成JSON文件值

回答

相關問題