создание выпадающего списка с помощью json

#javascript #json #node.js #pug

#javascript #json #node.js #pug

Вопрос:

Требование: у меня есть ответ json, который я хотел бы преобразовать в dropdown . Я использую шаблон jade для обработки итерации, но у меня возникают проблемы с получением значений. Я бы хотел, чтобы sys_id передавался как значение при выборе параметра (u_product_name) из выпадающего списка.

JS

 result = //result is coming from API but this is what a console.log(result) shows
{ result: 
   [ 
     { sys_id: '7d950856',
       u_product_name: 'ACCESS' },
     { sys_id: '803279e1',
       u_product_name: 'AVAYA' },
     { sys_id: '87484c96',
       u_product_name: 'ADAMO' },
     { sys_id: 'b3b9001a',
       u_product_name: 'ADM' } 
   ]
}
  

Ближайшая вещь, которую я получил, — это использование JSON strigify , хотя это разделило каждую букву как новую опцию.

Ответ №1:

Попробуйте это, я надеюсь, это сработает :

HTML :

 <select id="items"></select>
  

Скрипт :

  var data={ result: 
                   [ 
                     { sys_id: '7d950856',
                       u_product_name: 'ACCESS' },
                     { sys_id: '803279e1',
                       u_product_name: 'AVAYA' },
                     { sys_id: '87484c96',
                       u_product_name: 'ADAMO' },
                     { sys_id: 'b3b9001a',
                       u_product_name: 'ADM' } 
                   ]
    };

var elemArr = data.result;
var select = document.getElementById( 'items' );

for (options in elemArr) {
select.add( new Option( elemArr[options].u_product_name) );
}
  

Рабочая демонстрация: https://jsfiddle.net/rohitjindal/ndfv8cy0 /

Ответ №2:

Пример

     var data={ result: 
       [ 
         { sys_id: '7d950856',
           u_product_name: 'ACCESS' },
         { sys_id: '803279e1',
           u_product_name: 'AVAYA' },
         { sys_id: '87484c96',
           u_product_name: 'ADAMO' },
         { sys_id: 'b3b9001a',
           u_product_name: 'ADM' } 
       ]
    }

    $.each(data.result, function (key, value) {

        $("#yourdropdownid").append($("<option></option>").val(value.sys_id).html(value.u_product_name));

    });