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

时间:2019-06-11 02:36:48

标签: javascript jquery json custom-data-attribute

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

我的代码中有什么缺陷吗?

<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);

    });
  }

1 个答案:

答案 0 :(得分:1)

1。。jQuery的.data()删除x=0.033前缀,并使用破折号作为分隔符,将剩余的带连字符的字符串转换为camelCase 。应该是:

data-

2。。要使用变量访问对象属性,您需要使用bracket notation。否则,您将尝试获取属性let dataUserBalance = $(this).data("apiUserGetbalance"); ,该属性不存在。

"dataUserBalance"

let data = balanceApiData[dataUserBalance];
const balanceApiData = { totalBalance: 500 };
const $elem = $("#totalBalanceBTC");

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

console.log(data);