Style with CSS variables in $.each()

I’m trying to add style to the link’s “values” variables, but with no success. can anybody help me?

Example of the code I’m using:

$(document).ready(function(){
  $(".guide").append(function(){
    $.getJSON("https://sheets.googleapis.com/v4/spreadsheets/10Ct44JBW-CyoApJXIV87jeVU3Rr-fiLTdoTIJdbSwG8/values/page1!A2:C3?key=AIzaSyArRlzwEZHF50y3SV-MO_vU_1KrOIfnMeI"
    
, function(result){
      $.each(result.values, function(i, field){
        $(".guide").append( '<div style="font-size: 12px;">' + field + '</div>' +'<div style="font-size: 14px;">' + field + '</div>' + '<div style="font-size: 18px;">' + field + '</div>');
      });
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="guide"></div>

Answer

According to your data structure you MUST “loop” on result.values[0], and store your “style” in array then access corresponding index (i) for both value et style.

$(document).ready(function(){
  $(".guide").append(function(){
    $.getJSON("https://sheets.googleapis.com/v4/spreadsheets/10Ct44JBW-CyoApJXIV87jeVU3Rr-fiLTdoTIJdbSwG8/values/page1!A2:C3?key=AIzaSyArRlzwEZHF50y3SV-MO_vU_1KrOIfnMeI"
    
, function(result){
      let style = ['12','14','18'];
      $.each(result.values[0], function(i, field){
        $(".guide").append( '<div style="font-size:'+style[i]+'px;">' + field + '</div>');
      });
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="guide"></div>

But there is a more appropriate way to do this shared by Chris G using Array.map

https://jsfiddle.net/khrismuc/g16fxd79/