AJAX過濾JSON數據

Question

此刻我的JSON輸出是這樣的：

Object {results: Array(26)} 
results 
: 
Array(26) 
0 
: 
Object 
api_key 
: 
10565 
business_id 
: 
1 
created_at 
: 
null 
date 
: 
"2017-06-19" 
email 
: 
"n/a" 
facebook_business 
: 
null 
gallery_id 
: 
null 
id 
: 
1 
image 
: 
null 
instagram_business 
: 
null 
logo 
: 
null 
name 
: 
"Odeon Cinema" 
times 
: 
"12:40" 
title 
: 
"Guardians of the Galaxy" 
twitter_business 
: 
null 
type 
: 
"3" 
updated_at 
: 
null 
user_id 
: 
1 

每個對象都有一個電影院「命名」，然而只有3個電影院。

是有可能這樣的數據，並輸出它進行過濾：

影院名稱 - 膜倍 - 膜倍

影院名稱 - 膜倍 - 膜倍

影院影片時間 - 電影時間

我的阿賈克斯：

function cinema_films(film_value) { 
    $.ajax({ 
     url: '/filmsearch/' + film_value, 
     type: 'post', 
     dataType: 'json', 
     success: function(data) { 
      console.log(data); 
      var html = ''; 
      $.each(data.results, function(index, film) { 
       console.log(film.name); 
       html += film.title +' '+ film.times +' '+ film.name + '<br />'; 
      }); 
      $('#films').html(html); 
     }, 
     error: function(data) { 

     }, 
     headers: { 
     'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') 
     }     
    }); 
} 

//編輯

{"results":[{"id":2,"title":"Guardians of the Galaxy 2","times":"12:00, 15:00, 18:00, 21:00","business_id":2,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Cineworld Ashton","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":7311},{"id":2,"title":"Baywatch","times":"13:20, 16:00, 18:40, 21:20","business_id":2,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Cineworld Ashton","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":7311},{"id":2,"title":"Pirates of the Caribbean: Salazar's Revenge","times":"11:20, 14:20, 17:20, 19:10, 20:20","business_id":2,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Cineworld Ashton","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":7311},{"id":2,"title":"Wonder Woman","times":"11:30, 13:10, 14:30, 16:20, 17:20, 18:00, 19:30, 21:10","business_id":2,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Cineworld Ashton","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":7311},{"id":2,"title":"The Mummy","times":"11:30, 13:00, 13:40, 14:10, 14:40, 15:40, 16:20, 16:50, 18:20, 19:00, 19:40, 20:30, 21:00","business_id":2,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Cineworld Ashton","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":7311},{"id":2,"title":"Gifted","times":"12:50, 15:20, 17:50, 20:20","business_id":2,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Cineworld Ashton","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":7311},{"id":2,"title":"Diary Of A Wimpy Kid - The Long Haul","times":"11:50, 14:20, 16:40","business_id":2,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Cineworld Ashton","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":7311},{"id":2,"title":"Alien - Covenant","times":"11:40, 15:00, 20:50","business_id":2,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Cineworld Ashton","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":7311},{"id":2,"title":"My Cousin Rachel","times":"12:20, 15:00, 17:30, 20:00","business_id":2,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Cineworld Ashton","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":7311},{"id":2,"title":"Churchill","times":"12:20, 14:50, 17:20, 19:50","business_id":2,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Cineworld Ashton","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":7311},{"id":2,"title":"The Shack","times":"12:00, 17:50","business_id":2,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Cineworld Ashton","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":7311},{"id":1,"title":"Guardians of the Galaxy","times":"12:40","business_id":1,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Odeon Cinema","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":10565},{"id":1,"title":"Guardians of the Galaxy 2","times":"12:40","business_id":1,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Odeon Cinema","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":10565},{"id":1,"title":"Baywatch","times":"15:40, 18:20, 21:00","business_id":1,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Odeon Cinema","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":10565},{"id":1,"title":"Pirates of the Caribbean: Salazar's Revenge","times":"11:45, 14:45, 17:45, 20:45","business_id":1,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Odeon Cinema","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":10565},{"id":1,"title":"Wonder Woman","times":"13:45, 15:15, 17:00, 20:15, 21:15","business_id":1,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Odeon Cinema","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":10565},{"id":1,"title":"The Mummy","times":"12:30, 14:30, 17:15, 18:30, 20:00","business_id":1,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Odeon Cinema","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":10565},{"id":1,"title":"My Cousin Rachel","times":"12:00, 12:30, 15:00, 17:30","business_id":1,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Odeon Cinema","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":10565},{"id":1,"title":"Churchill","times":"12:45, 15:15, 17:45, 20:15","business_id":1,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Odeon Cinema","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":10565},{"id":3,"title":"Baywatch","times":"12:50, 15:30, 18:10, 20:50","business_id":3,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Odeon Rochdale","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":9434},{"id":3,"title":"Pirates of the Caribbean: Salazar's Revenge","times":"13:45, 16:45, 19:45","business_id":3,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Odeon Rochdale","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":9434},{"id":3,"title":"Wonder Woman","times":"13:10, 14:00, 16:20, 17:10, 19:30, 20:30","business_id":3,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Odeon Rochdale","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":9434},{"id":3,"title":"The Mummy","times":"12:00, 13:00, 14:45, 15:45, 17:20, 18:20, 19:00, 21:00","business_id":3,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Odeon Rochdale","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":9434},{"id":3,"title":"Gifted","times":"13:45, 18:30, 21:00","business_id":3,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Odeon Rochdale","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":9434},{"id":3,"title":"Diary Of A Wimpy Kid - The Long Haul","times":"14:00, 16:30","business_id":3,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Odeon Rochdale","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":9434},{"id":3,"title":"My Cousin Rachel","times":"12:20, 15:00, 18:00, 20:40","business_id":3,"date":"2017-06-19","created_at":null,"updated_at":null,"name":"Odeon Rochdale","type":"3","email":"n/a","logo":null,"twitter_business":null,"facebook_business":null,"instagram_business":null,"image":null,"gallery_id":null,"user_id":1,"api_key":9434}]} 

Answer 1

我不知道你想用什麼HTML，但這樣的事情應該給你的總體思路。本質上，它循環播放數據，記錄它遇到的電影名稱，並向陣列添加記錄，每個電影都有一個記錄。一旦完成，它會遍歷所有陣列並寫出HTML，爲每個電影特定的陣列開始一個新的列表。這確保數據按電影分組。

success: function(data) { 
    console.log(data); 
    //sort the data into arrays for the different cinemas 
    var cinemas = {}; 

    $.each(data.results, function(index, film) { //here assumed "id" is ID of the cinema, from the JSON sample it looks like this is the case 
    if (!cinemas[film.id]) { cinemas[film.id] = { "name": film.name, "films": [] }; } //create new cinema if needed 
    cinemas[film.id].films.push(film); 
    }); 

    //loop through each cinema and generate a list of films per-cinema 
    var html = ''; 
    $.each(cinemas, function(prop, cinema) { 
    html += "<h4>" + cinema.name + "</h4><ul>"; 

    $.each(cinema.films, function(index, film) 
    { 
     html += "<li>" + film.title +'<br/>'+ film.times + '</li>'; 
    }); 
    html += "</ul>"; 
    }); 

    $('#films').html(html); 
}, 

這是有點冗長，正如我在評論中提到你或許可以通過使用正確的數據庫查詢代碼，並提前創造更多的結構化JSON更有效地做分組部在服務器上。顯然，你仍然需要一些東西來通過使用JSON在客戶端創建相關的HTML。