Вопросы Теги

Используя JavaScript и jQuery, для заполнения связанных избранных полей со структурой массива

Что такое NullPointerException?

Хорошим местом для начала является JavaDocs . Они охватывают это:

Брошено, когда приложение пытается использовать null в случае, когда требуется объект. К ним относятся:

  • Вызов метода экземпляра нулевого объекта.
  • Доступ или изменение поля нулевого объекта.
  • Выполнение длины null, как если бы это был массив.
  • Доступ или изменение слотов с нулевым значением, как если бы это был массив.
  • Бросать нуль, как если бы это было значение Throwable.

Приложения должны бросать экземпляры этого класса для указания других незаконных видов использования нулевого объекта.

blockquote>

Также, если вы попытаетесь использовать нулевую ссылку с synchronized, который также выдаст это исключение, за JLS : 

SynchronizedStatement:
    synchronized ( Expression ) Block
  • В противном случае, если значение выражения равно null, NullPointerException.
blockquote>

Как это исправить?

Итак, у вас есть NullPointerException. Как вы это исправите? Возьмем простой пример, который выдает NullPointerException: 

public class Printer {
    private String name;

    public void setName(String name) {
        this.name = name;
    }

    public void print() {
        printString(name);
    }

    private void printString(String s) {
        System.out.println(s + " (" + s.length() + ")");
    }

    public static void main(String[] args) {
        Printer printer = new Printer();
        printer.print();
    }
}

Идентифицирует нулевые значения

. Первый шаг - точно определить , значения которого вызывают исключение . Для этого нам нужно выполнить некоторую отладку. Важно научиться читать stacktrace . Это покажет вам, где было выбрано исключение: 

Exception in thread "main" java.lang.NullPointerException
    at Printer.printString(Printer.java:13)
    at Printer.print(Printer.java:9)
    at Printer.main(Printer.java:19)

Здесь мы видим, что исключение выбрано в строке 13 (в методе printString). Посмотрите на строку и проверьте, какие значения равны нулю, добавив протоколирующие операторы или используя отладчик . Мы обнаруживаем, что s имеет значение null, а вызов метода length на него вызывает исключение. Мы видим, что программа перестает бросать исключение, когда s.length() удаляется из метода.

Трассировка, где эти значения взяты из

Затем проверьте, откуда это значение. Следуя вызовам метода, мы видим, что s передается с printString(name) в методе print(), а this.name - null.

Трассировка, где эти значения должны быть установлены

Где установлен this.name? В методе setName(String). С некоторой дополнительной отладкой мы видим, что этот метод вообще не вызывается. Если этот метод был вызван, обязательно проверьте порядок , что эти методы вызывают, а метод set не будет называться после методом печати. ​​

Этого достаточно, чтобы дать нам решение: добавить вызов printer.setName() перед вызовом printer.print().

Другие исправления

Переменная может иметь значение по умолчанию (и setName может помешать ему установить значение null): 

private String name = "";

Либо метод print, либо printString может проверить значение null например: 

printString((name == null) ? "" : name);

Или вы можете создать класс, чтобы name всегда имел ненулевое значение : 

public class Printer {
    private final String name;

    public Printer(String name) {
        this.name = Objects.requireNonNull(name);
    }

    public void print() {
        printString(name);
    }

    private void printString(String s) {
        System.out.println(s + " (" + s.length() + ")");
    }

    public static void main(String[] args) {
        Printer printer = new Printer("123");
        printer.print();
    }
}

См. также:

Я все еще не могу найти проблему

Если вы попытались отладить проблему и до сих пор не имеете решения, вы можете отправить вопрос для получения дополнительной справки, но не забудьте включить то, что вы пробовали до сих пор. Как минимум, включите stacktrace в вопрос и отметьте важные номера строк в коде. Также попробуйте сначала упростить код (см. SSCCE ).

23
задан Community 23 May 2017 в 10:30
поделиться

3 ответа

Я предпочитаю структуру данных как это: 

var carMakers = [
    { name: 'Honda', models: [
            { name: 'Accord', features: ['2dr', '4dr'] },
            { name: 'CRV', features: ['2dr', 'Hatchback'] },
            { name: 'Pilot', features: ['base', 'superDuper'] }
        ]},

    { name: 'Toyota', models: [
            { name: 'Prius', features: ['green', 'superGreen'] },
            { name: 'Camry', features: ['sporty', 'square'] },
            { name: 'Corolla', features: ['cheap', 'superFly'] }
        ]}
];

, Учитывая эти три списка выборки с идентификатором: 'производитель', 'модель' и 'функции', можно управлять ими с этим (я верю этому, симпатичны сам объяснительный): 

// returns array of elements whose 'prop' property is 'value'
function filterByProperty(arr, prop, value) {
    return $.grep(arr, function (item) { return item[prop] == value });
}

// populates select list from array of items given as objects: { name: 'text', value: 'value' }
function populateSelect(el, items) {
    el.options.length = 0;
    if (items.length > 0)
        el.options[0] = new Option('please select', '');

    $.each(items, function () {
        el.options[el.options.length] = new Option(this.name, this.value);
    });
}

