如何在 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 看到一个示例，如果您单击左侧的 DATA，您可以看到数据的格式与我在上面的示例中的格式相同。由于我使用的是 AWS Dynamodb，因此没有批处理查询，因此我必须一个一个地运行每个查询。因此，不是为每种颜色编写查询，而是有人帮了我，我们创建了一个包含颜色的数组，我们为每种颜色使用了一个函数映射，它在这里工作，在我们从 Dynamodb 取回数据后，它就在这里我需要访问 Object “data” 属性 Count 我们使用 data.Count 得到返回的数据量，如果数据库有 10 件 Red shirt 返回 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 是小号，2是 Size Medium 和 5 是 Size Large 。所以现在我不想有一个颜色数组 [Red, Blue , Green] 并运行每种颜色的查询，我想运行 Query for color "Red" 3 次，一次用于 Size Small，一次用于中号和大号。其他颜色相同。我不知道我应该如何做到这一点？我需要制作 2 个这样的数组吗

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

并且在地图函数中使用地图函数

    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
}

var 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

为此，您可能希望将事物分解为可重用的函数，并在查询之后直接减少/转换数据，而不是在最后转换所有内容。

衬衫服务.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);
        });
    }
}