title: How to copy a JSON data to the clipboard with the button
body: <p>I have a JSON data where i should copy the JSON data to clipboard with a button click </p>
  
  <pre><code>{
    "Version": "2012-10-17",
    "Statement": [
      {
        "Sid": "VisualEditor0",
        "Effect": "Allow",
        "Action": [
          "kinesis:RemoveTagsFromStream",
          "ecr:TagResource",
          "ecs:TagResource",
          "elasticache:RemoveTagsFromResource",
          "fsx:UntagResource",
          "acm:AddTagsToCertificate",
          "states:UntagResource",
          "elasticache:AddTagsToResource",
          "elasticloadbalancing:AddTags",
          "datapipeline:RemoveTags",
          "secretsmanager:TagResource",
          "logs:ListTagsLogGroup",
          "fsx:TagResource",
          "cloudfront:UntagResource",
          "logs:UntagLogGroup",
          "dms:RemoveTagsFromResource",
          "kinesisvideo:UntagStream",
          "sqs:UntagQueue",
          "elasticbeanstalk:AddTags",
          "ssm:AddTagsToResource",
          "resource-groups:Tag",
          "ecr:UntagResource",
          "datapipeline:AddTags",
          "ecs:UntagResource",
          "transfer:TagResource",
          "elasticfilesystem:CreateTags",
          "events:TagResource",
          "events:UntagResource",
          "dax:ListTags",
          "ec2:CreateTags",
          "workspaces:CreateTags",
          "kinesis:AddTagsToStream",
          "iot:TagResource",
          "cloudwatch:UntagResource",
          "mq:CreateTags",
          "sagemaker:AddTags",
          "ec2:RegisterImage",
          "elasticbeanstalk:RemoveTags",
          "rds:RemoveTagsFromResource",
          "secretsmanager:UntagResource",
          "ec2:DeleteSnapshot",
          "ec2:DeleteTags",
          "kms:TagResource",
          "dynamodb:TagResource",
          "opsworks:TagResource",
          "es:AddTags",
          "logs:TagLogGroup",
          "ec2:StopInstances",
          "lambda:UntagResource",
          "elasticfilesystem:DeleteTags",
          "opsworks:UntagResource",
          "ec2:CreateSnapshot",
          "rds:AddTagsToResource",
          "transfer:UntagResource",
          "sqs:TagQueue",
          "elasticmapreduce:RemoveTags",
          "ec2:CreateImage",
          "resource-groups:Untag",
          "storagegateway:AddTagsToResource",
          "storagegateway:RemoveTagsFromResource",
          "cloudfront:TagResource",
          "ec2:DeregisterImage",
          "elasticloadbalancing:RemoveTags",
          "pi:DescribeDimensionKeys",
          "redshift:DeleteTags",
          "dynamodb:UntagResource",
          "iot:UntagResource",
          "polly:SynthesizeSpeech",
          "lambda:TagResource",
          "logs:StartQuery",
          "datapipeline:EvaluateExpression",
          "cognito-identity:UntagResource",
          "ec2:StartInstances",
          "ssm:RemoveTagsFromResource",
          "mq:DeleteTags",
          "logs:FilterLogEvents",
          "cognito-sync:QueryRecords",
          "clouddirectory:LookupPolicy",
          "kms:UntagResource",
          "eks:DescribeUpdates",
          "amplify:ListDomainAssociations",
          "workspaces:DeleteTags",
          "redshift:CreateTags",
          "states:TagResource",
          "es:ESHttpHead",
          "cognito-identity:TagResource",
          "sagemaker:DeleteTags",
          "ds:RemoveTagsFromResource",
          "es:RemoveTags",
          "acm:RemoveTagsFromCertificate",
          "ds:AddTagsToResource",
          "kinesisvideo:TagStream",
          "dms:AddTagsToResource",
          "gamelift:RequestUploadCredentials",
          "cloudwatch:TagResource",
          "elasticmapreduce:AddTags",
          "clouddirectory:BatchRead"
        ],
        "Resource": "*"
      }
    ]
  }
  </code></pre>
  
  <p>I tried with the below mentioned function </p>
  
  <pre><code>copyText(){
      let selBox = document.createElement('textarea');
        selBox.style.position = 'fixed';
        selBox.style.left = '0';
        selBox.style.top = '0';
        selBox.style.opacity = '0';
        selBox.value = this.jsonData;
        document.body.appendChild(selBox);
        selBox.focus();
        selBox.select();
        document.execCommand('copy');
        document.body.removeChild(selBox);
      }
  </code></pre>
  
  <p>But it is not working as  <strong>selBox.value</strong> accepts only string. I don't want to convert the JSON to the string. I want to copy whole JSON to the clipboard. i found the answer to copy the string to the clipboard but I couldn't find a method to copy the whole JSON to the clipboard</p>