Как динамически обновлять параметры раскрывающегося списка со значениями в массиве, сгенерированном сервером

Question

У меня есть веб-форма с двумя раскрывающимися списками, и я ищу способ динамически обновлять параметры второго поля на основе выбора из первого.

Первое поле представляет собойтип данных, а второе поле - это список баз данных, связанных с выбранным типом.

У меня базовый код работает без сбоев:

var TypeA_DbSuffixList = ['Test1', 'Test2', 'Test3'];
var TypeB_DbSuffixList = ['TestA', 'TestB', 'TestC'];

function fill_dbSuffixList(){

   document.getElementById("dbSuffixList").options.length = 0;
   var suffixMenu = document.getElementById("dbSuffixList");
   var dataFormat = document.getElementById("dataFormatType");
   var suffixList = dataFormat.value + "dbSuffixList";

   if (suffixList == 'TypeA_dbSuffixList') {
      for(index in TypeA_dbSuffixList) {
        suffixMenu.options[suffixMenu.options.length] = new Option(TypeA_dbSuffixList[index], index);
      }
   }

   if (suffixList == 'TypeB_dbSuffixList') {
      for(index in TypeB_dbSuffixList) {
        suffixMenu.options[suffixMenu.options.length] = new Option(TypeB_dbSuffixList[index], index);
      }
   } 
}

Этот код (активируется всякий раз, когда выборсделано в поле dataType) очищает существующий список параметров и заново заполняет список на основе выбранного значения поля «dataFormatType».

Проблема, с которой я сталкиваюсь, заключается в том, что фактические списки таблиц базы данных не сложнызакодированы и вместо этого генерируются с помощью следующих обращений к серверу, чтобы избежать повторного редактирования страницы при каждом добавлении новой базы данных:

var TypeA_dbSuffixList = ${TypeA_dbSuffixList};
var TypeB_dbSuffixList = ${TypeB_dbSuffixList};

Эти вызовы возвращают следующий код:

var TypeA_dbSuffixList = [Test1, Test2, Test3];
var TypeB_dbSuffixList = [TestA, TestB, TestC];

С помощью приведенного выше кода начальная функция обрабатывает каждую запись в массивах типов как неопределенную переменную, и ничего не пишетсяitten к раскрывающемуся списку.

Если бы я должен был добавить

var Test1 = "Apple";
var Test2 = "Orange";
var Test3 = "Grape";

перед циклом "for" для TypeA, тогда выбор TypeA из раскрывающегося списка dataType возвращает "Apple "," Orange "и" Grape "в качестве доступных баз данных для TypeA.

Визуально я вижу, что нужно изменить.Возвращаемые значения [Test1, Test2, Test3] должны быть ['Test1', 'Test2', 'Test3'].Я просто не уверен, как именно его изменить, и исчерпал каждый веб-поиск, о котором я могу подумать.

Есть ли способ изменить формат возвращаемых массивов или использовать существующий формат ипередавать имена переменных как выпадающие списки вместо использования значений переменных?

Любая помощь очень ценится.Я также продолжу искать ответ самостоятельно и опубликую его здесь, если найду.

Answer 1

Я думаю, что самым чистым решением было бы изменить код на стороне сервера, чтобы сгенерировать правильный массив строк String со значениями, заключенными в одинарные или двойные кавычки.

Если по какой-то причине это невозможно, и вам нужно решение на чистом JavaScript, тогда я предлагаю вам обернуть всю переменную JSP / ASP / PHP (не знаю, какую платформу вы используете) в двойные кавычки, убрать строку скобок и пробелов с помощью регулярного выражения, а затем разделить его на массив строк, используя запятую в качестве разделителя.

Итак, в вашем JavaScript это:

var TypeA_dbSuffixList = ${TypeA_dbSuffixList};

станет таким:

var TypeA_dbSuffixList = "${TypeA_dbSuffixList}".replace(/[\[\]\s]/g,"").split(",");

Answer 2

Я думаю, что лучший способ преобразовать данные на языке сервера во что-то, что будет использоваться в JavaScript, - это JSON-кодирование ваших объектов.

Я не уверен, какой язык вы используете на сервере, но в PHP вы можете сделать следующее

var arr = <?php echo json_encode( array ('abc', 'def', 'ghi') ); ?> ;

И ваш вывод будет

var arr = ['abc', 'def', 'ghi'] ;

Это обеспечит правильное экранирование строк со встроенными новыми строками, вкладками и кавычками.

1012 * JSP *

Вы сказали, что используете JSP, но код, который у вас есть, больше похож на скорость или свободный маркер внутри JSP. В JSP вы можете использовать следующее при условии, что вы загрузите Gson

var TypeA_dbSuffixList = <%= new Gson().toJson(TypeA_dbSuffixList) %>;