0

I'm trying to create an elegant way of binding json data to html using data-attributes without having to write a bunch of custom code or using an external library/framework.

I can get this to work just fine without nested data and re-writing my function a little.

The problem is that it's reading my data-api-value as a string..so I'm trying to find the correct way to convert it. I'm open to other suggestions/ work-arounds though.

Here's the code in a (codepen)

Here's a dumb'd down version of the code

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>
Oneezy
  • 4,881
  • 7
  • 44
  • 73
  • Can only be read as a string since it isn't valid json syntax to be able to read it as json ... so there is nothing nested either. Explain what you are expecting that string to do or represent...it isn't clear from what is shown – charlietfl Jun 16 '19 at 00:35
  • yeah.. I was thinking i could maybe convert that string with something like `JSON.parse(data);` or something similar. the previous way I was doing this was with `let data = apidata[value];` ,,, but this new problem began with needing the nested values – Oneezy Jun 16 '19 at 00:41
  • Also `apiData` is a promise which is what `$.ajax()` returns...so that part of the code doesn't make sense either – charlietfl Jun 16 '19 at 00:42
  • You need to step up one level and explain what the higher level problem you are trying to solve is – charlietfl Jun 16 '19 at 00:43
  • I guess what I'm trying to do, simply put is: create an elegant way of binding data to html using `data-attributes` without having to write a bunch of custom code or using an external library/framework – Oneezy Jun 16 '19 at 00:48
  • 1
    Ok...but that syntax in the data attribute doesn't make sense so it's not clear what you want to do with it either. Perhaps you want it to be `data-api-value="instrument.symbol"` and then you would parse the string by splitting on the dot and recursively get inside the nested object? – charlietfl Jun 16 '19 at 00:50
  • 1
    Something like this should help https://stackoverflow.com/questions/9338192/access-object-through-dot-syntax-string-path OR https://stackoverflow.com/questions/10934664/convert-string-in-dot-notation-to-get-the-object-reference – charlietfl Jun 16 '19 at 00:54
  • 1
    Doesn't `data-api-value="[ [instrument] , [symbol] ]"`, then `JSON.parse()` solve the problem? (although I like charlie's approach better) – Randy Casburn Jun 16 '19 at 00:55
  • thanks guys, yes that's probably what I'm doing wrong there. I had this [codepen](https://codepen.io/oneezy/pen/gNPJjK?editors=0010) initially (working) and you'll see why I thought that using the `data-api-value="[nested][value]"` approach might* work.. I'm going to look at the links and methods you guys suggested and report back – Oneezy Jun 16 '19 at 01:03
  • I managed to get this working but it's NOT pretty and it's not fail proof. i.e. if I add another level like `let data3 = ...` and add another `if` statement checking for `data3` (and if it doesn't exist) it will break the code — Here's my [codepen](https://codepen.io/oneezy/pen/BgjeJP?editors=0011) – Oneezy Jun 16 '19 at 02:59

0 Answers0