如何遍历一个对象并推入一个数组

Question

我在做什么

• 角度2
• 火力基地

我有什么

• 返回的对象
• 对象中的每个项目都有一个 URL 属性

我想做的事

• 循环遍历对象中的每个项目并获取 URL 属性
• 将其传递到 Firebase 存储变量中
• 将 URL 属性推入一个数组以供我的 HTML 使用

注意：我通过对 url 进行硬编码来实现这一点，我只需要一些帮助来遍历对象以获取对象中的其他 url。

Component.ts

'this.imagesToDisplay' 将返回一个对象对象（下图）

this.activatedRoute.data
  .subscribe((
    data: { issueData: any, issueImageData: any }) => {
    this.issueToDisplay = data.issueData;
    this.imagesToDisplay = data.issueImageData; 

    this.testing(this.imageToDisplayArray); 

  });

组件 TS - 测试方法

所以这是硬编码的，并将硬编码的 url 推送到数组中，并通过与 HTML 的数据绑定正确显示。凉爽的。但是，我想遍历“imagesToDisplay”对象并获取两个返回的 url。

  testing(imageToDisplayArray) {
    
    // this works with one url
    var storage = firebase.storage().ref().child("image/-Kosd82P-bmh4SFetuf3/-Kosd8HhGmFiUhYMrlvw/30DD9F39-4684-4AA0-9DBF-3B0F0C3450A4.jpg");
    storage.getDownloadURL().then(function(url) {
    imageToDisplayArray.push(url);
        console.log(imageToDisplayArray);
    });

  }

我们将不胜感激。

注意：我认为这个问题是我想要做的，我只是不确定如何将它集成到我当前的代码中。任何帮助都是极好的。 Stack Overflow question on firebase storage looping

更新

所以，我现在非常接近。我只有一个问题。下面的代码遍历返回的数据并提取 URL 属性。我使用 url 属性连接到 firebase 存储并返回下载 URL。这两个都记录到控制台！惊人的。我现在有了我需要的网址！我遇到的问题是，它只会让我将这些值推送到本地数组。在这种情况下，'var 数组'。我需要推送到“activatedRoute”“方法”之外的数组。每当我这样做时，它都会返回未定义。

this.activatedRoute.data
      .subscribe((
        data: { issueData: any, issueImageData: any }) => {
        this.issueToDisplay = data.issueData;
        this.imagesToDisplay = data.issueImageData;

        var array = [];

        data.issueImageData.forEach(image => {

          // Reference to the image URL
          var image = image.url;

          // Firebase storage
          var storage = firebase.storage();

          // Path reference
          var imagePathReference = storage.ref().child(image);

          // Get Download URL
          imagePathReference.getDownloadURL().then(function (url) {
            console.log(url);
            array.push(url);
          })
        });


      });

Answer 1

我建议您使用rxjs 为您提供的功能：

this.activatedRoute.data.switchMap(data => {
    let parsedData = { 
        issueToDisplay: data.issueData,
        imagesToDisplay: data.issueImageData
    }
    let imageUrls$ = data.issueImageData.map(image => {
        var imagePathReference = storage.ref().child(image);
        return Observable.fromPromise(imagePathReference.getDownloadURL())
    });
    return Observable.forkJoin(imageUrls$).map((...urls) => {
        return Object.assign(parsedData, { urls });
    })
}).subscribe(data => {
    /* 
    data looks like this:
    {
        issueToDisplay: any,
        imagesToDisplay: any,
        urls: string[]
    }
    */
});

Answer 2

所以，这行得通。不完全确定它有多干净。但它有效。

 this.activatedRoute.data
      .subscribe((
        data: { issueData: any, issueImageData: any }) => {
        this.issueToDisplay = data.issueData;
        this.imagesToDisplay = data.issueImageData;

        var localImageArray = [];

        data.issueImageData.forEach(image => {

          // Reference to the image URL
          var image = image.url;

          // Firebase storage
          var storage = firebase.storage();

          // Path reference
          var imagePathReference = storage.ref().child(image);

          // Get Download URL
          imagePathReference.getDownloadURL().then(function (url) {
            localImageArray.push(url);
          })

            this.getIssueImageArray(localImageArray);
        });


      });
  }

  // Get Image Array
  getIssueImageArray(array) {
    this.imageToDisplayArray = array;
  }

Answer 3

如果我是正确的，您正在寻找一种将类似数组的对象映射到实际的对象数组的解决方案。

这是一种方法：

var object = {
  '0': {
    "url": "url1",
    "name": "obj1",
    "data": 1234
   },
  '1': {
    "url": "url2",
    "name": "obj2",
    "data": 5678
   },
   'length': 2
}

var sliced = Array.prototype.slice.call( object, 0 );

console.log(sliced)

两句：

• 如果您想知道这是如何工作的，请查看this post。

• 您可能遇到的替代语法类似于[].slice.call()

• 如果您想执行类似数组的操作，您可以立即使用Array.prototype.<METHOD>.call(object, <CALLBACK>

• 例如：

Array.prototype.map.call(object, function(el) { // return your enhanced element })