// initialization
$(document).ready(function () {
    // populating 1st select list
    populateSelect($('#maker').get(0), $.map(carMakers, function(maker) { return { name: maker.name, value: maker.name} }));

    // populating 2nd select list
    $('#maker').bind('change', function() {
        var makerName = this.value,
            carMaker = filterByProperty(carMakers, 'name', makerName),
            models = [];

        if (carMaker.length > 0)
            models = $.map(carMaker[0].models, function(model) { return { name: model.name, value: makerName + '.' + model.name} });

        populateSelect($('#model').get(0), models);
        $('#model').trigger('change');
    });

    // populating 3rd select list
    $('#model').bind('change', function () {
        var nameAndModel = this.value.split('.'),
            features = [];

        if (2 == nameAndModel.length) {
            var makerName = nameAndModel[0], 
                carModel = nameAndModel[1],
                carMaker = filterByProperty(carMakers, 'name', makerName);

            if (carMaker.length > 0) {
                var model = filterByProperty(carMaker[0].models, 'name', carModel)

                if (model.length > 0)
                    features = $.map(model[0].features, function(feature) { return { name: feature, value: makerName + '.' + carModel + '.' + feature} })
            }
        }

        populateSelect($('#feature').get(0), features);
    })

    // alerting value on 3rd select list change
    $('#feature').bind('change', function () { 
        if (this.value.length > 0)
            alert(this.value);
    })
});
45
ответ дан Marko Dumic 29 November 2019 в 01:33
поделиться

Благодаря ответу от @Marko Dunic я смог создать массив (данные) структура, на которую можно сослаться для заполнения 3 избранных полей. Я не использовал код реализации только потому, что я не полностью понял его..., это работает, как отправлено. Я возвращусь к этому коду позже, поскольку я изучаю jQuery. Мой код отправляется ниже (очевидно, Ваша ссылка на jQuery может отличаться) 

<html><head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">
var cars = [
{ name: 'Honda', models: [
{ name: 'Accord', features: ['2dr', '4dr'] },
{ name: 'CRV', features: ['2dr', 'Hatchback'] },
{ name: 'Pilot', features: ['base', 'superDuper'] }
   ]},
{ name: 'Toyota', models: [
{ name: 'Prius', features: ['green', 'superGreen'] },
{ name: 'Camry', features: ['sporty', 'square'] },
{ name: 'Corolla', features: ['cheap', 'superFly'] }
   ]
 }
];
$(function() {
var options = '' ;
for (var i = 0; i < cars.length; i++) {
    var opt = cars[i].name ;
    if (i == 0){  options += '<option selected value="' + opt + '">' + opt + '</option>'; }
    else {options += '<option value="' + opt + '">' + opt + '</option>'; } 
}
$("#maker").html(options);   // populate select box with array

var options = '' ;
for (var i=0; i < cars[0].models.length; i++) { 
    var opt = cars[0].models[0].name ;
    if (i==0){options += '<option selected value="' + opt + '">' + opt + '</option>';}
    else {options += '<option value="' + opt + '">' + opt + '</option>';} 
}
$("#model").html(options);   // populate select box with array

var options = '' ;
for (var i=0; i < cars[0].models[0].features.length; i++) { 
    var opt = cars[0].models[0].features[i] ;
    if (i==0){options += '<option selected value="' + opt + '">' + opt + '</option>';}
    else {options += '<option value="' + opt + '">' + opt + '</option>';}
}
$("#feature").html(options);   // populate select box with array

$("#maker").bind("click",
    function() {
        $("#model").children().remove() ;       // clear select box
        for(var i=0; i<cars.length; i++) {
            if (cars[i].name == this.value) {
                var options = '' ;
                for (var j=0; j < cars[i].models.length; j++) { 
                    var opt= cars[i].models[j].name ;
                    if (j==0) {options += '<option selected value="' + opt + '">' + opt + '</option>';}
                    else {options += '<option value="' + opt + '">' + opt + '</option>';} 
                }
                break;
            }
        }
        $("#model").html(options);   // populate select box with array

        $("#feature").children().remove() ;     // clear select box
        for(var i=0; i<cars.length; i++) {
            for(var j=0; j<cars[i].models.length; j++) {
                if(cars[i].models[j].name == $("#model").val()) {
                    var options = '' ;
                    for (var k=0; k < cars[i].models[j].features.length; k++) { 
                        var opt = cars[i].models[j].features[k] ;
                        if (k==0){options += '<option selected value="' + opt + '">' + opt + '</option>';}
                        else {options += '<option value="' + opt + '">' + opt + '</option>';}
                    }
                    break;
                }
            }
        }
        $("#feature").html(options);   // populate select box with array
    });

    $("#model").bind("click",
        function() {
            $("#feature").children().remove() ;     // clear select box
            for(var i=0; i<cars.length; i++) {
                for(var j=0; j<cars[i].models.length; j++) {
                    if(cars[i].models[j].name == this.value) {
                        var options = '' ;
                        for (var k=0; k < cars[i].models[j].features.length; k++) { 
                            var opt = cars[i].models[j].features[k] ;
                            if (k==0){options += '<option selected value="' + opt  + '">' + opt  + '</option>';}
                            else {options += '<option value="' + opt  + '">' + opt  + '</option>';}
                        }
                        break ;
                    }
                }
            }
            $("#feature").html(options);   // populate select box with array
    });
});
</script>
</head> <body>
<div id="selection">
<select id="maker"size="10" style="{width=75px}"></select>
<select id="model" size="10" style="{width=75px}"></select>
<select id="feature" size="10"style="{width=75px}"></select>
</div></body></html>
3
ответ дан Jay Corbett 29 November 2019 в 01:33
поделиться

Необходимо смотреть здесь для избранного управления полем. Поскольку, что Вы хотите, я думаю , JSON сделает правильное задание для Вас. Во всяком случае, на вашем месте, я сделаю этот путь: Когда я изменяю первый выбор, я делаю запрос ajax. С ajax ответом я заполню второе поле. То же для второго поля и там Вам заполнили третье поле с правильными данными.

1
ответ дан Ionuț Staicu 29 November 2019 в 01:33
поделиться
Другие вопросы по тегам:

Похожие вопросы: