Question

我有一个具有以下结构的JSON文件：

[
  {
    year: "2016",
    gallery: [
               {
                 folder_heading: "FOLDER 1",
                 folder_images: [
                                  {
                                   title: "TITLE 1",
                                   filename: "IMG_9225.jpg",
                                   url: "http://www.bioner.fi/assets/uploads/2016/08/IMG_9225.jpg",
                                   alt: "",
                                   caption: "",
                                   width: 1781,
                                   height: 2560,
                                   sizes: {
                                           gallery_thumbnail: "http://www.bioner.fi/assets/uploads/2016/08/IMG_9225-300x431.jpg",
                                           gallery_thumbnail-width: 300,
                                           gallery_thumbnail-height: 431
                                   }
                                 },
                                 {
                                   title: "TITLE 2",
                                   filename: "IMG_9225.jpg",
                                   url: "http://www.bioner.fi/assets/uploads/2016/08/IMG_9225.jpg",
                                   alt: "",
                                   caption: "",
                                   width: 1781,
                                   height: 2560,
                                   sizes: {
                                           gallery_thumbnail: "http://www.bioner.fi/assets/uploads/2016/08/IMG_9225-300x431.jpg",
                                           gallery_thumbnail-width: 300,
                                           gallery_thumbnail-height: 431
                                   }
                                 },             
                 ]
    ]
},

我确实维护得到年份数字，并使用jQuery的每个函数将它们填充到列表中。但是我需要维护这个结构并以这种方式打印它：

<!-- YEARS -->
<ul>
  <li>2016</li>
  <li>2015</li>
  ........
</ul>
<!-- GALLERY CONTENT WRAPPER -->
<section>
  <!-- 2016 -->
  <div>
    <ul>
      <li>FOLDER 1</li>
      <li>FOLDER 2</li>
      <li>FOLDER 3</li>
      .........
    </ul>
    <!-- FOLDER 1 Images -->
    <div>
      <img />
      <img />
      <img />
      <img />
      .......
    <div>
    <!-- FOLDER 2 Images -->
    <div>
      <img />
      <img />
      <img />
      <img />
      .......
    <div>
   .............
  </div>
  <!-- 2015 -->
  <div>
    <ul>
      <li>FOLDER 1</li>
      <li>FOLDER 2</li>
      <li>FOLDER 3</li>
      .........
    </ul>
    <!-- FOLDER 1 Images -->
    <div>
      <img />
      <img />
      <img />
      <img />
      .......
    <div>
    <!-- FOLDER 2 Images -->
    <div>
      <img />
      <img />
      <img />
      <img />
      .......
    <div>
   .............
  </div>
 ...................
</section

我是否应该尝试使用jQuery或者使用其他框架。或者vanilla JS是实现这一目标的最有效方式。这可能是基于选项的，但我需要有人指出我正确的方向如何迭代我的JSON数组并在HTML中打印它。

为此我在WordPress中使用PHP完成了这项工作，但由于有很多图像和文件夹，我的服务器需要很长时间来处理（可能是因为我使用的是ACF的get_field和get_subfield）。

但是现在我想尝试使用WP-REST API来完成这项任务，以便更熟悉它。

我如何实现这个，以及哪种方式更快地查询数据库REAST-API + JS或ACF PHP中的所有图像？

更新我确实设法获取JSON文件并使用以下代码迭代第一个列表（年份列表）和年份数字：

$(document).ready(function() {
                $.ajax({
                  type: "GET",
                  url: 'url-to-json-file',
                  dataType: 'json',
                    error: function() {
                    alert( 'Unable to load tabs.' );
                  },
                  success: function(data) {
                    $.each(data, function(i, item){
                      var int = i + 1,
                          tapahtumaTab = '<a href="#tapahtuma-' + int + '" data-toggle="tab"><h2>' + data[i].tapahtuman_nimi + '</h2></a>';

                      $('<li />', {html: tapahtumaTab}).appendTo('#years-list');

                    })
                  }
                });
              });

Answer 1

此示例将帮助您创建动态元素。将输出附加到元素。

您的JSON数据不正确，您不能在密钥中添加“ - ”。如果你想请使用引号。

    var data = [
    {
        "year": "2016",
        "gallery": [
            {
                folder_heading: "FOLDER 1",
                folder_images: [
                    {
                        title: "TITLE 1",
                        filename: "IMG_9225.jpg",
                        url: "http://www.bioner.fi/assets/uploads/2016/08/IMG_9225.jpg",
                        alt: "",
                        caption: "",
                        width: 1781,
                        height: 2560,
                        sizes: {
                            gallery_thumbnail: "http://www.bioner.fi/assets/uploads/2016/08/IMG_9225-300x431.jpg",
                            "gallery_thumbnail-width": 300,
                            "gallery_thumbnail-height": 431
                        }
                    },
                    {
                        title: "TITLE 2",
                        filename: "IMG_9225.jpg",
                        url: "http://www.bioner.fi/assets/uploads/2016/08/IMG_9225.jpg",
                        alt: "",
                        caption: "",
                        width: 1781,
                        height: 2560,
                        sizes: {
                            gallery_thumbnail: "http://www.bioner.fi/assets/uploads/2016/08/IMG_9225-300x431.jpg",
                            "gallery_thumbnail-width": 300,
                            "gallery_thumbnail-height": 431
                        }
                    },

                ]
            }
        ]
    }
];

var finalString = "<section>";
var yearList        = "<ul>";

for(var i in data) {
    var yearData = data[i];
  yearList += "<li>" + yearData['year'] + "</li>";

  var galaryData = data[i]['gallery'];
  var folderList = "<ul>";

  for(var j in galaryData) {
    folderList += "<li>" + galaryData[i]["folder_heading"] + "</li>";

    var imageData = galaryData[i]["folder_images"];
    var imgDiv = "<div>";
    for(var k in imageData ) {
        imgDiv += "<img />";
    }
    imgDiv += "</div>";
  }

  finalString += folderList + imgDiv;
}
yearList += "</ul>";

finalString += "</section>";


finalString = yearList + finalString;
console.log(finalString);

Answer 2

标准的javascript绰绰有余。 Json是一个Javascript对象Notation就是它。你应该能够通过一些递归函数遍历所有json元素，如：LINK

循环通过JSON并打印html

2 个答案: