How to retrieve a single element value from a json response using jQuery?

Question

Below is the code I'm using to retrieve a response from a server page using js:

<body>
    <div id="content">

    </div>
    <script>
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("content").innerHTML = xhttp.responseText;
        }
    };
    xhttp.open("GET", "https://api.certicasolutions.com/items/?x-ic-credential=xyz", true);
    xhttp.send();
    </script>
</body>

and following is the json response

{
    "completed":true,

    "totalItems":98891,

    "items" : [
    {
        "ia_biserial":"",
        "ia_bloomstaxonomy":"Creating",
        "ia_correctanswer":"",
        "ia_difficulty":"High",
        "ia_dok":"IV",
        "ia_extid":"231617",
        "ia_gradelevel":"GradeK",
        "ia_hasimages":"False",
        "ia_itemid":1,
        "ia_lang":"English",
        "ia_pointvalue":"2",
        "ia_pvalue":"",
        "ia_subject":"Math",
        "ia_teitype":"OR",
        "ia_vendorid":"i-321813",
        "passages":[],
        "standards":[]
    },
    {
        "ia_biserial":"",
        "ia_bloomstaxonomy":"Creating",
        "ia_correctanswer":"",
        "ia_difficulty":"High",
        "ia_dok":"IV",
        "ia_extid":"231616",
        "ia_gradelevel":"GradeK",
        "ia_hasimages":"False",
        "ia_itemid":2,
        "ia_lang":"English",
        "ia_pointvalue":"2",
        "ia_pvalue":"",
        "ia_subject":"Math",
        "ia_teitype":"OR",
        "ia_vendorid":"i-321812",
        "passages":[],
        "standards":[]
    },

I want to display only item id's "ia_itemid" in a select drop down list using jQuery.

Use `JSON.parse` to turn the response in to an array of objects, then loop through that array and populate the `select` as needed. — Rory McCrossan, Jun 16 '16 at 11:17
i'm new to jquery can you please give me an example thank you — Bhagyarekha, Jun 16 '16 at 11:17
*"using jquery"* I'll just note that you're not using jQuery in your code. It'd be a fair bit shorter if you did. — T.J. Crowder, Jun 16 '16 at 11:17
This is a duplicate of [*get json data with jquery*](http://stackoverflow.com/questions/23565400/get-json-data-with-jquery) (and many, many more of those) and [*From an array of objects, extract value of a property as array*](http://stackoverflow.com/questions/19590865/from-an-array-of-objects-extract-value-of-a-property-as-array). The answers to those questions answer this question. — T.J. Crowder, Jun 16 '16 at 11:20

score 0 · Answer 1 · edited May 23 '17 at 10:33

Usually it's best to break your problem down into parts and then research each part. In your case, you need to:

Retrieve data from a server that delivers it as JSON - see get json data with jquery (and many, many more of those)
Get just one property from each of the objects in an array - see From an array of objects, extract value of a property as array et. al.
Use that property to add options to a select box - see Adding options to a <select> using jQuery/JavaScript et. al.

Basically:

// Retrieve the data as JSON and parse it (automatically)
$.getJSON("https://api.certicasolutions.com/items/?x-ic-credential=xyz", function(data) {
    // Get the options for your select box
    var options = $("selector-for-your-select-box")[0].options;

    // Clear any old ones
    options.length = 0;

    // Add the new ones
    data.items.forEach(function(item) {
        options.add(new Option(item.ia_itemid));
    });
});

score 0 · Answer 2 · answered Jun 16 '16 at 11:30

i want to display only item id's "ia_itemid" in a select drop down list using jquery

I cannot see the drop down DOM ,instead only ajax & it's response

If you want to get ia_itemid you can use forEach array method and create an array containing value of ia_itemid

    var a = {
   "completed":true,
   "totalItems":98891,
   "items": [
        {"ia_biserial":"",
    "ia_bloomstaxonomy":"Creating"
    ,"ia_correctanswer":"",
    "ia_difficulty":"High",
    "ia_dok":"IV",
    "ia_extid":"231617",
    "ia_gradelevel":"GradeK",
    "ia_hasimages":"False",
    "ia_itemid":1,
    "ia_lang":"English",
    "ia_pointvalue":"2",
    "ia_pvalue":"",
    "ia_subject":"Math",
    "ia_teitype":"OR","ia_vendorid":"i-321813",
    "passages":[],
    "standards":[]
     },

    {
  "ia_biserial":"",
    "ia_bloomstaxonomy":"Creating",
    "ia_correctanswer":"",
    "ia_difficulty":"High",
    "ia_dok":"IV",
    "ia_extid":"231616",
    "ia_gradelevel":"GradeK",
    "ia_hasimages":"False",
    "ia_itemid":2,
    "ia_lang":"English",
    "ia_pointvalue":"2",
    "ia_pvalue":"",
    "ia_subject":"Math",
    "ia_teitype":"OR",
    "ia_vendorid":"i-321812",
    "passages":[],
    "standards":[]
    },
    ]
}

var _getItem = a.items;
var _filter = []
_getItem.forEach(function(item){
           _filter.push(item.ia_itemid)
})
var _options =""; 
// loop through _filter and create options
_filter.forEach(function(item){
   _options +='<option value="demo_'+item+'">'+item+'</option>'
})
$("#demoApp").append(_options); //Append with select element

JSFIDDLE

How to retrieve a single element value from a json response using jQuery?

2 Answers2