如何使用“ data-”属性获取嵌套的JSON数据值?

时间:2019-06-16 00:31:17

标签: javascript jquery json object custom-data-attribute

我正在尝试创建一种优雅的方式,使用data-attributes将json数据绑定到html,而不必编写一堆自定义代码或使用外部库/框架。

我可以在没有嵌套数据的情况下正常工作,并稍微重写一下我的函数。

问题是它正在将我的data-api-value读为字符串。.因此,我试图找到正确的转换方式。我愿意接受其他建议/解决方法。

这是(codepen)

中的代码

这是代码的愚蠢版本

function getApiData(apiUrl, callback) {
  apiData = $.ajax({
    type: 'GET',
    url: apiUrl,
    dataType: 'json',
    success: function(json) {
      callback(json.data);
    },
    error: function(req, err) {
      console.log(err);
    },
    contentType: "application/json; charset=utf-8"
  });
}

function dataAPIrealtime() {
  const url = 'https://someapi/v1/exchange/getinstrument/bitmex/XBTUSD';
	
  getApiData(url, function(apidata){
    $('[data-api]').each(function() {
      let api = $(this).data("api");
      let value = $(this).data("apiValue");
      let data = apidata + value;

      if (data || data != data) {
        $(this).html(data);
      }
    }); 
  });
}

/* Run Functions
*********************************/
$(document).ready(function() { 
	dataAPIrealtime();
	setInterval(dataAPIrealtime, 1000); // Refresh data every 1 second
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span data-api="exchange/getinstrument" data-api-value="[instrument][symbol]"></span>

0 个答案:

没有答案