如何从嵌套数组中获取特定标题并设置为折叠？

Question

大家好，stackover 中的每个人我都有一个这样的 JSON 或数组

var Demands = [
   {
      "title":"Cleaning",
      "type":"Multi",
      "results":[
         {
            "id":1,
            "category_title":" Cleaning",
            "title":"Apartment Cleaning "
         },
         {
            "id":2,
            "category_title":"Cleaning",
            "title":"carwash"
         }
      ]
   },
   {
      "id":3,
      "category_title":"Services",
      "title":"car service"
   },
   {
      "title":"Transportation",
      "type":"Multi",
      "results":[
         {
            "id":4,
            "category_title":"Transportation",
            "title":"Bus Transport"
         },
         {
            "id":6,
            "category_title":"Transportation",
            "title":"Cargo"
         }
      ]
   },
   {
      "id":5,
      "category_title":"Photostatting",
      "title":"Photostatting home"
       }
]

这是我的代码：

let output = "";
for (let i = 0; i < Demands .length; i++) {
  output += `   <div class="card-header card-header-details">
                          <a class="collapsed card-link card-header-link" data-toggle="collapse" href="#collapse${i}">
                          ${Demands[i].title}
                          </a>
                        </div>
                        <div id="collapse${i}" class="collapse crad-detail-content" data-parent="#accordion">
                        <div class="card-body">
                        ${Demands[i].results[0].title}
                          </div>
                      </div> `;
  document.querySelector("#spci").innerHTML = output;
}

我想在我的collapse frsit 中显示Json 类别的标题和下一个resluts 标题，如下所示：

 <div class="border mb-4 pb-4 pt-4" style="border-radius: 10px; overflow: hidden;">
                    <div id="accordion" style="width: 90%; margin: 0 auto;">
                      <div class="card card-detail" id="spci">

                      </div>
                    </div>
                  </div>

1. 清洁
   • 公寓清洁
   • 洗车
2. 服务
   • 汽车服务
3. 交通
   • 巴士交通
   • 货物
4. 照相制版
   • 照相馆

谢谢你帮助我。

Answer 1

可使用 BOOTSTRAP v4.6 进行折叠

var Demands = [{
    title: "Cleaning",
    type: "Multi",
    results: [{
        id: 1,
        category_title: " Cleaning",
        title: "Apartment Cleaning ",
      },
      {
        id: 2,
        category_title: "Cleaning",
        title: "carwash",
      },
    ],
  },
  {
    id: 3,
    category_title: "Services",
    title: "car service",
  },
  {
    title: "Transportation",
    type: "Multi",
    results: [{
        id: 4,
        category_title: "Transportation",
        title: "Bus Transport",
      },
      {
        id: 6,
        category_title: "Transportation",
        title: "Cargo",
      },
    ],
  },
  {
    id: 5,
    category_title: "Photostatting",
    title: "Photostatting home",
  },
];

function addAccordionTitle(id, title) {
  return `<div class="card-header" id="headingOne">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#A${id}" aria-expanded="true" aria-controls="collapseOne">
                            ${title}
                        </button>
                    </h2>
                </div>`;
}

function addAccordionContent(id, list) {
  let listData = "";
  list.forEach((o) => {
    listData += `<li> ${o.title} </li>`;
  });

  return `<div id="A${id}" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                    <div class="card-body">
                        <ul>${listData}</ul>
                    </div>
                </div>`;
}

function uuidv4() {
  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
    var r = (Math.random() * 16) | 0,
      v = c == "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}

const accordion = document.querySelector(".accordion");
let content = "";
Demands.forEach((demand) => {
  const {
    title,
    category_title,
    results
  } = demand;

  const card = document.createElement("card");
  card.classList.add("card");
  const id = uuidv4();
  if (!category_title) {
    card.innerHTML +=
      addAccordionTitle(id, title) + addAccordionContent(id, results);
  } else {
    card.innerHTML +=
      addAccordionTitle(id, category_title) +
      addAccordionContent(id, [{
        title
      }]);
  }
  accordion.appendChild(card);
});

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="accordion" id="accordionExample">
</div>

Answer 2

您必须将您的 JSON 对象分解成更小的块，这样其他人才能更有效地阅读和调试您的代码。我也做过同样的事情，希望对您有所帮助！

let Demands = 
{
  first:
    { 
      "title" : "Cleaning",
      "type":"Multi",
      "results":[
        {
          "id":1,
          "category_title":" Cleaning",
          "title":"Apartment Cleaning "
        },
        {
          "id":2,
          "category_title":"Cleaning",
          "title":"carwash"
        }
    ]
  },
    third:
   {
      "title":"Transportation",
      "type":"Multi",
      "results":
      [
         {
            "id":4,
            "category_title":"Transportation",
            "title":"Bus Transport"
         },

         {
           "id":6,
           "category_title":"Transportation",
           "title":"Cargo"
         }
     ]
  },

   fourth:
    {
      "id":5,
      "category_title":"Photostatting",
      "title":"Photostatting home"
    }


}

   console.log(Demands.first.results[0].title);

注意 我只在控制台上记录了输出，这段代码给出了合适的输出！

Answer 3

您可以使用嵌套循环来实现这一点。

var Demands = [{title:"Cleaning",type:"Multi",results:[{id:1,category_title:" Cleaning",title:"Apartment Cleaning "},{id:2,category_title:"Cleaning",title:"carwash"}]},{id:3,category_title:"Services",title:"Car service"},{title:"Transportation",type:"Multi",results:[{id:4,category_title:"Transportation",title:"Bus Transport"},{id:6,category_title:"Transportation",title:"Cargo"}]},{id:5,category_title:"Photostatting",title:"Photostatting home"}];

const ul = document.querySelector("ul");

Demands.forEach(({ title, results }) => {
  const li = document.createElement("li");
  li.innerText = title;
  const ulInner = document.createElement("ul");
  
  results?.forEach(({ title }) => {
    const liInner = document.createElement("li");
    liInner.innerText = title;
    ulInner.appendChild(liInner);
  });
  
  li.appendChild(ulInner);
  ul.appendChild(li);
});

<ul>
<ul>