Заполнить множественный выбор из массива localstorage

ProgramBox

Заполнить множественный выбор из массива localstorage

Post author:admin
Запись опубликована:25 ноября, 2022
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

У меня есть следующий массив.

 [
  {
    "costprice": "12.00",
    "costpricemarker": "12.00",
    "discount": 0,
    "itemName": "Cheese cake",
    "itemid": "812",
    "price": "22.00",
    "quantity": 1
  },
  {
    "costprice": "12.00",
    "costpricemarker": "12.00",
    "discount": 0,
    "itemName": "Milo",
    "itemid": "811",
    "price": "22.00",
    "quantity": 2
  },
  {
    "costprice": "12.00",
    "costpricemarker": "12.00",
    "discount": 0,
    "itemName": "Orange Juice",
    "itemid": "809",
    "price": "22.00",
    "quantity": 2
  }
]

Первый выбор заполняется следующим кодом:

 var tableItems = JSON.parse(localStorage.getItem('item'));
for (var i = 0; i < tableItems.length; i  ) {
  $('#sbOne').append('<option value=''   tableItems[i]   ''>'  
    tableItems[i]['itemName']   '</option>');
  if (tableItems[i]['itemName'] >) {
    $('#sbOne').append('<option value=''   tableItems[i]   ''>'  
      tableItems[i]['itemName']   '</option>');
  }
}

Это приводит к сырному пирогу, Майло, апельсиновому соку в мультиселекте. Однако, поскольку апельсиновый сок и Майло имеют количество 2, я хочу, чтобы моим результатом был сырный пирог, Майло, Майло, апельсиновый сок, апельсиновый сок

Что я пробовал:

 for (var i=0 ;i<tableItems.length; i  ) {
  $("#sbOne").append("<option value='"   tableItems[i]   "'>"  
    tableItems[i]['itemName']   "</option>");
  if (tableItems[i]['quantity'] >1) {
    $("#sbOne").append("<option value='"   tableItems[i]   "'>"  
      tableItems[i]['itemName']   "</option>");
  }
}

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

1. Вы можете просто использовать другой for цикл и настроить его на цикл над quantity tableItems[i] : for (var j=0; j<tableItems[i]['quantity']; j ) { $("#sbOne").append("<option value='" tableItems[i] "'>" tableItems[i]['itemName'] "</option>"); }

2. Вы что-то упускаете после того > , как в if (tableItems[i]['itemName'] >)

Ответ №1:

Как насчет этого:

 var tableItems = JSON.parse(localStorage.getItem('item'));

for (var i=0 ;i<tableItems.length; i  ) {
            quantity  = tableItems[i]["quantity"]
            for (var x=0; x<quantity ; x  ) {
                 //do your appending here ....
                $("#sbOne").append("<option value='"   tableItems[i]   "'>"   tableItems[i]['itemName']   "</option>")
            }
}

Возможно, вам потребуется настроить фактическую добавляемую строку, поскольку я не совсем знаком с контекстом элемента, который вы добавляете…

Ответ №2:

возможно, вы можете упростить свой код и использовать innerHTML для однократного ввода HTML.

 const tableItems = [
  {
    "costprice": "12.00",
    "costpricemarker": "12.00",
    "discount": 0,
    "itemName": "Cheese cake",
    "itemid": "812",
    "price": "22.00",
    "quantity": 1
  },
  {
    "costprice": "12.00",
    "costpricemarker": "12.00",
    "discount": 0,
    "itemName": "Milo",
    "itemid": "811",
    "price": "22.00",
    "quantity": 2
  },
  {
    "costprice": "12.00",
    "costpricemarker": "12.00",
    "discount": 0,
    "itemName": "Orange Juice",
    "itemid": "809",
    "price": "22.00",
    "quantity": 2
  }
];

document.getElementById("sbOne").innerHTML  = tableItems.map(item => {
    const html = [];
  let qty = item.quantity;
  while (qty-- > 0) {
    html.push(`<option value="${item.itemid}">${item.itemName}</option>`);
  }
  return html.join("");
 }).join("");

 <select id="sbOne">

</select>

Развернуть фрагмент

Ответ №3:

Как упоминали другие, вы можете сделать это с помощью вложенного цикла for , или вы можете сделать это с помощью простой строки (также для управления DOM только один раз после подготовки всех элементов)

     const itemsHTML = tableItems.map(item => 
        Array(item.quantity).fill("<option value='"   item.itemid   "'>"   item.itemName   "</option>").join('')
    ).join('');
    $("#sbOne").append(itemsHTML)

Ответ №4:

Обратите внимание, что эта ваша строка:

 "<option value='"   tableItems[i]   "'>"

приводит к этому:

 <option value="[object Object]">

[object Object] это совсем не полезно.

Вы, вероятно, предполагали это:

 "<option value='"   JSON.stringify(tableItems[i])   "'>"

который сохранит элемент в виде строки JSON в <object> значение:

 <option value="{" costprice":"12.00","costpricemarker":"12.00","discount":0,"itemname":"orange="" juice","itemid":"809","price":"22.00","quantity":2}"="">Orange Juice</option>

Вот версия вашего кода, которая использует некоторые функции ES6:

 const tableItems = [
  {
    "costprice": "12.00",
    "costpricemarker": "12.00",
    "discount": 0,
    "itemName": "Cheese cake",
    "itemid": "812",
    "price": "22.00",
    "quantity": 1
  },
  {
    "costprice": "12.00",
    "costpricemarker": "12.00",
    "discount": 0,
    "itemName": "Milo",
    "itemid": "811",
    "price": "22.00",
    "quantity": 2
  },
  {
    "costprice": "12.00",
    "costpricemarker": "12.00",
    "discount": 0,
    "itemName": "Orange Juice",
    "itemid": "809",
    "price": "22.00",
    "quantity": 2
  }
];

let mySelect = $("#mySelect");

// create all the select content
const selectContent = tableItems.reduce((acc, el) => {

  const {itemName, quantity} = el;
  
  // create `quantity` number of <option> elements
  for (let i = 0; i < quantity; i  ) {
    acc  = `
    <option value="${JSON.stringify(el)}">${itemName}</option>`;
  }
  return acc;
}, {});

// add content to select
mySelect.empty();
mySelect.append(selectContent);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="mySelect" multiple="true" size="5"></select>

Развернуть фрагмент

Метки: Заполнить множественный выбор из массива localstorage