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>

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

Answer 1

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

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

[Array [2]，Array [2]，Array [2]，Array [2]，Array [2]，Array [2]，Array [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对象，你可以通过{{1}中的名称访问它的属性}。

所以你现在可以使用转换的对象渲染第一部电影，如：

movies[0].Title

我创建了a fiddle，所以你可以尝试一下。

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

1 个答案: