How to write an ajax request to fill in the fields with json data

screenshot

Json file

[ { "groupId":1, "groupName":"БСмья", "members":[ { "id":1, "nick":"coldunox", "firstname":"ПавСл", "lastname":"Π¨ΠΈΡ€ΠΎΠΊΠΎΠ²", "email":"Paul_74128_14@mail.ru", "number":89053602244 }, { "id":2, "nick":"fred", "firstname":"ПавСл", "lastname":"Π¨ΠΈΡ€ΠΎΠΊΠΎΠ²", "email":"Paul_74128_14@mail.ru", "number":89053602244 }, { "id":3, "nick":"tom", "firstname":"ПавСл", "lastname":"Π¨ΠΈΡ€ΠΎΠΊΠΎΠ²", "email":"Paul_74128_14@mail.ru", "number":89053602244 }, { "id":4, "nick":"jackson", "firstname":"ПавСл", "lastname":"Π¨ΠΈΡ€ΠΎΠΊΠΎΠ²", "email":"Paul_74128_14@mail.ru", "number":89053602244 } ] }, { "groupId":2, "groupName":"Π Π°Π±ΠΎΡ‚Π°", "members":[ { "id":1, "nick":"west", "firstname":"ПавСл", "lastname":"Π¨ΠΈΡ€ΠΎΠΊΠΎΠ²", "email":"Paul_74128_14@mail.ru", "number":89053602244 }, { "id":2, "nick":"cool_man", "firstname":"ПавСл", "lastname":"Π¨ΠΈΡ€ΠΎΠΊΠΎΠ²", "email":"Paul_74128_14@mail.ru", "number":89053602244 }, { "id":3, "nick":"tedd", "firstname":"ПавСл", "lastname":"Π¨ΠΈΡ€ΠΎΠΊΠΎΠ²", "email":"Paul_74128_14@mail.ru", "number":89053602244 }, { "id":4, "nick":"alisa", "firstname":"ПавСл", "lastname":"Π¨ΠΈΡ€ΠΎΠΊΠΎΠ²", "email":"Paul_74128_14@mail.ru", "number":89053602244 } ] }, { "groupId":3, "groupName":"Π”Ρ€ΡƒΠ³ΠΈΠ΅", "members":[ { "id":1, "nick":"coldunox", "firstname":"ПавСл", "lastname":"Π¨ΠΈΡ€ΠΎΠΊΠΎΠ²", "email":"Paul_74128_14@mail.ru", "number":89053602244 }, { "id":2, "nick":"coldunox", "firstname":"ПавСл", "lastname":"Π¨ΠΈΡ€ΠΎΠΊΠΎΠ²", "email":"Paul_74128_14@mail.ru", "number":89053602244 }, { "id":3, "nick":"coldunox", "firstname":"ПавСл", "lastname":"Π¨ΠΈΡ€ΠΎΠΊΠΎΠ²", "email":"Paul_74128_14@mail.ru", "number":89053602244 }, { "id":4, "nick":"coldunox", "firstname":"ПавСл", "lastname":"Π¨ΠΈΡ€ΠΎΠΊΠΎΠ²", "email":"Paul_74128_14@mail.ru", "number":89053602244 } ] }

]

AJAX request

 $.ajax({ type: 'GET', url: 'json_data.json', data: { get_param: 'value' }, dataType: 'json', success: function (data) { ?? }});

Html file

 <div id="contact_form" > <ul > <li > <label for="fname">Имя:</label> <input class="input" type="text" placeholder="Иван" /> </li> <li> <label for="lname">Ѐамилия:</label> <input class="input" type="text" placeholder="Иванов" /> </li> <li> <label for="mobile">Π’Π΅Π»Π΅Ρ„ΠΎΠ½:</label> <input class="input" type="text" placeholder="89605402211"/> </li> <li id="last"> <label for="email">Email:</label> <input class="input" type="text" placeholder="ivan_ivanov@example.com" /> </li> </ul>

  • There are several members in the file. What exactly should be put on the form? The data of a particular person or the data of all people? - Alexxosipov
  • This is usually done by a separate request to get data about the user, and the data from such a json file is not selected. If you need to choose from such a file, now I will write, but it will not be entirely correct. - Alexxosipov
  • The concrete person - Timofey Rhodes
  • Already added the answer below. - Alexxosipov

1 answer 1

Made a loop. For normal operation, add an ID to the input, and then refer to it in the code by their ID.

 var needed_nickname = *сюда Π½ΡƒΠΆΠ½ΠΎ ввСсти Π½ΡƒΠΆΠ½Ρ‹ΠΉ Π½Π°ΠΌ Π½ΠΈΠΊ*; $.ajax({ type: 'GET', url: 'json_data.json', dataType: 'json', success: function (data) { for (var i in data) { for (var j in data[i].members) { if (data[i].members[j].nick == needed_nickname) { $(*сСлСктор input ΠΈΠΌΠ΅Π½ΠΈ*).val(data[i].members[j].firstname); $(*сСлСктор input Ρ„Π°ΠΌΠΈΠ»ΠΈΠΈ*).val(data[i].members[j].lastname); $(*сСлСктор input Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°*).val(data[i].members[j].phone); $(*сСлСктор input email*).val(data[i].members[j].email); //Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΠΌ ΠΈΠ· Ρ†ΠΈΠΊΠ»Π°, ΠΌΡ‹ нашли Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ return false; } } } } });

UPDATE: for the click event on user login:

 $(*сСлСктор Π»ΠΎΠ³ΠΈΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ*).click(function(){ var needed_nickname = $(this).text(); $.ajax({ type: 'GET', url: 'json_data.json', data: { get_param: 'value' }, dataType: 'json', success: function (data) { console.log(data); var a = 'coldunox'; for (var i in data) { for (var j in data[i].members) { if (data[i].members[j].nick == needed_nickname) { console.log(data[i].members[j]); return false; } } } } }); });
  • name input selector --- like this input [name = 'firstname']? - Timofey Rhodes
  • Yes, you can in this way. It will be more convenient to add an id and contact #firstname, #lastname, etc. - Alexxosipov
  • Thank you, help out - Timofey Rhodes
  • You are welcome! Of course, it would be better to make the script that generates json return only 1 member object when data is sent to it. - Alexxosipov
  • Alexxosipov, and how can this be done? - Timofey Rhodes