how to get json data using jquery

Question

I am generating radio button depends on jsondata id and name. but below code is not working.how to resove this issue.

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>");
        });
    });
}

what is the error showing in the console?

S M
– S M

2016-01-28 11:58:45 +00:00
Commented Jan 28, 2016 at 11:58 — S M
– S M, Commented Jan 28, 2016 at 11:58

Satpal · Accepted Answer · 2016-01-28 12:11:06Z

2

You nee to read the a field from JSON data. Since you are passing a in a variable i.e. objt. You can fetch that using Bracket notation

var testobj=result[objt];

instead of

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>

edited Jan 28, 2016 at 12:11

answered Jan 28, 2016 at 12:02

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Satpal Over a year ago

@supermans, See code snippet, I have used JSON object in example

P. Santhoshkumar · Accepted Answer · 2016-01-29 10:26:17Z

0

Use the length of json in the loop.

generateFamily("a");

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

answered Jan 29, 2016 at 10:26

P. Santhoshkumar

12 bronze badges

Collectives™ on Stack Overflow

how to get json data using jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related