在jquery中解析嵌套的json并在HTML页面中显示

Question

我需要解析下面的json并在html页面中显示。

1. 显示COLA，COLB，COLC在下拉列表
2. 显示类型和索引的在一个HTML表中的值。

JSON

{ 
    "mydb1": { 
    "mappings": { 
     "TAB1": { 
     "properties": { 
      "COLA": { 
      "type": "string", 
      "index": "not_analyzed" 
      }, 
      "COLB": { 
      "type": "string", 
      "index": "not_analyzed" 
      }, 
      "COLC": { 
      "type": "string", 
      "index": "not_analyzed" 
      } 
     } 
     } 
    } 
    } 
} 

Answer 1

试试这个：

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> 
<div id="dropDown"></div> 
<table id='tableVal' border='1'></table> 
<script> 
$(document).ready(function(){ 
    var jsonStr = '{\ 
     "mydb1": {\ 
      "mappings": {\ 
       "TAB1": {\ 
        "properties": {\ 
         "COLA": {\ 
          "type": "string",\ 
          "index": "not_analyzed"\ 
         },\ 
         "COLB": {\ 
          "type": "string",\ 
          "index": "not_analyzed"\ 
         },\ 
         "COLC": {\ 
          "type": "string",\ 
          "index": "not_analyzed"\ 
         }\ 
        }\ 
       }\ 
      }\ 
     }\ 
    }'; 
    var jsonObj = JSON.parse(jsonStr); 
    var drpDwn = '<select>', tabData = ''; 
    //console.log(jsonObj.mydb1.mappings.TAB1.properties); 
    var temp = jsonObj.mydb1.mappings.TAB1.properties; 
    $.each(temp,function(str, value){ 
     drpDwn += '<option>'+str+'</option>'; 
     console.log(value.index); 
     tabData += '<tr><td>'+value.type+'</td><td>'+value.index+'</td></tr>'; 
    }); 
    drpDwn += '</select>'; 
    $('#dropDown').html(drpDwn); 
    $('#tableVal').html(tabData); 
    //$.each(jsonObj.) 
}); 
</script>