javascript - 显示嵌套数组的所有 slug

Question

我被这个困住了，我不明白为什么。我有一个包含所有帖子数据的数组（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; }
                });
            }

        });

标签： javascriptjqueryarraysjson

Answer 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>