Подсчитать объекты в массиве по значению свойства и отобразить результат в HTML

Question

Я пытаюсь добавить счетное число modelname и добавить его к элементу span. Сначала я попытался указать идентификатор с помощью length, что-то вроде этого, но я не смог заставить его работать. Какой лучший способ сделать это?

var modelCount = document.getElementById('#modelcount');
modelCount.innerHTML = productList.modelname.length;

var productList = [{
  "model": "halvskap",
  "modelname": "Halvskåp",
  "type": "Standard",
  "typename": "Standard",
  "family": "Berlin"
}, {
  "model": "helskap",
  "modelname": "Helskåp",
  "type": "Parskap",
  "typename": "Parskap",
  "family": "Copenhagen"
}, {
  "model": "helskap",
  "modelname": "Helskåp",
  "type": "Parskap",
  "typename": "Parskap",
  "family": "Copenhagen"
}, {
  "model": "smafackskap",
  "modelname": "Småfackskåp",
  "type": "Standard",
  "typename": "Standard",
  "family": "Filippa"
}];

<div class="dropdown">
  <div>
    <input type="radio" name="model" id="halvskap" value="halvskap">
    <label>Halvskåp</label>
    <span></span>
  </div>
  <div>
    <input type="radio" name="model" id="helskap" value="helskap">
    <label>Helskåp</label>
    <span id="modelcount"></span>
  </div>
  <div>
    <input type="radio" name="model" id="smafackskap" value="smafackskap">
    <label>Småfackskåp</label>
    <span></span>
  </div>
  <div>
    <input type="radio" name="model" id="zskap" value="zskap">
    <label>Z-skåp</label>
    <span></span>
  </div>
</div>

Answer 1

Во-первых, ваша структура данных не JSON. Это массив объектов. Это могло повлиять на исследование, которое вы сделали.

Во-вторых, в объекте нет свойства Filippa, но я предполагаю, что это просто ошибка при расшифровке кода в вопросе, поэтому я добавил его в следующем примере.

Чтобы решить вашу проблему, вы можете l oop через массив и увеличить значение в соответствующем span на основе значения model в объекте. Попробуйте это:

productList.Filippa.forEach(o => $('#' + o.model).siblings('span').text((i, t) => (parseInt(t, 10) || 0) + 1));

Полный рабочий пример:

var productList = {
  Filippa: [{
    "model": "halvskap",
    "modelname": "Halvskåp",
    "type": "Standard",
    "typename": "Standard",
    "family": "Berlin"
  }, {
    "model": "helskap",
    "modelname": "Helskåp",
    "type": "Parskap",
    "typename": "Parskap",
    "family": "Copenhagen"
  }, {
    "model": "helskap",
    "modelname": "Helskåp",
    "type": "Parskap",
    "typename": "Parskap",
    "family": "Copenhagen"
  }, {
    "model": "smafackskap",
    "modelname": "Småfackskåp",
    "type": "Standard",
    "typename": "Standard",
    "family": "Filippa"
  }]
}

productList.Filippa.forEach(o => $('#' + o.model).siblings('span').text((i, t) => (parseInt(t, 10) || 0) + 1));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
  <div>
    <input type="radio" name="model" id="halvskap" value="halvskap">
    <label>Halvskåp</label>
    (<span>0</span>)
  </div>
  <div>
    <input type="radio" name="model" id="helskap" value="helskap">
    <label>Helskåp</label>
    (<span>0</span>)
  </div>
  <div>
    <input type="radio" name="model" id="smafackskap" value="smafackskap">
    <label>Småfackskåp</label>
    (<span>0</span>)
  </div>
  <div>
    <input type="radio" name="model" id="zskap" value="zskap">
    <label>Z-skåp</label>
    (<span>0</span>)
  </div>
</div>

Answer 2

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

var productList = [
  {
        "model": "halvskap",
        "modelname": "Halvskåp",
        "type": "Standard",
        "typename": "Standard",
        "family": "Berlin"   
    },
    {
        "model": "helskap",
        "modelname": "Helskåp",
        "type": "Parskap",
        "typename": "Parskap",
        "family": "Copenhagen"
    },               
    {
        "model": "helskap",
        "modelname": "Helskåp",
        "type": "Parskap",
        "typename": "Parskap",
        "family": "Copenhagen"
    },

    {
        "model": "smafackskap",
        "modelname": "Småfackskåp",
        "type": "Standard",
        "typename": "Standard",
        "family": "Filippa"
    }
];

var count = productList.filter(obj => obj.modelname == "Helskåp").length
console.log(count)

Вы можете отфильтровать любой объект, который вы хотите, и получить длину

Answer 3

ваш javascript селектор должен выглядеть следующим образом:

var modelCount = document.getElementById('modelcount');
modelCount.innerHTML = productList.length;

просто удалите знак # из вашего кода.