How can I use variables when calling JSON values?

Question

I have a script that converts XML into "JSON". The data available is able to be accessed using styles.Default.FontName (for example). However, instead of manually inserting 'Default' in that line, I need to be able to use a variable. I need to be able to use many different combinations of 'styles.XXXX.XXXX'.

Here is my script function convertData(xml) {

  var styles = {}

  $(xml).find('Style').each(function() {

    var id = $(this).attr('ss:ID');
    var name = $(this).attr('ss:Name');
    var type = $(this).children();

    var style = {};

    styles[id] = style;

    style['Name'] = name;

    type.each(function() {

      $.each(this.attributes, function() {

        if (this.specified) {
          style[stripPrefix(this.name)] = this.value;
        }

      });

    });;

    // You can now use 'styles.s57.FontName' and the like to return values :)

  });

  $(xml).find('Worksheet').each(function() {
    var name = $(this).attr('ss:Name');
    var data = $(this).find('Data');

    data.each(function() {
      var cell = $(this).parent('Cell');
      var value = $(this).text();
      var styleId = cell.attr('ss:StyleID');
      $(window).load(function() {
        // Here is my issue (see below for working calls...)
        // This guy doesn't work (because of the 'styleId' variable not being an actual style id like 's57')
        $('.testing').append('<span class="color:#f60;">' + styles.styleId.Color + '</span>');
      });
    });

  });

  $(document).ready(function() {

    $('body').append('<div class="testing"/>');

    // Works fine
    $('.testing').html(styles.Default.FontName);
    $('.testing').append(styles.s59.Bold);

    $('body').append('<div class="json-output"/>');
    $('.json-output').append(JSON.stringify(styles));

    for (var i in styles) {
      console.log(i);
    }

  });

}

So, how can I use a variable here instead of specifying 'Default' or 's59'? Any help is greatly appreciated!

To clarify what I am asking... The use of **styles.Default.FontName** is working fine. I just need to be able to dynamically swap 'Default' with a variable. Why? Because I will be using this inside loops that are iterating through "Cells" that each have a different "StyleID". This loop is shown above via data.each(). So each iteration through, there could be a different "StyleID" being referenced.

But when I use styles.SomeVariable.SomeStyle, instead of inserting what value I have set for 'SomeVariable', it references the JSON object for "SomeVariable"...

UPDATE:

jsFiddle

For reference- the generated JSON

{
  "Default":{
    "Name":"Normal",
    "Vertical":"Bottom",
    "FontName":"Calibri",
    "Family":"Swiss",
    "Size":"11",
    "Color":"#000000"
  },
  "s57":{
    "Name":"Hyperlink",
    "FontName":"Calibri",
    "Family":"Swiss",
    "Size":"11",
    "Color":"#0066CC",
    "Underline":"Single"
  },
  "s58":{
    "Horizontal":"Left",
    "Vertical":"Center",
    "Indent":"1"
  },
  "s59":{
    "Vertical":"Center",
    "WrapText":"1",
    "FontName":"Calibri",
    "Family":"Swiss",
    "Size":"11",
    "Color":"#000000",
    "Bold":"1"
  }
}

score 1 · Answer 1 · edited May 23 '17 at 11:43

1

Edit, Updated

Try substituting var styleId = cell.data('styleid'); for var styleId = cell.data('styleID'); ; as the data-* attribute name is converted to lowercase.

See jquery get HTML 5 Data Attributes with hyphens and Case Sensitivity

Note, undefined returned at s58 , where no property name Color.

jsfiddle http://jsfiddle.net/yao01h4b/10/

Try

var name = "styleId"
, option = {};
option[name] = styles.s57;

var styleId = $.extend(styles, option);
// do stuff with `styles.styleId.s57`
document.write(styles.styleId.FontName);

See jQuery.extend()

var styles = {
  "Default":{
    "Name":"Normal",
    "Vertical":"Bottom",
    "FontName":"Calibri",
    "Family":"Swiss",
    "Size":"11",
    "Color":"#000000"
  },
  "s57":{
    "Name":"Hyperlink",
    "FontName":"Calibri",
    "Family":"Swiss",
    "Size":"11",
    "Color":"#0066CC",
    "Underline":"Single"
  },
  "s58":{
    "Horizontal":"Left",
    "Vertical":"Center",
    "Indent":"1"
  },
  "s59":{
    "Vertical":"Center",
    "WrapText":"1",
    "FontName":"Calibri",
    "Family":"Swiss",
    "Size":"11",
    "Color":"#000000",
    "Bold":"1"
  }
};

var name = "styleId"
, option = {};
option[name] = styles.s57;

var styleId = $.extend(styles, option);

document.write(styles.styleId.FontName)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

edited May 23 '17 at 11:43

Community

1
1

answered Mar 05 '15 at 18:18

guest271314

1
15
104
177

This looks promising. I'm attempting to implement now. Thanks, and I'll report back soon :) – Derek Foulk Mar 05 '15 at 18:45
So I placed your solution inside the data.each() loop. and swapped "s57" with the variable that identifies that cell's "StyleID", and I get an error in the console. I replace the variable (which, btw, returns "s57, Default, etc.") with the string "s57" or "Default", and it works fine. The problem is- my script already behaves like that. I need that "s57" in your script to be a variable :( – Derek Foulk Mar 05 '15 at 18:56
Can post `error` text ? Not certain interpret correctly , can create stacksnippets , http://jsfiddle.net to demonstrate ? – guest271314 Mar 05 '15 at 19:11
I created a jsFiddle to demonstrate what I need. I changed up the content a bit, but it does the same thing... I need the "Dynamically Generated..." to work. http://jsfiddle.net/derekfoulk/yao01h4b/8/ – Derek Foulk Mar 05 '15 at 19:48
Yeah, I'm an idiot. I tried using the '[' for gigs, and it worked. Thank you for the update. The undefined are causing me issues now. I have some if statements like `if (styles[styleId].Color) { do something}` (I have tried others like `!= undefined`) to check if the value exists in the JSON object, but it throws errors in the console when it hits the undefined no matter what I do. Thanks again for the responses! They're very helpful – Derek Foulk Mar 05 '15 at 21:15
@derekmx271 You are welcome:) Try `if (!!styles[styleId].Color) { // do stuff };` http://jsfiddle.net/yao01h4b/11/ – guest271314 Mar 05 '15 at 21:46

score 0 · Answer 2 · answered Mar 05 '15 at 18:10

0

Do it the same way you are assigning object properties using [] notation

var someVal = object[variable];

You can also combine notation types

 var someVal = object[variable][anotherVariable].someProperty;

answered Mar 05 '15 at 18:10

charlietfl

170,828
13
121
150

Can you give me an example of what it would like and how I can use it in my script (using my values above)? – Derek Foulk Mar 05 '15 at 18:15
Currently, I can use 'styles.SomeID.SomeStyle'. I'd like to be able to continue using that syntax. Just instead of 'SomeID', I would use a variable. But the JS tries to find a value in the JSON with the value of my variable, instead of inserting whatever the value of that variable is... – Derek Foulk Mar 05 '15 at 18:17
right so use what I posted above `styles[SomeID][SomeStyle]` or something like that depending on what is a known property and what is variable – charlietfl Mar 05 '15 at 18:19

How can I use variables when calling JSON values?

2 Answers2