如何使用数据属性提取数据？

【问题标题】：How to pull in data by using a data-attribute?如何使用数据属性提取数据？
【发布时间】：2019-06-11 10:53:59
【问题描述】：

我正在尝试使用data- html 技巧从我们的 API 中提取数据。我可以直接调用数据并且它加载得很好。但是，当我尝试从数据属性中获取数据变量时，它将不起作用。

我的代码有问题吗？

即

<span id="totalBalanceBTC" data-api-user-getbalance="totalBalance">--</span>

function dataAPI() {
    let balanceUrl = 'https://api.example.io/v1/user/getbalance/username';
    let balanceApiData = getApiData(balanceUrl);

    $('[data-api-user-getbalance]').each(function (){

      let dataUserBalance = $(this).data("api-user-getbalance");
      let data = balanceApiData.dataUserBalance;

        // WORKS
        $(this).html(balanceApiData.totalBalance);

        // DOES NOT WORK
        $(this).html(balanceApiData.dataUserBalance);

    });
  }

【问题讨论】：

标签： javascript jquery json custom-data-attribute

【解决方案1】：

1. jQuery 的.data() 删除了data- 前缀并将剩余的连字符字符串转换为camelCase，使用破折号作为分隔符。应该是：

let dataUserBalance = $(this).data("apiUserGetbalance");

2.要使用变量访问对象属性，您需要使用bracket notation。否则，您将尝试获取不存在的属性"dataUserBalance"。

let data = balanceApiData[dataUserBalance];

const balanceApiData = { totalBalance: 500 };
const $elem = $("#totalBalanceBTC");

let dataUserBalance = $elem.data("apiUserGetbalance");
let data = balanceApiData[dataUserBalance];

console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="totalBalanceBTC" data-api-user-getbalance="totalBalance"></span>

【讨论】：