Как получить данные с помощью атрибута данных?

Question

Я пытаюсь получить данные из нашего API с помощью трюка data- html. Я могу напрямую вызывать данные, и они нормально загружаются. Но когда я пытаюсь получить переменную данных из атрибута данных, это не сработает.

Что-то не так в моем коде?

т.е.

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

    });
  }

Answer 1

1. jQuery's .data() удаляет префикс data-, а преобразует оставшуюся строку с дефисами в camelCase , используя тире в качестве разделителей. Должно быть:

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

2. Чтобы получить доступ к свойству объекта с помощью переменной, вам нужно использовать обозначение в скобках . В противном случае вы пытаетесь получить свойство "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>