javascript - 使用 JSON url 数据预填充表单字段

Question

我只是尝试使用 JSON 数据(预)填充一些表单字段，但它不起作用。

这是我的脚本和表单字段:

$(document).on('change', '#wf_id', function() {
  $.getJSON("http://apis.is/horses?id=" + $("#wf_id").val(),
    function(data) {
      $.each(data.results[0], function(i, item) {
        if (item == "name_and_origin") {
          $("#wf_name_and_origin").val(item);
        } else if (item == "ueln") {
          $("#wf_ueln").val(item);
        } else if (item == "date_of_birth") {
          $("#datepicker_15").val(item);
        } else if (item == "color_code") {
          $("#wf_color_code").val(item);
        } else if (item == "color") {
          $("#wf_color").val(item);
        } else if (item == "country_located") {
          $("#wf_country_located").val(item);
        } else if (item == "fate") {
          $("#wf_fate").val(item);
        } else if (item == "microchip") {
          $("#wf_microchip").val(item);
        } else if (item.father == "id") {
          $("#wf_father_id").val(item);
        } else if (item.father == "name_and_origin") {
          $("#wf_father_name_and_origin").val(item);
        } else if (item.mother == "id") {
          $("#wf_mother_id").val(item);
        } else if (item.mother == "name_and_origin") {
          $("#wf_mother_name_and_origin").val(item);
        }
      });
    });
});

<input type="text" name="fields[1]" id="wf_id" maxlength="150" value="" />
<input type="text" name="fields[2]" id="wf_name_and_origin" maxlength="150" value="" />
<select name="fields[25]" id="gender" size="1">
  <option value="0" selected="selected">Bitte ausw&#228;hlen&#8230;</option>
  <option value="1">Stute</option>
  <option value="2">Hengst</option>
  <option value="3">Wallach</option>
  <option value="4">Geschl. unbekannt</option>
</select>
<input type="text" name="fields[14]" id="wf_ueln" maxlength="150" value="" />
<input type="text" class="datepicker" name="fields[15]" id="datepicker_15" maxlength="20" value="" />
<input type="text" name="fields[16]" id="wf_color_code" maxlength="150" value="" />
<input type="text" name="fields[17]" id="wf_color" maxlength="150" value="" />
<input type="text" name="fields[18]" id="wf_country_located" maxlength="150" value="" />
<input type="text" name="fields[19]" id="wf_fate" maxlength="150" value="" />
<input type="text" name="fields[20]" id="wf_microchip" maxlength="150" value="" />
<input type="text" name="fields[21]" id="wf_father_id" maxlength="150" value="" />
<input type="text" name="fields[22]" id="wf_father_name_and_origin" maxlength="150" value="" />
<input type="text" name="fields[23]" id="wf_mother_id" maxlength="150" value="" />
<input type="text" name="fields[24]" id="wf_mother_name_and_origin" maxlength="150" value="" />

来自apis.is的数据如下:

{
   "results":[
      {
         "id":"IS1987187700",
         "name_and_origin":"Oddur frá Selfossi",
         "ueln":"352002987187700",
         "date_of_birth":"15.06.1987",
         "color_code":"4521",
         "color":"Palomino with a star flaxen mane and tail",
         "country_located":"IS",
         "fate":"Put down",
         "microchip":null,
         "father":{
            "id":"IS1981157025",
            "name_and_origin":"Kjarval frá Sauðárkróki"
         },
         "mother":{
            "id":"IS1972287521",
            "name_and_origin":"Leira frá Þingdal"
         }
      }
   ]
}

如果我在 wf_id 中填写一个新值，脚本似乎会执行“某些操作”(考虑询问 apis.is...)，但我不想做任何事情还有其他事情要做...;)

我对调试一无所知，所以不太容易找出问题所在。

Answer 1

您需要了解您的键和值是什么。

我注释掉了 XHR 调用逻辑上的 onChange，以便简单地迭代您提供的数据。

编辑

我使用字段映射循环和函数创建了下面的第二个示例，以实现可扩展性和可重用性。

var data = {
  "results": [{
    "id": "IS1987187700",
    "name_and_origin": "Oddur frá Selfossi",
    "ueln": "352002987187700",
    "date_of_birth": "15.06.1987",
    "color_code": "4521",
    "color": "Palomino with a star flaxen mane and tail",
    "country_located": "IS",
    "fate": "Put down",
    "microchip": null,
    "father": {
      "id": "IS1981157025",
      "name_and_origin": "Kjarval frá Sauðárkróki"
    },
    "mother": {
      "id": "IS1972287521",
      "name_and_origin": "Leira frá Þingdal"
    }
  }]
};

//$(document).on('change', '#wf_id', function() {
//  $.getJSON("http://apis.is/horses?id=" + $("#wf_id").val(), function(data) {
      $.each(data.results[0], function(key, value) {
        if (key === "name_and_origin") {
          $("#wf_name_and_origin").val(value);
        } else if (key === "ueln") {
          $("#wf_ueln").val(value);
        } else if (key === "date_of_birth") {
          $("#datepicker_15").val(value);
        } else if (key === "color_code") {
          $("#wf_color_code").val(value);
        } else if (key === "color") {
          $("#wf_color").val(value);
        } else if (key === "country_located") {
          $("#wf_country_located").val(value);
        } else if (key === "fate") {
          $("#wf_fate").val(value);
        } else if (key === "microchip") {
          $("#wf_microchip").val(value);
        } else if (key.father === "id") {
          $("#wf_father_id").val(value);
        } else if (key.father === "name_and_origin") {
          $("#wf_father_name_and_origin").val(value);
        } else if (key.mother === "id") {
          $("#wf_mother_id").val(value);
        } else if (key.mother === "name_and_origin") {
          $("#wf_mother_name_and_origin").val(value);
        }
      });
