[英]How do I push an object into an array nested in an object and retain reactivity in Vue
[英]How do I push a parameter into a multiple nested array/object structure?
給定以下數據庫
DB = [
{
genre:'thriller',
movies:[
{
title:'the usual suspects', release_date:1999
}
]},
{
genre:'commedy',
movies:[
{
title:'pinapple express', release_date:2008
}
]}
]
我想檢查其中是否存在流派和電影,如果沒有,請添加。
到目前為止,我已經有了這段代碼。 唯一缺少的是,如果不存在(注釋過並加粗)的電影,則將(新的)電影推到流派的索引處。
var moviesDB = function (array, genre, movie) {
var x = []
for (var i = 0; i < DB.length; i++) {
x.push(DB[i].genre);
}
if(x.includes(genre) == false) {
DB.push({genre: genre, movies: []});
} else {
console.log("genre already here")
}
var y = []
for (var i = 0; i < DB.length; i++) {
DB[i].movies.forEach (function (object){
y.push(object.title)
})
}
if(y.includes(movie) == false) {
//**push movie into the existing object.**
} else {
return `the movie the ${movie} is already in the database!`
}
return DB;
}
Sp moviesDB = function (DB, "drama", "A drama movie")
應添加新的流派對象(戲劇),並且在電影數組中添加帶有“戲劇電影”標題的新對象。 moviesDB = function (DB, "commedy", "Scary movie")
應僅在現有的commedy流派對象中添加帶有電影標題的新對象。
DB = [ { genre:'thriller', movies:[ { title:'the usual suspects', release_date:1999 } ]}, { genre:'commedy', movies:[ { title:'pinapple express', release_date:2008 } ]} ] var moviesDB = function (array, genre, movie) { var x = [] for (var i = 0; i < DB.length; i++) { x.push(DB[i].genre); } if(x.includes(genre) == false) { DB.push({genre: genre, movies: []}); } else { console.log("genre already here") } var y = [] for (var i = 0; i < DB.length; i++) { DB[i].movies.forEach (function (object){ y.push(object.title) }) } if(y.includes(movie) == false) { //**push movie into the existing object.** } else { return `the movie the ${movie} is already in the database!` } return DB; } console.log(moviesDB(DB, "drama", "A drama movie"))
我將使用下面的代碼來解決這個問題,該代碼易於理解和可讀,而對於沒有太多經驗的人來說,這些代碼可能是“怪異的”。
好吧,您可以首先循環播放對象以檢查每種genre
,如果它們之一與您要插入的對象匹配,然后“選擇”擁有該類型的對象。 如果未找到任何類型,則創建一個新對象。
在擁有持有該流派的對象(新的一個或一個已經存在)之后,然后開始循環瀏覽該流派的電影,進行與該流派相同的檢查,不同之處在於,如果找到了電影title
,則只需返回某內容並不要將movies
推送到movies
列表。 如果找不到,則推動它。
看下面,看看代碼是否可以理解(我在代碼內部添加了一些注釋)
let DB = [{ genre: 'thriller', movies: [{ title: 'the usual suspects', release_date: 1999 }] }, { genre: 'commedy', movies: [{ title: 'pinapple express', release_date: 2008 }] } ] var moviesDB = function(array, genre, movie) { let selectedObj = null; //let's look for the genre, if exists for (let i = 0; i < array.length; i++) { let obj = array[i]; if (obj.genre == genre) { selectedObj = obj; break } } //if the genre is not found, create a new one if (selectedObj == null) { selectedObj = { genre: genre, movies: [] } array.push(selectedObj) } //let's check the movies of this genre let movies = selectedObj.movies for (let i = 0; i < movies.length; i++) { let mv = movies[i]; if (mv.title == movie.title) { return "The movie '" + movie.title + "' already exists in genre: " + genre; } } //if the code didn't returned above, them insert new movie selectedObj.movies.push(movie) return "The movie '" + movie.title + "' was successfully inserted into genre: " + genre; } console.log(moviesDB(DB, 'commedy', { title: 'newOne', release_date: 2010 })) console.log(moviesDB(DB, 'commedy', { title: 'pinapple express', release_date: 2008 })) console.log(DB)
為了達到預期效果,請在下面的代碼中添加到注釋部分
if(y.includes(movie) == false) {
//**push movie into the existing object.**
DB.forEach(v => {
if(v.genre === genre){
v.movies.push({title: movie})
}
})
}
說明:如果電影是現有對象,則循環DB數組並檢查體裁並推送到電影列表
工作代碼供參考
DB = [ { genre:'thriller', movies:[ { title:'the usual suspects', release_date:1999 } ]}, { genre:'commedy', movies:[ { title:'pinapple express', release_date:2008 } ]} ] var moviesDB = function(DB, genre, movie) { movie = typeof movie === 'object'? movie.title : movie; // to check whether movie parameter is string or object var x = [] for (var i = 0; i < DB.length; i++) { x.push(DB[i].genre); } if(x.includes(genre) == false) { DB.push({genre: genre, movies: []}); } else { console.log("genre already here") } var y = [] for (var i = 0; i < DB.length; i++) { DB[i].movies.forEach (function (object){ y.push(object.title) }) } if(y.includes(movie) == false) { //**push movie into the existing object.** DB.forEach(function(object) { if(object.genre === genre){ object.movies.push({title: movie}) } }) } else { return `the movie the ${movie} is already in the database!` } return DB; } console.log(moviesDB(DB, "drama", "A drama movie")) console.log(moviesDB(DB, "commedy", "Scary movie")) console.log(moviesDB(DB, 'commedy', 'pinapple express'))
codepen- https: //codepen.io/nagasai/pen/oNvymeB ? editors = 1010
我將使用array.find來確定該流派是否已經存在,然后推送新的流派,或者找出新標題是否已存在於現有流派中並添加它。
const DB = [ { genre:'thriller', movies:[ { title:'the usual suspects', release_date:1999 } ]}, { genre:'comedy', movies:[ { title:'pinapple express', release_date:2008 } ]} ]; const addMovie = (db, genre, movie) => { const genreObject = db.find((dataItem) => dataItem.genre === genre); if(!genreObject){ db.push({genre: genre, movies: [movie]}); } else { const movieTitles = genreObject.movies.map((movie) => movie.title); if(!movieTitles.includes(movie.title)){ genreObject.movies.push(movie); } } } addMovie(DB, "drama", {title: "pretend drama"}); addMovie(DB, "comedy", {title: "pretend comedy"}); console.log(DB);
據我了解的問題,這是我想到的最簡單的方法。 該代碼是不言自明的,我在其中添加了注釋
const Database = [ { genre: 'thriller', movies: [ { title: 'the usual suspects', release_date: 1999 } ] }, { genre: 'comedy', movies: [ { title: 'pinapple express', release_date: 2008 } ] } ] const findOrAddMovie = ({ genre, movie }) => { // check if genre exists const hasGenre = Database.find(i => i.genre && i.genre === genre); if (!hasGenre) { // if genre doesn't exists, add it Database.push({ genre, movies: [] }); } // map over the database Database.map(item => { // only look in the genre we passed in if (item.genre && item.genre === genre) { // find the movie by its title const thisMovie = item.movies.find(m => m.title === movie.title); if (!thisMovie) { // add movie if it doesn't exists // doing this here, so as to prevent // another "map" call on "Database" item.movies.push({ ...movie }); } } }); // // just for references // return Database; } console.log( findOrAddMovie({ genre: "comedy", movie: { title: 'added movie 1', release_date: 2008 } }) ); console.log( findOrAddMovie({ genre: "thriller", movie: { title: 'added movie 2', release_date: 2008 } }) ); console.log( findOrAddMovie({ genre: "mygenre", movie: { title: 'added movie with genre', release_date: 2008 } }) );
希望這可以幫助!
您需要簡化數據庫-代碼和數據庫范大大簡化
let DB = { 'thriller': { movies: [{ title: 'the usual suspects', release_date: 1999 }] }, 'comedy': { movies: [{ title: 'pinapple express', release_date: 2008 }] } } var moviesDB = function(array, genre, title, release) { let g = DB[genre] if (!g) DB[genre] = { "movies": [] } movies = DB[genre].movies const movie = { "title": title, "release_date": release } let obj = movies.find(o => o.title === movie.title); if (!obj) { movies.push(movie) } else { return `the movie the ${movie.title} is already in the database!` } return DB; } moviesDB(DB, "drama", "A drama movie", 2019) moviesDB(DB, "drama", "A drama movie", 2019) moviesDB(DB, "thriller", "A thriller", 2019) console.log(DB)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.