Реализация заполнения полей из json-файла в ajax-запросе при нажатии по ссылке

324

15 июля 2017, 09:58

Как написать ajax-запрос на заполнение полей json-данными

JSON-файл

[
{
    "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-запрос

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

HTML-файл

<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>

Answer 1

Сделал цикл. Для нормальной работы добавь input'ам ID, а затем обращайся к ним в коде по их 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: для события click на логин пользователя:

$(*селектор логина пользователя*).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;
                    }
                }
            }
        }
        }); 
    });