Question

从下拉列表中选择JSON对象时，与该对象相关的值应显示在正文或文本框中。

这是我的JSON演示：

         {  
    "EmployeeDetails":[  
      {  
         "EmpID":1,
         "EmpName":"xyz",
         "EmpPhn":231
      },
      {  
         "EmpID":1,
         "EmpName":"xyz",
         "EmpPhn":231
      }
    ],
    "jobDetails":{  
      "JobID":1,
      "JobName":"opqr"
    },
    "DeptDetails":{  
      "deptID":1,
      "deptname":"qtrye",
      "deptloc":"xbnz"
      } 
    }

如果我选择＆＃34; JobDetails＆＃34;从droplist然后我应该显示

     JobID: 1 
     JobName: opqr

身体内容。

Answer 1

您可以使用select创建option元素，其值是JSON数据的keys。然后在change事件中，显示指定键的值。

我已实施上述解决方案：

<强> HTML

<select id="dropdown">
    <option value="EmployeeDetails">Employee Details</option>
    <option value="jobDetails">Job Details</option>
    <option value="DeptDetails">Dept Details</option>
</select>

<pre id="objView"></pre>

<强>的JavaScript

var json = {
    "EmployeeDetails": [{
        "EmpID": 1,
        "EmpName": "xyz",
        "EmpPhn": 231
    }, {
        "EmpID": 1,
        "EmpName": "xyz",
        "EmpPhn": 231
    }],
        "jobDetails": {
        "JobID": 1,
            "JobName": "opqr"
    },
        "DeptDetails": {
        "deptID": 1,
        "deptname": "qtrye",
        "deptloc": "xbnz"
    }
};

var $dropdown = $('#dropdown'),
    $objView = $('#objView');

$dropdown.on('change', function() {
    $objView.html(JSON.stringify(json[$dropdown.val()]));
});

$dropdown.trigger('change');

这是JSFiddle。

注意：我在pre标签中打印普通对象。在用HTML输出之前，你可以美化并做任何你需要的事情。

<强>更新

我已更新解决方案。我没有使用静态HTML，而是从JSON生成了option。这是：

<强> HTML

<select id="dropdown">
</select>

<pre id="objView"></pre>

<强>的JavaScript

var $dropdown = $('#dropdown'),
$objView = $('#objView'),
$docFragment = $(document.createDocumentFragment());

var json = {
    "EmployeeDetails": [{
        "EmpID": 1,
        "EmpName": "xyz",
        "EmpPhn": 231
    }, {
        "EmpID": 1,
        "EmpName": "xyz",
        "EmpPhn": 231
    }],
        "jobDetails": {
        "JobID": 1,
            "JobName": "opqr"
    },
        "DeptDetails": {
        "deptID": 1,
        "deptname": "qtrye",
        "deptloc": "xbnz"
    }
};

for (var prop in json) {
    $('<option/>', {
        val: prop,
        text: prop
    }).appendTo($docFragment);
}

$dropdown.append($docFragment);

$dropdown.on('change', function() {
    $objView.html(JSON.stringify(json[$dropdown.val()]));
});

$dropdown.trigger('change');

JSFiddle.

更新2 （关于您的评论）

可能你有几个选择。

1.您可以实现一个函数，该函数将获取对象，遍历属性并很好地打印它们。

2.您可以使用MV *框架执行上述操作，例如AngularJS。您只需绑定模型，设置一些值（例如对象），它将为您处理迭代和相关的事情。最后，它将以您喜欢的任何形式打印对象。

3.最后，如果您不想迭代属性或使用框架，您只需从字符串中删除不需要的字符即可。例如，这是用于删除花括号或方括号，双引号以及用新行替换逗号的代码：

$dropdown.on('change', function() {
    var objString = JSON.stringify(json[$dropdown.val()]);

    objString = objString.replace(/[\{\}\[\]\"]*/ig, '');    // Remove unwanted chars
    objString = objString.replace(/\,/ig, '<br/>');         // Replace commas with new lines (i.e. br tags)

    $objView.html(objString);
});

JSFiddle.

基于选定的JSON对象显示tis值使用Jquery

1 个答案: