Question

鉴于我不能更改输出此JSON的服务器端代码：

[
  {
    test_id: "1",
    test_name: "Diagnostic Test 1"
  },
  {
    test_id: "2",
    test_name: "Test 1"
  },
  {
    test_id: "3",
    test_name: "Test 2"
  }
]

创建按钮的最佳方法是，哪个值是内部元素的第一部分，按钮上显示的实际文本是内部元素的第二部分？

<div id="testList">
   <button value="test_id">test_name</button>
   <button value="test_id">test_name</button>
   <button value="test_id">test_name</button>
</div>

目前我正在这样做：

$.getJSON( "tests.json", "json" )
    .done(function(data) {
        $.each(data, function(){
            $.each(this, function(name, value){
                $("#testList").append('<button>'+ value +'</button>');
            })
        })
    });

分别输出按钮：

<div id="testList">
    <button>1</button>
    <button>Diagnostic Test 1</button>
    <button>2</button>
    <button>Test 1</button>
    <button>3</button>
    <button>Test 2</button>
</div>

记住：我无法更改JSON！

Answer 1

删除内部$.each - 外部循环寻址data可以访问每个对象的两个属性：

$.getJSON( "tests.json", "json" )
    .done(function(data) {
        $.each(data, function(i, d){
            $("#testList").append('<button value="' + d.test_id + '">'+ d.test_name+'</button>');
        })
    });

请注意，这不是一种完全可靠的生成元素的方式，具体取决于您对数据源的信任程度以及它们是否应该只包含纯文本。像下面这样的东西会更好：

var b = $('<button>');
b.val(d.test_id);
b.text(d.test_name);
$("#testList").append(b);

Answer 2

$.getJSON( "tests.json", "json" )
    .done(function(data) {

            $.each(this, function(ind,element){
                $("#testList").append(element.test_id + '<button>'+ element.test_name+'</button>');
            })

    });

将JSON内部元素彼此分开

2 个答案: