时间戳

首页 > 解决方案 > 使用 AJAX 在 JSON 中搜索

javascript - 使用 AJAX 在 JSON 中搜索

问题描述

我必须使用输入中的值在 json 文件中进行搜索，一切都很好地捕获了值和事件，但是当我迭代时，我会发生一些意想不到的事情。如何根据此搜索选择对象？问题是，在执行 .each 时，它会遍历所有记录，即使是那些未找到的记录。

$( document ).on('turbolinks:load', common_events)

function common_events(){
    $('.rut-input').on('change', function(event){
        $rut = $(this).val();
        var searchField = $rut;
        var expression = new RegExp(searchField, "i");
        event.preventDefault();
        $.ajax({
            type: "GET",
            url: '/companies/',
            dataType: 'JSON',
            success: function(companies){
                $.each(companies, function(i, company) {
                    if (company.rut.search(expression) > -1){
                        console.log(company.id);

                        $('.name-input').empty();
                        $('.name-input').val(company.name);
                        $('.name-input').addClass('disabled-input');
                        $('.form-group').removeClass('hide');
                        console.log(company.address);
                        if (company.address == null ){
                            $('.address-input').removeClass('disabled-input');
                        };
                    }
                    else {
                        console.log('no encuentra');
                        console.log(company);
                        $('.form-group').removeClass('hide');
                        $('.form-control').removeClass('disabled-input');
                    };
                });
            },
            error: function(companies){
                console.log('A ocurrido un error')
            },
        });
    });
}

执行事件时，同时执行 if 和 else。

标签： javascriptjsonajaxsearch

解决方案

似乎你真的不想用每个来迭代公司数组。你想找到一个匹配的公司，然后用那个记录做点什么。

success: function(companies){
    const company = companies.find(c => c.rut.search(expression) > -1);
    
    if (company) {
        console.log(company.id);

        $('.name-input').empty();
        $('.name-input').val(company.name);
        $('.name-input').addClass('disabled-input');
        $('.form-group').removeClass('hide');
        console.log(company.address);
        if (company.address == null ){
            $('.address-input').removeClass('disabled-input');
        }
    } else {
        console.log('no encuentra');
        console.log(company);
        $('.form-group').removeClass('hide');
        $('.form-control').removeClass('disabled-input');
    }
},

推荐阅读