Как изменить код JavaScript, чтобы данные брать из файла .json?

Question

[Ilya Loopashko]

Есть скрипт, он выдает "живой" поиск. Данные хранятся в самом файле JS. Как изменить код так, чтобы данные можно было добавлять из внешнего JSON файла.

var data = [
    {"id":"1","employee_name":"Alex","employee_salary":"320800","employee_age":"61","profile_image":"default_profile.png"}];

$('#txt-search').keyup(function(){
            var searchField = $(this).val();
            if(searchField === '')  {
                $('#filter-records').html('');
                return;
            }           
            var regex = new RegExp(searchField, "i");
            var output = '<div class="row">';
            var count = 1;
              $.each(data, function(key, val){
                if ((val.employee_salary.search(regex) != -1) || (val.employee_name.search(regex) != -1)) {
                  output += '<div class="col-md-6 well">';
                  output += '<div class="col-md-3"><img class="img-responsive" src="'+val.profile_image+'" alt="'+ val.employee_name +'" /></div>';
                  output += '<div class="col-md-7">';
                  output += '<h5>' + val.employee_name + '</h5>';
                  output += '<p>' + val.employee_salary + '</p>'
                  output += '</div>';
                  output += '</div>';
                  if(count%2 == 0){
                    output += '</div><div class="row">'
                  }
                  count++;
                }
              });
              output += '</div>';
              $('#filter-records').html(output);
        });

Answer 1

[Athanor]

Добавить подобный метод и вызывать его для установки data

Answer 2

[Loli E1ON]

Сделать get запрос на json файл и занести результат в переменную.
Сделать get запрос можно при помощи xmlhttprequest:
https://learn.javascript.ru/ajax-xmlhttprequest

Answer 3

[Alex]

Запрос на извлечение данных выполняется только при первом обращении

var data = []
$('#txt-search').keyup(async function(){
            var searchField = $(this).val();
            if(searchField === '')  {
                $('#filter-records').html('');
                return;
            }

            if (!data.length) {
                data = await fetch('url/to/file.json').then(r => r.json())
            }

            var regex = new RegExp(searchField, "i");
            var output = '<div class="row">';
            var count = 1;
              $.each(data, function(key, val){
                if ((val.employee_salary.search(regex) != -1) || (val.employee_name.search(regex) != -1)) {
                  output += '<div class="col-md-6 well">';
                  output += '<div class="col-md-3"><img class="img-responsive" src="'+val.profile_image+'" alt="'+ val.employee_name +'" /></div>';
                  output += '<div class="col-md-7">';
                  output += '<h5>' + val.employee_name + '</h5>';
                  output += '<p>' + val.employee_salary + '</p>'
                  output += '</div>';
                  output += '</div>';
                  if(count%2 == 0){
                    output += '</div><div class="row">'
                  }
                  count++;
                }
              });
              output += '</div>';
              $('#filter-records').html(output);
        });

Или можно так: Запрос на извлечение данных выполняется сразу при загрузке

var dataPromise = fetch('url/to/file.json').then(r => r.json())

$('#txt-search').keyup(async function(){
            var searchField = $(this).val();
            if(searchField === '')  {
                $('#filter-records').html('');
                return;
            }

            const data = await dataPromise;

            var regex = new RegExp(searchField, "i");
            var output = '<div class="row">';
            var count = 1;
              $.each(data, function(key, val){
                if ((val.employee_salary.search(regex) != -1) || (val.employee_name.search(regex) != -1)) {
                  output += '<div class="col-md-6 well">';
                  output += '<div class="col-md-3"><img class="img-responsive" src="'+val.profile_image+'" alt="'+ val.employee_name +'" /></div>';
                  output += '<div class="col-md-7">';
                  output += '<h5>' + val.employee_name + '</h5>';
                  output += '<p>' + val.employee_salary + '</p>'
                  output += '</div>';
                  output += '</div>';
                  if(count%2 == 0){
                    output += '</div><div class="row">'
                  }
                  count++;
                }
              });
              output += '</div>';
              $('#filter-records').html(output);
        });

Comments

[Loli E1ON]

var dataPromise = [];

let response = await fetch('url');
if (response.ok) {
 dataPromise = await response.json();
}