我使用 JavaScript 从 API 请求信息(确切地说是 VexDB(。信息采用以下格式：
[
{
"sku": "RE-VRC-17-4815",
"key": "RE-VRC-17-4815",
"program": "VRC",
"name": "MCC VRC Skills Challenge",
"loc_venue": "Manchester Community College",
"loc_address1": "1066 Front Street",
"loc_address2": "",
"loc_city": "Manchester",
"loc_region": "New Hampshire",
"loc_postcode": "03102",
"loc_country": "United States",
"season": "In The Zone",
"start": "2018-03-10T00:00:00+00:00",
"end": "2018-03-10T23:59:59+00:00",
"divisions": [
"Division 1"
]
},
{
"sku": "RE-VRC-17-4269",
"key": "RE-VRC-17-4269",
"program": "VRC",
"name": "NH/VT 2018 VRC State Championship",
"loc_venue": "Manchester Community College",
"loc_address1": "1066 Front Street",
"loc_address2": "",
"loc_city": "Manchester",
"loc_region": "New Hampshire",
"loc_postcode": "03102",
"loc_country": "United States",
"season": "In The Zone",
"start": "2018-02-17T00:00:00+00:00",
"end": "2018-02-17T23:59:59+00:00",
"divisions": [
"Division 1"
]
},
{
"sku": "RE-VRC-17-4051",
"key": "RE-VRC-17-4051",
"program": "VRC",
"name": "RI Middle and High School VEX Robotics Competition",
"loc_venue": "Scituate High School",
"loc_address1": "94 Trimtown Rd",
"loc_address2": "",
"loc_city": "North Scituate",
"loc_region": "Rhode Island",
"loc_postcode": "02857",
"loc_country": "United States",
"season": "In The Zone",
"start": "2018-02-10T00:00:00+00:00",
"end": "2018-02-10T23:59:59+00:00",
"divisions": [
"Division 1"
]
},
....
]
我如何引用单独的项目，例如"sku"或"key"，因为它们有多个？(我对 JavaScript 的经验很少(
如果您将单个记录作为键/值对的 JSON 数组返回，那么这可以做到：
使用 data[0]. 访问此记录集中返回的所需数据库列名的值。
请记住，[0] 是数组的第一个索引。这是因为我们不需要引用高于 0 索引的任何内容，因为我们只返回了 1 条记录。
// CLICK EVENT (by ID)
$(document).on('click','#button_select_record', function(event) {
var data = [
{
"PK_USER_ID":7000,
"USE_DTSTAMP":"2018-04-04 07:08:02",
"USE_USERNAME":"admin",
"USE_PASSWORD":"letmein",
"USE_LEVEL":"ADMIN",
"USE_STATUS":"SUSPENDED",
"USE_FIRST_NAME":"JOHN",
"USE_LAST_NAME":"DOE",
"USE_CELL":"555-111-1111",
"USE_HOME":"555-222-2222",
"USE_EMAIL":"john.doe@domain.com",
"USE_ADDRESS_1":"123 MAIN ST",
"USE_CITY":"WEST VALLEY",
"USE_STATE":"UT",
"USE_ZIP":"84128"
}
]
// If data is not '2' and its length is greater than 0...
if (data.length > 0) {
// CONVERT STR TO OBJ...
//data = JSON.parse(data);
// POPULATE FIELDS
$('#PK_USER_ID').val(data[0].PK_USER_ID);
$('#USE_DTSTAMP').val(data[0].USE_DTSTAMP);
$('#USE_USERNAME').val(data[0].USE_USERNAME);
$('#USE_PASSWORD').val(data[0].USE_PASSWORD);
$('#USE_LEVEL option[value="' + data[0].USE_LEVEL + '"]').prop("selected", true);
$('#USE_STATUS option[value="' + data[0].USE_STATUS + '"]').prop("selected", true);
$('#USE_FIRST_NAME').val(data[0].USE_FIRST_NAME);
$('#USE_LAST_NAME').val(data[0].USE_LAST_NAME);
$('#USE_CELL').val(data[0].USE_CELL);
$('#USE_HOME').val(data[0].USE_HOME);
$('#USE_EMAIL').val(data[0].USE_EMAIL);
$('#USE_ADDRESS_1').val(data[0].USE_ADDRESS_1);
$('#USE_CITY').val(data[0].USE_CITY);
$('#USE_STATE').val(data[0].USE_STATE);
$('#USE_ZIP').val(data[0].USE_ZIP);
}
// End If data.length
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" id="button_select_record">SELECT RECORD</button>
<br>
<br>
<table id="table_select_distinct_user" border="1">
<tbody>
<tr>
<td>USERNAME</td>
<td><input type="text" id="USE_USERNAME" name="USE_USERNAME" value="" readonly=""></td>
</tr>
<tr>
<td>PASSWORD</td>
<td><input type="password" id="USE_PASSWORD" name="USE_PASSWORD" value=""></td>
</tr>
<tr>
<td>LEVEL</td>
<td>
<select id="USE_LEVEL" name="USE_LEVEL">
<option value="" selected=""></option>
<option value="TECH">TECH</option>
<option value="SENIOR TECH">SENIOR TECH</option>
<option value="SUPERVISOR">SUPERVISOR</option>
<option value="MANAGER">MANAGER</option>
<option value="ADMIN">ADMIN</option>
</select>
</td>
</tr>
<tr>
<td>STATUS</td>
<td>
<select id="USE_STATUS" name="USE_STATUS">
<option value="" selected=""></option>
<option value="ACTIVE">ACTIVE</option>
<option value="SUSPENDED">SUSPENDED</option>
<option value="TERMINATED">TERMINATED</option>
<option value="RESIGNED">RESIGNED</option>
</select>
</td>
</tr>
<tr>
<td>FIRST NAME</td>
<td><input type="text" id="USE_FIRST_NAME" name="USE_FIRST_NAME" value=""></td>
</tr>
<tr>
<td>LAST NAME</td>
<td><input type="text" id="USE_LAST_NAME" name="USE_LAST_NAME" value=""></td>
</tr>
<tr>
<td>CELL</td>
<td><input type="text" id="USE_CELL" name="USE_CELL" value=""></td>
</tr>
<tr>
<td>HOME</td>
<td><input type="text" id="USE_HOME" name="USE_HOME" value=""></td>
</tr>
<tr>
<td>EMAIL</td>
<td><input type="text" id="USE_EMAIL" name="USE_EMAIL" value=""></td>
</tr>
<tr>
<td colspan="2"><input type="text" id="autocomplete" onfocus="geolocate();" value="" placeholder="search address..." style="width: 100%; margin-top: 5px; margin-bottom: 5px;"></td>
</tr>
<tr>
<td>ADDRESS 1</td>
<td><input type="text" id="USE_ADDRESS_1" name="USE_ADDRESS_1" value=""></td>
</tr>
<tr>
<td>CITY</td>
<td><input type="text" id="USE_CITY" name="USE_CITY" value=""></td>
</tr>
<tr>
<td>STATE</td>
<td><input type="text" id="USE_STATE" name="USE_STATE" value=""></td>
</tr>
<tr>
<td>ZIP</td>
<td><input type="text" id="USE_ZIP" name="USE_ZIP" value=""></td>
</tr>
</tbody>
</table>