如何将带有方括号的 JSON 数组的数据放入 JQuery 模板中

Question

如何在 JQuery 模板中访问此 json-data 对象中的不同属性？

输入json数据：

 `[ [ [ "Title", "Awakening Now" ], [ "Date", "2012-05-25" ], [ "VideoDescription", "Test video awakening now" ], [ "Language", "english" ], [ "Category", "special" ], [ "VideoLink", "http://www.premanandasatsangtvarchive.org/international/2013-05-25enL.mp4" ], [ "HDLink", "http://www.premanandasatsangtvarchive.org/international/2013-05-25en.mp4" ], [ "PosterFrame", "http://www.premanandasatsangtvarchive.org/archive/images/2013-05-25.jpg" ], [ "id", "2" ], [ "TitleGerman", "testtitlegerman" ], [ "SubtitleGerman", "testsubtitlegerman" ] ], 

[ [ "Title", "Glimpses of Our True Nature." ], [ "Date", "2012-05-16" ], [ "VideoDescription", "testvideo glimpses" ], [ "Language", "english" ], [ "Category", "archives" ], [ "VideoLink", "http://www.premanandasatsangtvarchive.org/international/2012-05-18enL.mp4" ], [ "HDLink", "http://www.premanandasatsangtvarchive.org/international/2012-05-18en.mp4" ], [ "PosterFrame", "http://www.premanandasatsangtvarchive.org/archive/images/2012-05-18.jpg" ], [ "id", "1" ], [ "TitleGerman", "test" ], [ "SubtitleGerman", "test" ] ] ]`

Javascript：

$.ajax({
      url: 'scripts/videodatabasehandler.php',
      type: 'post',
      data: {'language': lang},
      success: function(data, status) {
        var sattv=jQuery.parseJSON(data);


         // Render the books using the template
        $("#videoTemplate").tmpl(sattv[0]).appendTo("#videoContainer");

         if(data == "ok") {
            console.log(data);
          alert("hallo"+data);
        }
      },
      error: function(xhr, desc, err) {
        console.log(xhr);
        console.log("Details: " + desc + "\nError:" + err);
      }
    }); // end ajax call
  });

JQuery 模板和 html 代码：

   <div id="videoContainer"></div>



      <script id="videoTemplate" type="text/x-jQuery-tmpl">
            <div class="date">${Date}</div>
            <br/>
                <div class="title">${Title}</div>
            <br/>
            </div>
            <video id="2013-05-25en" class="sublime" data-initial-overlay-enable='false' 
            poster="http://www.premanandasatsangtvarchive.org/archive/images/2013-05-25.jpg" 
            width="100%" title="EN Changes" data-uid="2013-05-25en" preload="none">
      <source src="http://www.premanandasatsangtvarchive.org/international/2013-05-25enL.mp4" />
      <source src="http://www.premanandasatsangtvarchive.org/international/2013-05-25en.mp4" data-quality="hd" />
        </video>    
        <br /><br />
        New item..

        </script>

示例页面：http://www.premanandasatsangtvarchive.org/sattv/sattvresponsive/datatables-1.10.2/examples/server_side/videoarchives.html

Answer 1

问题是您的带有电影列表的 json 包含数组中的字段，因此您为每个带有 jQuery.parseJSON(data); 的电影得到的是一个字段数组，其中每个字段本身就是一个包含 2 个项目的数组 fieldName 和 价值。您的服务器没有发送 json 对象数组，其中 json 中的每个字段都是电影的属性！

例如，如果您使用console.log(sattv[0]); 记录您的第一个视频，您将在控制台中看到类似这样的内容：

[数组[2]，数组[2]，数组[2]，数组[2]，数组[2]，数组[2]，数组[2]， 数组[2]、数组[2]、数组[2]、数组[2]]

要找到标题，您需要访问视频中的第一个数组，然后访问它的第二个元素，如console.log(sattv[0][0][1])。

在模板中以这种方式工作会很困难（并且容易出错，因为您的代码将依赖于字段的顺序），因此您可以将这些数组转换为适当的 json 对象。 您可以编写一些代码，通过数组将您的初始 sattv 转换为适当的电影 json 对象数组：

var getMovies = function(moviesArray){
    var movies = [];
    if(!moviesArray || !moviesArray.length) return;
    $.each(moviesArray, function(index, elem){
        movies.push(getSingleMovie(elem));
    });
    return movies;
}

var getSingleMovie = function(fieldsArray){
    var movie = {};
    if(!fieldsArray || !fieldsArray.length) return;
    $.each(fieldsArray, function(index, field){
        movie[field[0]] = field[1]; //example: movie["Title"] = "Awakening Now"
    });
    return movie;
}

这样你可以做到var movies = getMovies(sattv);，现在如果你看一下movies[0]，你会注意到它是一个正确的json对象，你可以像movies[0].Title一样通过名称访问它的属性。

所以您现在可以使用转换后的对象来渲染第一部电影，如下所示：

$("#videoTemplate").tmpl(movies[0]).appendTo("#videoContainer");

我创建了a fiddle，你可以试试看。