如何在我的选择中从json获取对象数据？

Question

So I have a select element and I am appending the data I am getting back from my API.

function getHeadData() {
    $("#itemSelect").empty();

    if (headitemData.length < 1) {
        $.getJSON("http://localhost:9000/api/helmets", function (key, value) {
            console.log("request helmets");
            var item = "";
            headitemData = key;
            var len = key.length;
            for (let i = 0; i < len; i++) {
                item += '<option value="' + key + '">' + key[i].Name + '</option>';
            }
            $('#itemSelect').append(item);
        });
    }
    else {
        clearIndex(headitemData);
    }
}

That right there returns this

Which is just what I want. But if I want to get other data like.. the Icon Let's say I want to log to the console when I select a item from the Select element, how would I do that?

The end goal is to print out the Icon property of the json object when I change item in the Select.

JsonData example

<ItemModel>
<ACrush>+0</ACrush>
<AMagic>-5</AMagic>
<ARange>-2</ARange>
<ASlash>+0</ASlash>
<AStab>+0</AStab>
<DCrush>+43</DCrush>
<DMagic>-3</DMagic>
<DRange>+48</DRange>
<DSlash>+49</DSlash>
<DStab>+47</DStab>
<Icon>
https://vignette.wikia.nocookie.net/2007scape/images/a/a0/3rd_age_full_helmet.png/revision/latest?cb=20141217224936
</Icon>
<MagicDamage>+0%</MagicDamage>
<MeleeStrength>+0</MeleeStrength>
<Name>3rd age full helmet</Name>
<Prayer>+0</Prayer>
<RangedStrength>+0</RangedStrength>
<Slayer>0</Slayer>
<Undead>0</Undead>
</ItemModel>

Answer 1

You can set a data for your option like:

'<option data-icon="'+ key[i].Icon +'"></option>'

And then you can bind a change for your select after create your list:

$('select').on('change', function () {
  const _this = $(this).find(':selected');
  const icon = _this.attr('data-icon');

  console.log(icon);
})

Answer 2

Since you want to use the data in other areas of your code, use a closure to create an environment where your variables don't leak out into the global space. For example, with the callback:

(function () {
  var myData;
  function test(callback) {
   $.getJSON("http://localhost:9000/api/helmets",function  (data) {
        callback(data);
      });
    }
    test(function (data) {
      myData = data;
    });
    function getHeadData() {
      $("#itemSelect").empty();
     if (headitemData.length < 1){
        console.log("request helmets");
        var item = "";
        headitemData = myData;
        var len = myData.length;
        for (let i = 0; i < len; i++) {
            item += '<option value="' +myData+ '">' + myData[i].Name + '</option>';
        }
        $('#itemSelect').append(item);
     }
    else {
      clearIndex(headitemData);
    }
  }
  $("#itemSelect").on("change",function(){
      var value = $(this).val();
      var newData = myData.filter(item=>{
      if(myData.Name==value){
         return item;
      }
    });
   console.log(newData.Icon);
});

myData is cached as a global variable specific to that closure. Note the other functions will only be able to use that variable once the callback has completed.

Answer 3

Modified version below:

    function getHeadData() {
    $("#itemSelect").empty();

    if (headitemData.length < 1) {
        $.getJSON("http://localhost:9000/api/helmets", function (key, value) {
            console.log("request helmets");
            var item = "";
            headitemData = key;
            var len = key.length;
            for (let i = 0; i < len; i++) {
                var icon=key[i].Icon;
                item += '<option data-icon="'+icon+'" value="' + key + '">' + key[i].Name + '</option>';
            }
            $('#itemSelect').append(item);
        });
    }
    else {
        clearIndex(headitemData);
    }
}

Simple test to get the Icon from the first option in select:

//Get first option to test output
var test=$("#itemselect option:first");
//Read data-icon
console.log(test.data('icon'));
//To update data-icon
test.data('icon','new icon');

To echo when select is changed

$("#itemselect").change(function(e) {
  var optionSelected = $("option:selected", this);
  console.log (optionSelected.data('icon'));

});