如何使用jQuery从json响应中检索单个元素值?

时间:2016-06-16 11:13:24

标签: javascript jquery json

下面是我用来使用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>

以下是json响应

{
    "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":[]
    },

我想使用jQuery在选择下拉列表中仅显示项目ID "ia_itemid"

2 个答案:

答案 0 :(得分:0)

通常最好将问题分解为部分,然后研究每个部分。在您的情况下,您需要:

基本上:

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

答案 1 :(得分:0)

  

我想在选择下拉菜单中仅显示项目ID“ia_itemid”   列表使用jquery

我看不到下拉DOM,而只看到ajax&amp;这是回应

如果你想获得ia_itemid,你可以使用forEach数组方法并创建一个包含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