javascript - 按属性值对数组中的对象进行计数并以 HTML 形式显示结果

Question

我正在尝试添加 modelname 的计数并将其附加到 span 元素。我首先尝试使用 length 来定位 ID，类似这样，但我无法让它工作。最好的方法是什么？

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 属性，但我认为这只是抄写问题中的代码时出现的错误，因此我将其添加到下面的示例中。

要解决您的问题，您可以循环遍历数组并根据对象中的 model 值增加相关 span 中的值。试试这个:

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>