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