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);
  //...