Pull data from SharePoint list into HTML table

Question

I have an input box in the second row of a html table. When I type in Joe Bloggs, I want it to pull the age of joe from a SharePoint list and place this in the second input box in the second column of the html table.

The SharePoint list contains two columns name and age and it has 80 different unique names

Name: Age:

Answer 1

Bind event to your input.

Filter SharePoint list item by rest api.

$.ajax({
                        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('list')/items?$filter=filtercondition&$select=filed1,field2",
                        type: "GET",
                        headers: {
                            Accept: "application/json;odata=verbose"
                        },
                        async: false,
                        cache: false,                            
                        success: function (data, status, xhr) {
                            //bind data
                            console.log("success");
                        },
                        error: function (xhr, status, error) {
                            console.log("error: " + xhr.responseText);
                        },
                        complete: function () {
                            console.log("complete");
                        }
                    })

Set value by jQuery