deadloop
@deadloop
Начинающий верстальщик

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

Есть скрипт, он выдает "живой" поиск. Данные хранятся в самом файле 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);
        });
  • Вопрос задан
  • 210 просмотров
Решения вопроса 3
Athanor
@Athanor
Лайк + Решение: не жмись, нажми
Добавить подобный метод и вызывать его для установки data
Ответ написан
E1ON
@E1ON
Full stack web developer
Сделать get запрос на json файл и занести результат в переменную.
Сделать get запрос можно при помощи xmlhttprequest:
https://learn.javascript.ru/ajax-xmlhttprequest
Ответ написан
Kozack
@Kozack Куратор тега JavaScript
Запрос на извлечение данных выполняется только при первом обращении
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);
        });
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Stream Labs Москва
До 150 000 ₽
Myagi Минск
от 3 000 до 4 000 $
Salesbeat Москва
от 150 000 до 250 000 ₽
17 февр. 2020, в 00:30
1500 руб./за проект
16 февр. 2020, в 22:28
2000 руб./за проект