将数组对象与元素文本匹配

Question

我有一个对象数组，它们都遵循相同的格式和另一个对象数组

使用以下代码，我可以毫无问题地生成副标题。但是，我想要的是分隔生成的服务的子标题。小标题分隔基于services[k].category。

这是我到目前为止所拥有的，但是它不起作用。副标题生成没有问题，但其余部分不起作用：

let categories = [{
    name: "Logo and Branding"
  },
  {
    name: "Web Design"
  },
  {
    name: "Print"
  },
  {
    name: "Presentations"
  },
  {
    name: "Art & Illustration"
  },
  {
    name: "Animation"
  }
]

let services = [{
  "name": "Logo",
  "description": "Capture the essence of your brand with an unforgettable logo design.",
  "icon": "logo.svg",
  "category": "logo"
}]

function generateServices(amount) {
  var content = "";

  for (let q = 0; q < categories.length; q++) {
    content += '<div class="col-12 main_titleCol"><div class="main_title"><h2 class="servicestitle">' + categories[q].name + '</h2></div></div>';
  }

  $('.services').html(content);

  let servicesheading = $('.servicestitle');
  // add the new items 
  for (let k = 0; k < amount; k++) {
    console.log(servicesheading.html);
    if (servicesheading.innerText == services[k].description) {
      content += '<div class="col-lg-4 col-md-4"><div class="feature_item"><img class="img-fluid services-icon" src="img/services/SVG/' + services[k].icon + '"><h4>' + services[k].name + '</h4><p>' + services[k].description + '</p></div></div>';
    }
  }
}

generateServices(10)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="services"></div>

如果一切正常，最终结果应该如下所示：

Answer 1

1.让我们按类别对我们的初始服务数组进行分组：

const services = [
  { name: '...', category: '...', 'description': '...', 'icon': '...' },
  { name: '...', category: '...', 'description': '...', 'icon': '...' },
  { name: '...', category: '...', 'description': '...', 'icon': '...' },
...
];
const servicesByCategory = services.reduce((acc,el) => {
  if (acc[el.category]) acc[el.category].push(el)
  else acc[el.category] = [el]; 
  return acc;
}, {});

servicesByCategory 是一个对象，其中键是服务类别，值是分配给类别的服务数组：

{
  service1: [ { name: '...', ... }, ... ],
  service2: [ { name: '...', ... }, ... ],
  service3: [ { name: '...', ... }, ... ],
  ...
}

2。现在您可以为每个类别一个一个地处理服务：

let content = '';
for (let category in servicesByCategory) {
  // Do what you want with category name
  // Let's add category header as an example 
  content += '<div class="col-12 main_titleCol"><div class="main_title"><h2 class="servicestitle">' + category + '</h2></div></div>';
  
  for (let service of servicesByCategory[category]) {
    // Proccess services one-by-one as you did before
    content += '<div class="col-lg-4 col-md-4"><div class="feature_item"><img class="img-fluid services-icon" src="img/services/SVG/' + service.icon + '"><h4>' + service.name + '</h4><p>' + service.description +'</p></div></div>';
  }
}