显示嵌套数组的所有 slug
Posted
技术标签:
【中文标题】显示嵌套数组的所有 slug【英文标题】：Display all the slugs of a nested array 【发布时间】：2021-11-06 02:28:38 【问题描述】：我不明白为什么。 我有一个包含所有帖子数据的数组（json 文件），我想在我的页面上显示一些元素。 我成功地显示了简单的元素，但我不知道如何显示嵌套数组的每个元素。 我想显示每个帖子的所有 slug 类别。使用我的 const post_category 我只能访问第一个 slug。
这就是我的代码。谢谢！
[
"id": 510,
"slug": "red-bull",
"title": "Red Bull™",
"link": "#",
"thumbnail": "#",
"category": [
"term_id": 7,
"name": "Identité Visuelle",
"slug": "iv",
"term_group": 0,
"term_taxonomy_id": 7,
"taxonomy": "categorie",
"description": "",
"parent": 0,
"count": 25,
"filter": "raw",
"term_order": "1"
,
"term_id": 3,
"name": "Signalétique",
"slug": "s",
"term_group": 0,
"term_taxonomy_id": 3,
"taxonomy": "categorie",
"description": "",
"parent": 0,
"count": 7,
"filter": "raw",
"term_order": "5"
]
,
"id": 491,
"slug": "dogzout-records",
"title": "Dogzout Records®",
"link": "#",
"thumbnail": "#",
"category": [
"term_id": 7,
"name": "Identité Visuelle",
"slug": "iv",
"term_group": 0,
"term_taxonomy_id": 7,
"taxonomy": "categorie",
"description": "",
"parent": 0,
"count": 25,
"filter": "raw",
"term_order": "1"
,
"term_id": 6,
"name": "Vidéo Motion",
"slug": "vm",
"term_group": 0,
"term_taxonomy_id": 6,
"taxonomy": "categorie",
"description": "",
"parent": 0,
"count": 19,
"filter": "raw",
"term_order": "2"
]
,
...
]
$('#project-loader').on('click', function ()
let pull_page = 1;
let jsonFlag = true;
if (jsonFlag)
jsonFlag = false;
pull_page++;
$.getJSON("/bklt-wp/wp-json/projets/all-projects?page=" + pull_page, function (data)
if (data.length)
var items = [];
$.each(data, function (key, val)
const arr = $.map(val, function (el) return el );
// const post_url = arr[1];
const post_title = arr[2];
const post_link = arr[3];
const post_thumbnail = arr[4];
const post_category = arr[5].slug;
let item_string = '<li class="project__item"><a href="' + post_link + '" class="project__link" data-project="' + post_category + '">' + post_title + '\xa0' + '<div class="project__italic">(<ul class="category__list italic plus"></ul>)</div><span>,' + '\xa0' + '</span></a><img src="' + post_thumbnail + '" class="project__img"></li>';
items.push(item_string);
);
for (var i = 0; i < data.length; i++)
if (data[i]["category"].length > 0)
var outputhtml = "";
outputhtml += "(";
outputhtml += data[i]["category"].map(a => a.slug).join();
outputhtml += ")";
$(".category__list .italic .plus").append('<li class="category__item">' + outputhtml + '</li>');
if (data.length >= 25)
$('li.loader').fadeOut();
$(".project__list").append(items);
else
$(".project__list").append(items);
$('#project-loader').hide();
$('#ajax-no-posts').fadeIn();
else
$('#project-loader').hide();
$('#ajax-no-posts').fadeIn();
).done(function (data)
if (data.length) jsonFlag = true;
);
);
【问题讨论】：
【参考方案1】：你想要这样的东西。显示父类 slug 和他们的子 slug？ 我刚刚使用循环进行演示。你可以得到想法
var x = [
id: 510,
slug: "red-bull",
title: "Red Bull™",
link: "#",
thumbnail: "#",
category: [
term_id: 7,
name: "Identité Visuelle",
slug: "iv",
term_group: 0,
term_taxonomy_id: 7,
taxonomy: "categorie",
description: "",
parent: 0,
count: 25,
filter: "raw",
term_order: "1",
,
term_id: 3,
name: "Signalétique",
slug: "s",
term_group: 0,
term_taxonomy_id: 3,
taxonomy: "categorie",
description: "",
parent: 0,
count: 7,
filter: "raw",
term_order: "5",
,
],
,
id: 491,
slug: "dogzout-records",
title: "Dogzout Records®",
link: "#",
thumbnail: "#",
category: [
term_id: 7,
name: "Identité Visuelle",
slug: "iv",
term_group: 0,
term_taxonomy_id: 7,
taxonomy: "categorie",
description: "",
parent: 0,
count: 25,
filter: "raw",
term_order: "1",
,
term_id: 6,
name: "Vidéo Motion",
slug: "vm",
term_group: 0,
term_taxonomy_id: 6,
taxonomy: "categorie",
description: "",
parent: 0,
count: 19,
filter: "raw",
term_order: "2",
,
],
,
];
//updated ans:
for (var i = 0; i < x.length; i++)
var outputhtml="";
outputhtml += x[i]["slug"];
if (x[i]["category"].length > 0)
outputhtml +="(";
outputhtml+=x[i]["category"].map(a => a.slug).join();
outputhtml +=")"
console.log(outputhtml);
$(".category__list").append('<li class="category__item">' + outputhtml + '</li>');
/* old ans
for (var i = 0; i < x.length; i++)
console.log("parent slug:", x[i]["slug"]);
if (x[i]["category"].length > 0)
for (var j = 0; j < x[i]["category"].length; j++)
console.log("child slug->", x[i]["category"][j]["slug"]);
*/<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- working here. -->
<div class="category__list"></div>【讨论】：
感谢您的帮助 :) 我只想要孩子蛞蝓，你的代码似乎工作，但不是我的情况，我总是得到一个未定义的值。例如，使用您的代码，我得到：“parent slug : undefined”... 你能更新问题并分享更新的演示数据数组吗？谢谢:) 我和你一样得到了值，但我不知道如何在 html 中显示它们。对于每个帖子，我想显示所有类别的 slug。以 Red Bull 为例，我想要显示：Red Bull (iv, s)。您可以在我之前的代码中看到我可以显示标题，但不能显示每个帖子的 slug 列表。 没人帮我吗？从现在开始，我真的很挣扎。我想在 item_string 变量中显示我的 slug 名称。 我更新了我的答案，检查一下。并提供尽可能多的信息，以便轻松获得解决方案以上是关于显示嵌套数组的所有 slug的主要内容，如果未能解决你的问题，请参考以下文章