javascript - 如何使用jquery获取json数据

Question

我生成的单选按钮取决于 jsondata id 和名称。但下面的代码不起作用。如何解决此问题。

Json:

{
    "a": [
            { "id" : "a1", "family" : "Family" },
            { "id" : "a2", "family" : "Family" },
            { "id" : "a3", "family" : "Family" }
        ],
    "b": [
            { "id" : "b1", "family" : "Family" },
            { "id" : "b2", "family" : "Family" },
            { "id" : "b3", "family" : "Family" }
        ],
    "c": [
            { "id" : "c1", "family" : "Family" },
            { "id" : "c2", "family" : "Family" },
            { "id" : "c3", "family" : "Family" }
        ]
}

Javascript:

generateFamily("a");

function generateFamily(objt) {
    var Objct = objt;
    $.getJSON("./js/result.json", function(result) {
        var testobj = result + "." + Objct;
        $.each(testobj, function(i, field) {
            var char = "a";
            char = "ln-" + char;
            $("#dFour").append("<li class=" + char + " style='display: list-item;'><a href='#'><span class='m'><input type='radio' class='fbol_ff' value=" + field.id + " family=" + field.family + "/></span>" + field.family + "</a></li>");
        });
    });
}

Answer 1

您需要从 JSON 数据中读取 a 字段。由于您在变量中传递 a，即 objt。您可以使用 Bracket notation 获取它

var testobj=result[objt];

而不是

var testobj = result + "." + Objct;

var result = {
  "a": [{
    "id": "a1",
    "family": "Family"
  }, {
    "id": "a2",
    "family": "Family"
  }, {
    "id": "a3",
    "family": "Family"
  }],
  "b": [{
    "id": "b1",
    "family": "Family"
  }, {
    "id": "b2",
    "family": "Family"
  }, {
    "id": "b3",
    "family": "Family"
  }],
  "c": [{
    "id": "c1",
    "family": "Family"
  }, {
    "id": "c2",
    "family": "Family"
  }, {
    "id": "c3",
    "family": "Family"
  }]
};


generateFamily("a");

function generateFamily(objt) {
  var testobj = result[objt];
  $.each(testobj, function(i, field) {
    var char = "a";
    char = "ln-" + char;
    $("#dFour").append("<li class=" + char + " style='display: list-item;'><a href='#'><span class='m'><input type='radio' class='fbol_ff' value=" + field.id + " family=" + field.family + "/></span>" + field.family + "</a></li>");

  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='dFour'></div>