jQuery append 元素到對象數組

Question

在一個簡單的 jQuery mp3 播放器中，我有一個按鈕來加載一些文件

  <button type="button" class="nes-btn is-primary" onclick="chooseMusic()">Add</button>

相關的jQuery功能如下

let songData = {
  path: [],
  title: []
};
let audioPlayer = $("audio").get(0);
let playing = false;
let currentIndex = 0;
let timer = null;

function chooseMusic() {
  $("input").click();
}

function musicSelected() {
  let files = $("input").get(0).files;
  console.log(files);

  for (let i = 0; i < files.length; i++) {
    let {path} = files[i];
    mm.parseFile(path, {
      native: true
    }).then(metadata => {
      songData.path[i] = path;
      songData.title[i] = metadata.common.title;

      let songRow = `
            <tr ondblclick="playSong(${i})">
                <td>${metadata.common.title}</td>
                <td>${metadata.common.artist}</td>
                <td>${secondsToTime(metadata.format.duration)}</td>
            </tr>
            `;

      $("#table-body").append(songRow);
    });
  }
}

現在，如果我在初始添加操作后添加更多歌曲，它們在 html 表中都顯示良好，但保存要加載的文件的路徑信息的數組被覆蓋。

在下面的示例中，您可以看到控制台輸出 3 種不同的添加操作：

0: File {name: "03 Take My Hand (Freddy@Disco Radio Edit).mp3", path: ".david/musik/mp3/03 Take My Hand (Freddy@Disco Radio Edit).mp3", lastModified: 1573134194616, lastModifiedDate: Thu Nov 07 2019 14:43:14 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
1: File {name: "01 Almeno stavolta.mp3", path: ".david/musik/mp3/01 Almeno stavolta.mp3", lastModified: 1573134333350, lastModifiedDate: Thu Nov 07 2019 14:45:33 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
2: File {name: "01 Dancing Is Like Heaven (Single Mix) [feat. Yas].mp3", path: ".david/musik/…ncing Is Like Heaven (Single Mix) [feat. Yas].mp3", lastModified: 1573134290426, lastModifiedDate: Thu Nov 07 2019 14:44:50 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
3: File {name: "08 Take My Hand (DJ Maraach Remix).mp3", path: ".david/musik/mp3/08 Take My Hand (DJ Maraach Remix).mp3", lastModified: 1573134220015, lastModifiedDate: Thu Nov 07 2019 14:43:40 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
length: 4
__proto__: FileList
29
index.js:102 tick
index.js:18 
FileList {0: File, 1: File, length: 2}
0: File {name: "01 Carry You.m4a", path: ".david/musik/mp3/01 Carry You.m4a", lastModified: 1573133939823, lastModifiedDate: Thu Nov 07 2019 14:38:59 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
1: File {name: "05 Mercury May.mp3", path: ".david/musik/mp3/05 Mercury May.mp3", lastModified: 1573133848536, lastModifiedDate: Thu Nov 07 2019 14:37:28 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
length: 2
__proto__: FileList
231
index.js:102 tick
index.js:67 0
42
index.js:102 tick
index.js:67 1
935
index.js:102 tick
index.js:18 
FileList {0: File, 1: File, 2: File, 3: File, 4: File, 5: File, length: 6}
0: File {name: "01 Mad About You.mp3", path: ".david/musik/mp3/01 Mad About You.mp3", lastModified: 1572570292000, lastModifiedDate: Fri Nov 01 2019 02:04:52 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
1: File {name: "04 Sit and Wait.mp3", path: ".david/musik/mp3/04 Sit and Wait.mp3", lastModified: 1572570182000, lastModifiedDate: Fri Nov 01 2019 02:03:02 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
2: File {name: "01 Wavin' Flag (Coca-Cola Celebration Mix).mp3", path: ".david/musik/mp3/01 Wavin' Flag (Coca-Cola Celebration Mix).mp3", lastModified: 1572487402000, lastModifiedDate: Thu Oct 31 2019 03:03:22 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
3: File {name: "05 Land of Dreaming.mp3", path: ".david/musik/mp3/05 Land of Dreaming.mp3", lastModified: 1572487316000, lastModifiedDate: Thu Oct 31 2019 03:01:56 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
4: File {name: "02 Solo.mp3", path: ".david/musik/mp3/02 Solo.mp3", lastModified: 1572487132000, lastModifiedDate: Thu Oct 31 2019 02:58:52 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
5: File {name: "10 Postcards.mp3", path: ".david/musik/mp3/10 Postcards.mp3", lastModified: 1572486513000, lastModifiedDate: Thu Oct 31 2019 02:48:33 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
length: 6
__proto__: FileList

現在，例如，如果我單擊“拿走我的手”（我添加的第一個文件），它將改為播放“Mad about you”，因為它接管了數組的 position 0。

那么如何更改我的 jQuery function 以確保當我添加新文件時它會將它們添加到同一個數組而不覆蓋密鑰？

Answer 1

我建議您稍微更改一下代碼。

而不是像這樣具有兩個 arrays 的 object ：

let songData = {
  path: [],
  title: []
};

你應該有一個這樣的對象數組

let songData = [
  { path: 'Path-1', title: 'Title 1'}, 
  { path: 'Path-2', title: 'Title 3'}, 
  { ... }
];

然后當你添加新元素時，你只需要將新對象push()到數組中

for (let i = 0; i < files.length; i++) {
  // ...
  let obj = { 'path' : path, 'title' : metadata.common.title };
  songData.push(obj); // this will add it at the end of the array (like append does for a jQuery element)
  // ...
}

這樣，所有信息都存儲在同一個 object 中，而不是兩個不同的 arrays 中。 如果索引不再同步，這也減少了出錯的機會。 此外，如果您需要這樣做，它會使刪除元素或切換它們變得更加容易。

閱讀評論后編輯

因此，要訪問您的新值，您需要使用 object 表示法語法。

songData[0].path;
songData[0].title;

其中[0]是您的索引。

例子：

function playSong(index){
  console.log(songData[index].path);
  console.log(songData[index].title);
} 

只需確保在雙擊時傳遞索引（0、1、2、3 等）；

playSong(${i})對於第一個元素應該等於playSong(0) 。

---

如果您堅持保留當前代碼，那么問題在於您在導入新文件時會覆蓋索引

for (let i = 0; i < files.length; i++) {
  //...
  songData.path[i] = path;
  songData.title[i] = metadata.common.title;

這里的[i]將在您每次添加文件時覆蓋，因為它將始終為 0、1、2... 下次導入時，它將再次為 0、1 等。

為了解決這個問題，只需使用.push()在數組末尾添加項目

for (let i = 0; i < files.length; i++) {
  //...
  songData.path.push(path);
  songData.title.push(metadata.common.title);
  //...