Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/383.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何在javascript/typescript中使用多个动态变量创建映射函数_Javascript_Arrays_Typescript_Promise_Map Function - Fatal编程技术网

如何在javascript/typescript中使用多个动态变量创建映射函数

如何在javascript/typescript中使用多个动态变量创建映射函数,javascript,arrays,typescript,promise,map-function,Javascript,Arrays,Typescript,Promise,Map Function,好吧,也许我之前解释的很难解释 实际上,我正在使用AWS Dynamodb运行一些查询,并试图在angular4的图表(NGX图表)中显示它们。现在,对于需要在图表中显示的数据,它们需要如下示例var shirtInfo= [ { "name": "Red Color", "value": 10 }, { "name": "Blue Color", "value": 20 }, { "name": "Green Color", "value": 5 }, ] 你可以在这里看到一个例

好吧,也许我之前解释的很难解释

实际上,我正在使用AWS Dynamodb运行一些查询,并试图在angular4的图表(NGX图表)中显示它们。现在,对于需要在图表中显示的数据,它们需要如下示例var shirtInfo=

[
 {
"name": "Red Color",
"value": 10
 },
 {
"name": "Blue Color",
"value": 20
 },
 {
"name": "Green Color",
"value": 5
 },
]
你可以在这里看到一个例子,如果你点击左边的数据,你可以看到数据的格式与我在上面例子中的格式相同。因为我使用的是AWS Dynamodb,所以没有batchquery,所以我必须逐个运行每个查询。因此,有人没有帮我为每种颜色编写查询,而是创建了一个包含颜色的数组,我们为每种颜色使用了一个函数映射,它在这里工作,在我们从Dynamodb获得数据后,我需要访问对象“数据”属性计数我们使用data.Count in获取。如果数据库有10个Red shirt返回数据值,则返回的数据量。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);
});
}
这很好,但我正在尝试使用另一个图表,这是一个显示该图表的图表,数据需要采用另一种格式,所以在我的数据库中,有10件红色衬衫,3件尺寸小,2件尺寸中等,5件尺寸大。因此,现在不再使用颜色数组[红色,蓝色,绿色]然后对每种颜色运行查询,我想对颜色“红色”运行3次查询,一次用于小尺寸,一次用于中等尺寸,一次用于大尺寸。其他颜色也一样。我不知道我该如何做到这一点?我需要制作两个类似这样的数组吗

colors = ['Red', 'Blue', 'Yellow'];
sizes = [ 'Small', 'Medium' , 'Large'] ;
在map函数中使用map函数

    promises = colors.map(function (color)    {

    sizepromises = sizes.map)function (size)    {

             var param{....}
      }

    }
我知道查询必须是这样的,它与示例中几乎相同,我刚刚添加了两个字段

 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
   }
  ]
 }
  ]

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

要做到这一点,您可能希望将内容分解为可重用的函数,并在查询后直接减少/转换数据,而不是在最后转换所有内容

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);
    }
}
示例组件.ts

class ExampleComponent {

    constructor(private ShirtService) {

    }

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

我很乐意帮忙,但我不知道你想做什么。我会用更多的信息更新这个问题,这样行吗?我可以“不用学习更多关于响应是什么样的
shirtinfo=responses.map(函数(数据,I){return{name:color[I]+'color',size:data.size,value:data.Count};})
@BinodPant我也需要map函数的帮助,如果查询不起作用,它甚至不起作用。有返回变量吗?代码应该在服务中,我需要从组件调用它。假设你指的是angular?是的,我不好,我是说angular,我现在会尝试更新的代码。我刚刚使用了它,它看起来很有效:)谢谢
class ExampleComponent {

    constructor(private ShirtService) {

    }

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