javascript - 按属性值计算数组中的对象并在 HTML 中显示结果

Question

我正在尝试添加计数modelname并将其附加到span元素。我首先尝试使用length类似这样的 ID 来定位 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>

标签： javascriptjquery

Answer 1

首先，您拥有的数据结构不是 JSON。它是一个对象数组。这可能影响了您所做的研究。

其次，对象中没有Filippa属性，但我认为这只是转录问题中的代码的错误，所以我在下面的示例中添加了它。

要解决您的问题，您可以遍历数组并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>