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