//  });
//});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" name="fields[1]" id="wf_id" maxlength="150" value="" />
  <input type="text" name="fields[2]" id="wf_name_and_origin" maxlength="150" value="" />
  <select name="fields[25]" id="gender" size="1">
    <option value="0" selected="selected">Bitte ausw&#228;hlen&#8230;</option>
    <option value="1">Stute</option>
    <option value="2">Hengst</option>
    <option value="3">Wallach</option>
    <option value="4">Geschl. unbekannt</option>
  </select>
  <input type="text" name="fields[14]" id="wf_ueln" maxlength="150" value="" />
  <input type="text" class="datepicker" name="fields[15]" id="datepicker_15" maxlength="20" value="" />
  <input type="text" name="fields[16]" id="wf_color_code" maxlength="150" value="" />
  <input type="text" name="fields[17]" id="wf_color" maxlength="150" value="" />
  <input type="text" name="fields[18]" id="wf_country_located" maxlength="150" value="" />
  <input type="text" name="fields[19]" id="wf_fate" maxlength="150" value="" />
  <input type="text" name="fields[20]" id="wf_microchip" maxlength="150" value="" />
  <input type="text" name="fields[21]" id="wf_father_id" maxlength="150" value="" />
  <input type="text" name="fields[22]" id="wf_father_name_and_origin" maxlength="150" value="" />
  <input type="text" name="fields[23]" id="wf_mother_id" maxlength="150" value="" />
  <input type="text" name="fields[24]" id="wf_mother_name_and_origin" maxlength="150" value="" />
</form>

<小时/>

版本 2

您可以创建键到字段 ID 的映射。这样您就可以循环任何字段。

var data = {
  "results": [{
    "id": "IS1987187700",
    "name_and_origin": "Oddur frá Selfossi",
    "ueln": "352002987187700",
    "date_of_birth": "15.06.1987",
    "color_code": "4521",
    "color": "Palomino with a star flaxen mane and tail",
    "country_located": "IS",
    "fate": "Put down",
    "microchip": null,
    "father": {
      "id": "IS1981157025",
      "name_and_origin": "Kjarval frá Sauðárkróki"
    },
    "mother": {
      "id": "IS1972287521",
      "name_and_origin": "Leira frá Þingdal"
    }
  }]
};

// Map object keys to fields.
var keyToFieldMap = {
  "name_and_origin"        : "#wf_name_and_origin",
  "ueln"                   : "#wf_ueln",
  "date_of_birth"          : "#datepicker_15",
  "color_code"             : "#wf_color_code",
  "color"                  : "#wf_color",
  "country_located"        : "#wf_country_located",
  "fate"                   : "#wf_fate",
  "microchip"              : "#wf_microchip",
  "father" : {
    "id"                   : "#wf_father_id",
    "name_and_origin"      : "#wf_father_name_and_origin"
  },
  "mother" : {
    "id"                   : "#wf_mother_id",
    "name_and_origin"      : "#wf_mother_name_and_origin"
  }
};

function isObject(val) {
  if (val === null) { return false; }
  return ((typeof val === 'function') || (typeof val === 'object'));
}

function populateFormFromData(data, mapping) {
  $.each(data, function(key, value) {
    var field = keyToFieldMap[key];
    if (isObject(field)) {
      $.each(value, function(subKey, subValue) {
        $(field[subKey]).val(subValue);
      });
    } else {
       $(field).val(value);
    }
  });
}

//$(document).on('change', '#wf_id', function() {
//  $.getJSON("http://apis.is/horses?id=" + $("#wf_id").val(), function(data) {
      populateFormFromData(data.results[0], keyToFieldMap);
//  });
//});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" name="fields[1]" id="wf_id" maxlength="150" value="" />
  <input type="text" name="fields[2]" id="wf_name_and_origin" maxlength="150" value="" />
  <select name="fields[25]" id="gender" size="1">
    <option value="0" selected="selected">Bitte ausw&#228;hlen&#8230;</option>
    <option value="1">Stute</option>
    <option value="2">Hengst</option>
    <option value="3">Wallach</option>
    <option value="4">Geschl. unbekannt</option>
  </select>
  <input type="text" name="fields[14]" id="wf_ueln" maxlength="150" value="" />
  <input type="text" class="datepicker" name="fields[15]" id="datepicker_15" maxlength="20" value="" />
  <input type="text" name="fields[16]" id="wf_color_code" maxlength="150" value="" />
  <input type="text" name="fields[17]" id="wf_color" maxlength="150" value="" />
  <input type="text" name="fields[18]" id="wf_country_located" maxlength="150" value="" />
  <input type="text" name="fields[19]" id="wf_fate" maxlength="150" value="" />
  <input type="text" name="fields[20]" id="wf_microchip" maxlength="150" value="" />
  <input type="text" name="fields[21]" id="wf_father_id" maxlength="150" value="" />
  <input type="text" name="fields[22]" id="wf_father_name_and_origin" maxlength="150" value="" />
  <input type="text" name="fields[23]" id="wf_mother_id" maxlength="150" value="" />
  <input type="text" name="fields[24]" id="wf_mother_name_and_origin" maxlength="150" value="" />
</form>