How to refer to data in a JSON Object

Question

I used JavaScript to request information from an API (VexDB to be exact). The information is in this format:

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

How do I refer to the separate items, such as "sku" or "key", since there are multiple of them? (I have very little experience with JavaScript)

Answer 1

If you are returning a single record as a JSON array of key/value pairs then this could do:

Use data[0]. to access the value of the desired database column name returned in this record set.

Keep in mind that [0] is the first index of an array. This is because we don't need to refer to anything above 0 index since we only returned 1 record.

// 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":"[email protected]",
                  "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>