如何从嵌套数组中获取特定标题并设置为折叠？
Posted
技术标签:
【中文标题】如何从嵌套数组中获取特定标题并设置为折叠？【英文标题】：How can i get a specific title's from a nested array and set in a collapse? 【发布时间】：2021-07-30 23:10:11 【问题描述】：大家好，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>
-
清洁
公寓清洁
洗车
服务
汽车服务
交通
巴士交通
货物
照相制版
照相馆
谢谢你帮助我。
【问题讨论】：
请添加 HTML。见minimal reproducible example 您的 json 似乎无效 为什么我的 json 似乎是有效的？ 你没有 JSON，只有一个没有括号的数组（带有对象）。 所以我无法从这个数组中获取值？ 【参考方案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>【讨论】：
非常感谢正文。我不怎么感谢你！ @AliRezaei 很高兴我能帮助你【参考方案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);
注意 我只在控制台上记录了输出，这段代码给出了合适的输出！
【讨论】：
没有主体，我得到了数组或 json，就像我说它不会中断。【参考方案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>【讨论】：
@AliRezaei 请检查这是否解决了您的问题，如果您有任何问题，请告诉我。 谢谢你，我的朋友，但回答上面的工作。以上是关于如何从嵌套数组中获取特定标题并设置为折叠？的主要内容，如果未能解决你的问题，请参考以下文章