заполнить поля ввода на основе раскрывающегося списка выбранной опции, используя JSON массив jquery

Question

Я пытаюсь автоматически заполнить поля ввода после выбора пользователем опции из выпадающего списка, используя Jquery и JSON данные, полученные от удаленного вызова API.

My Цель состоит в том, чтобы конечный пользователь выбрал клиента из раскрывающегося списка (который динамически заполняется из данных JSON, отправленных с сервера), а затем в поля ввода заполняются сведения о клиентах, хранящиеся в массиве JSON.

В настоящее время список загружается и отображает имя клиента в списке. Затем я могу просто заполнить имя клиента во всех текстовых полях.

Редактировать: я могу сделать это, сделав еще один вызов на сервер или сделать так, чтобы сервер отобразил страницу. Но я только хочу, чтобы мое приложение сделало 2 вызова на сервер, GET, чтобы получить конфигурационные файлы JSON для приложения, а затем PUT / POST для обновления записей. Я использую Laravel 7 .x для серверной части.

Мне нужно иметь доступ к другим парам ключ / значение для клиента.

Это мой JSON вывод из вызов API удаляет первое запоминание «данных» верхнего уровня, это, кажется, позволило мне отсортировать их в выпадающий список, иначе все это было бы просто как один пустой выпадающий элемент.

 [
    {
        "CUID": 5,
        "can": "Acme",
        "pmfn": "Krillin",
        "pmln": "N/A",
        "pmpe": "test1@test.com",
        "pmpn": "7343253228",
        "cct": "subContract",
        "cgt": "unarmedGuard",
        "created_at": "2020-03-29T19:12:47.000000Z",
        "updated_at": "2020-03-29T19:12:47.000000Z"
    },
    {
        "CUID": 15,
        "can": "test",
        "pmfn": "john",
        "pmln": "wick",
        "pmpe": "djdja@jdjdjdj.com",
        "pmpn": "55555555556",
        "cct": "directContract",
        "cgt": "armedGuard",
        "created_at": "2020-03-30T18:14:52.000000Z",
        "updated_at": "2020-03-30T19:44:56.000000Z"
    },
    {
        "CUID": 16,
        "can": "test43",
        "pmfn": "Jay",
        "pmln": "silent bob",
        "pmpe": "hdhdhd@gmail.com",
        "pmpn": "7343253228",
        "cct": "directContract",
        "cgt": "unarmedGuard",
        "created_at": "2020-03-30T19:46:07.000000Z",
        "updated_at": "2020-04-02T01:29:10.000000Z"
    },

Это моя текущая Jquery функция

function populateCustomer (){
    let url = 'http://10.1.10.96:8080/api/customerList'; //sets the url of the JSON data

    let dropdown = $('#selectCustomerList'); // grabs the select element based on ID
    dropdown.empty();
    dropdown.append('<option selected="true" disabled>Customer</option>'); // adds a non-clickable default
    dropdown.prop('selectedIndex', 0);

// Populate dropdown with list of customers
    $.getJSON(url, function (data) {
          $.each(data, function (key, entry) {
            dropdown.append($('<option></option>').attr('value', entry.can).text(entry.can));
            if(data.Status=="Success") // checks if drop down list item was grabbed
                {
                  $("#can").attr('value', entry.can); //populates customer name inputer field from selected drop down item
                 $("#pmfn").attr('value', entry.pmfn);
                //  $("#pmln").attr('value', entry.pmln);
                }   
          dropdown.change(function () {
            $('#can').val(this.options[this.selectedIndex].value);
            $('#pmfn').val(this.options[this.selectedIndex].value);
            //$('#pmln').val(this.options[this.selectedIndex].text);
        });

      }) 

    });
}

populateCustomer();

Основа c html

<label for="can"> Company Name</label>
<input type="text" name="customer_info" id="can" class="disabled" value="" readonly="readonly" />

<label for="pmfn">Property Mangers First Name</label>
<input type="text" name="customer_info" id="pmfn" value="" readonly="readonly" class="disabled" />

Answer 1

Хорошо, наконец-то понял это.

Первый - в моем маршруте php я удалил свой код, который лишил исходного элемента данных верхнего уровня файла JSON.

Моя самая большая ошибка заключалась в том, что $ .get JSON автоматически выполнил разбор для правильных JS массивов для вас. Поэтому, как только я понял это, после этого он стал прыгать между makeArray и JSON .parse. Ну, во-первых, вам нужно сделать строку JSON правильной строкой JavaScript, чтобы использовать JSON .parse.

Так что я пошел дальше и использовал strigify, а затем использовал JSON .parse. После этого я смог снова добавить их в свой выпадающий список, используя правильный JSON с сервера.

Вот где приходят .change и selectIndex. Я читал, что вы можете использовать .bind , но .change, кажется, работает хорошо для моего случая.

Затем код прослушивает использование для изменения элемента раскрывающегося списка - затем назначает i выбранным элементам раскрывающегося списка соответствующий номер индекса - Нам нужно вычесть -1 из этого числа, потому что selectIndex начинает индекс элемента с 1, а не с 0, как делает наш JavaScript массив данных JSON.

С этого момента мы можем затем заполнить поля / элементы идентифицированный обычный JavaScript объект / массив.

Вот функция Javascript

function populateCustomer (){
	let url = 'http://10.1.10.96:8080/api/customerList'; //sets the url of the JSON data

	let dropdown = $('#selectCustomerList'); // grabs the select element based on ID
	dropdown.empty();
	dropdown.append('<option selected="true" disabled>Customer</option>'); // adds a non-clickable default
	dropdown.prop('selectedIndex', 0);

	var custObj = $.getJSON(url, 
	function(data){ //grabs JSON data from URL and runs callback functions to change the data to JS format
		var x = JSON.stringify(data); //converts json data to string
		//console.log(x);
		x = JSON.parse(x); //parses proper json string to JS object
		
		//console.log(x); //logs all of the parsed data to console in proper JS format- SUCCESS
		//console.log(x.data[5].can); // checks to make sure that I can access the object properly -SUCCESS

		//populate dropdowns
		$.each(x.data, function (key, prop) {
		    dropdown.append($('<option></option>').attr('value', prop.can).text(prop.can));
		});

		// grabs the selected dropdown list items index ID
		$('#selectCustomerList').change(function() { //functions listens for change on the dropdown box
    		var i = this.selectedIndex; // sets i to the selected index value
    		//console.log(i); // checks that we can grab the selected index int -SUCCESS!
    		/*
    		sets i to match the appropriaite array index. 
    		When using selectIndex the Index starts at 1 not 0 so we have to set it back -1
    		*/
    		i = i - 1; 
    		// appends the property managers first name element with data stored within the array
    		 $('#can').attr('value', x.data[i].can).text( x.data[i].can); // can - customer account name
    		$('#pmfn').attr('value', x.data[i].pmfn).text( x.data[i].pmfn); //pmfn - property managers first name
    		$('#pmln').attr('value', x.data[i].pmln).text( x.data[i].pmln);// pmln - property managers last name
    	});
	});
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title> test </title>
  </head>
 <body>
 
  <fieldset>
   <select id="selectCustomerList" name="selectCustomerList">
      <option value="">Customer / Property </option>
    </select> <br />
  </fieldset>
  
  <fieldset>
    <label for="can"> Company Name</label>
    <input type="text" name="customer_info" id="can" class="disabled" value="" readonly="readonly" />

    <label for="pmfn">Property Mangers First Name</label>
    <input type="text" name="customer_info" id="pmfn" value="" readonly="readonly" class="disabled" />

    <label for="pmln">Property Mangers Last Name</label>
    <input type="text" name="customer_info" id="pmln" value="" readonly="readonly" class="disabled" />
  </fieldset>
 </body>
</html>

Надеюсь, это поможет кому-нибудь еще!