使用 AJAX 在 JSON 中搜索答案

【问题标题】：search in JSON with AJAX使用 AJAX 在 JSON 中搜索
【发布时间】：2021-01-12 14:53:22
【问题描述】：

我必须使用输入中的值在 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同时执行。

【问题讨论】：

"if 和 else 同时执行" - 这是不可能的。

标签： javascript json ajax search

【解决方案1】：

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

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');
    }
},

【讨论】：