如何在 javascript/typescript 中承诺具有多个动态变量的映射函数

Question

好吧，也许我之前解释的东西很难解释。

实际上我正在使用 AWS Dynamodb 运行一些查询，我试图在 angular4 中的图表 (NGX-Charts) 中显示它们。现在，对于需要在图表中显示的数据，它们需要像这个例子 var shirtInfo =

[
 {
"name": "Red Color",
"value": 10
 },
 {
"name": "Blue Color",
"value": 20
 },
 {
"name": "Green Color",
"value": 5
 },
]

您可以在此 link 看到一个示例，如果您单击左侧的数据，您可以看到数据的格式与我在上面的示例中使用的格式相同。由于我使用的是 AWS Dynamodb，因此没有批查询，所以我必须运行每个查询一个一个地查询。因此，我们没有为每种颜色编写查询，而是有人帮助了我，我们创建了一个包含颜色的数组，我们为每种颜色使用了一个函数映射，它在这里工作，在我们从 Dynamodb 获取数据后，它就在这里，我需要访问对象 "data" 属性 Count 我们使用 data.Count 得到如果数据库有 10 件红衫则返回的数据量 data.Count = 10

getShirtcolorsCount(){
var params;
var colors;
var promises;
var docClient = new DynamoDB.DocumentClient();

colors = ['Red', 'Blue']; // <--- make code generic
promises = colors.map(function (color) {
    // Query voor Shirts 
    var param = {
        TableName: 'ShirtApp',
        IndexName: 'Shirt-index',
        KeyConditionExpression: 'ShirtC = :sbs '
        ExpressionAttributeValues: {
            ':sbs': color // <-- make it dynamic to avoid code duplication

        }
    };
    return docClient.query(params).promise();
});

// Make sure to return the promise    
return Promise.all(promises).then(function (responses) {
    console.log('Success');  
    var shirtInfo = responses.map(function (data, i) {
        return {
            name: color[i] + 'Color',
            value: data.Count
        };
    });
    return shirtInfo;
}).catch(function(err) {
    console.log(err);
});
}

因为我想在图表中为您在上面的代码中看到的每种颜色显示该值，所以我有这段代码将数据以图表的正确格式放置。在此处检查这段代码。

var shirtInfo = responses.map(function (data, i) {
    return {
        name: color[i] + 'Color',
        value: data.Count
    };
});

效果很好，但我正在尝试使用另一个图表，就是这个 link 要显示该图表，数据需要采用另一种格式所以假设在我的数据库中有 10 件红色衬衫 3 件是Size Small , 2 是 Size Medium 和 5 是 Size Large 。所以现在不是有颜色数组 [Red, Blue , Green] 和运行查询每种颜色我想运行查询颜色"Red" 3 次，小号一件，中号一件，大号一件。其他颜色相同。我不知道我应该如何做到这一点？我需要像这样制作 2 个数组

colors = ['Red', 'Blue', 'Yellow'];
sizes = [ 'Small', 'Medium' , 'Large'] ;

并且在 map 函数中使用 map 函数

    promises = colors.map(function (color)    {

    sizepromises = sizes.map)function (size)    {

             var param{....}
      }

    }

我知道查询需要像这样它几乎与示例中的相同我只是添加了 2 个字段

 var param = {
TableName: 'ShirtApp',
IndexName: 'Shirt-index',
KeyConditionExpression: 'ShirtC = :sbs ',
 FilterExpression: 'Size = :ftr',                
ExpressionAttributeValues: {
    ':sbs': color,  // ---color is dynamic
    ':ftr':size'    //  ---size also need to be dynamic
}

并且 Shirtinfo 变量需要像这样才能在新图表中工作

 [
 {
 "name": "Red Color",
"series": [
  {
    "name": "Small",
    "value": 3
  },
  {
    "name": "Medium",
    "value": 2
  },
  {
    "name": "Large",
    "value": 5
  }
 ]
 },
 {
 "name": "Blue",
   "series": [
   {
    "name": "Small",
    "value": 2
   },
   {
    "name": "Medium",
    "value": 2
   },
   {
    "name": "Large",
    "value": 4
   }
  ]
 }
  ]

我更改并添加了很多我需要更多信息将其添加到评论中我会查看

Answer 1

要做到这一点，您可能希望将事情分解为可重用的函数和 reduce/transform 紧随查询的数据，而不是在最后转换所有内容。

ShirtService.ts

class ShirtService {

    constructor(private docClient) {

    }

    queryShirt(color, size) {
        // Query voor Shirts
        const param = {
            TableName: 'ShirtApp',
            IndexName: 'Shirt-index',
            KeyConditionExpression: 'ShirtC = :sbs ',
            FilterExpression: 'Size = :ftr',
            ExpressionAttributeValues: {
                ':sbs': color,  // ---color is dynamic
                ':ftr': size    //  ---size also need to be dynamic
            }
        };
        return this.docClient.query(param).promise().then((response) => {
            return {
                name: size,
                value: response.Count
            };
        });
    }

    getShirtColorCount(color) {
        const sizes = ['Small', 'Medium', 'Large'];
        const promises = sizes.map((size) => {
            return this.queryShirt(color, size);
        });
        return Promise.all(promises).then((series) => {
            return {
                name: color + ' Color',
                series: series
            }
        });
    }

    getShirtColorsCount() {
        const colors = ['Red', 'Blue', 'Yellow'];
        const promises = colors.map((color) => {
            return this.getShirtColorCount(color);
        });
        return Promise.all(promises);
    }
}

ExampleComponent.ts

class ExampleComponent {

    constructor(private ShirtService) {

    }

    doSomething() {
        this.ShirtService.getShirtColorsCount().then((data) => {
            // Do something with data.
        }).catch((err) => {
            console.error(err);
        });
    }
}

如何在 javascript/typescript 中承诺具有多个动态变量的映射函数

How do I make promise a map function with multiple dynamic variables in javascript/typescript

javascript

arrays

promise

typescript

map-function