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

Question

如何在JQuery模板中访问这个json数据对象中的不同属性？

输入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>

示例页面：side/视频存档.side

Answer 1

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

例如，如果您用console.log(sattv[0]);记录您的第一个视频，您将在控制台中看到如下所示：

[Array2，Array2，Array2]

要找到标题，您需要访问视频中的第一个数组，然后访问它的第二个元素(如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");

我已经创建了小提琴，所以您可以尝试一下。