Advertisement
Liliana797979

How to populate select with correct category

Jun 9th, 2022
1,319
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. Пример за select:
  2.  
  3. 1) Правим си една функция, която да генерира нужния масив с определената структура от обекти, които ще ни помогнат да генерираме в последствие options.
  4.  
  5. function createOptions(category) {
  6.   return [
  7.     { content: 'Real Estate', value: 'estate' },
  8.     { content: 'Vehicles', value: 'vehicles' },
  9.     { content: 'Furniture', value: 'furniture' },
  10.     { content: 'Electronics', value: 'electronics' },
  11.     { content: 'Other', value: 'other' },
  12.   ].map((x, i) => (x.value === category ? { ...x, selected: 'selected' } : x));
  13. }
  14.  
  15. В property content запазваме нещото , което ще е като стойност на самия option ( което ще вижда потребителят )
  16. В value се запазва името на property-то , което сме дефинирали в модела.
  17.  
  18. Когато достъпим route за вземане на данните ( GET ):
  19.  
  20.  async edit(req, res) {
  21.       const { auctionId } = req.params;
  22.       const record = await auctionModel.findById(auctionId);
  23. // Тук първо си взимаме записа, който искаме да визуализираме и използваме категорията, която е запазена в базата за този запис.
  24. // Подаваме текущата категория и при генериране на желания масив, ще се подсигурим ,че ще селектираме правилния option.
  25.  
  26.       record.options = createOptions(record.category);
  27.       res.render(
  28.         'auction/edit',
  29.         Object.assign(record, { title: 'Edit Auction', auctionTitle: record.title })
  30.       );
  31.     }
  32. Добавяме едно ново property към обекта record.options = и тук извикваме функцията, която да ни генерира нужния масив.
  33. Остава да използваме този обект в темплейта ( edit.hbs ):
  34.  
  35. <select name='category'>
  36.   {{#each options}}
  37.   <option value='{{value}}' {{selected}} >{{content}}</option>
  38.   {{/each}}
  39. </select>
  40.  
  41. Тук използваме property "options", което сме поставили в record и за всеки един елемент ( обект ) от масива си генерираме нужния option. Като ще се селектира и правилната категория, която сме подали във функцията createOptions.
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement