JSON Array into JS Object Array

Question

I really hate 'do this for me' questions but I am at a complete loss. I think I just don't get JSON. So here's an example of my JSON:

"max":"10",
"min":"0",
"attributes":[
    {
        "attributeName":"Fortitude",
        "attributeColor":"#B7B7B7"
    },
    {
        "attributeName":"Vigor",
        "attributeColor":"#D5A6BD"
    },
    {
        "attributeName":"Celerity",
        "attributeColor":"#B4A7D6"
    }
]

It's external and I want to grab it, and then set a js variable to act as an array of attribute objects. So if in JS I set:

 var attributes = [];
 attributes = whatEverNeedsToGoHere;

And then I loop over that variable I could do something like:

console.log(attributes[0].attributeName);

And get "Fortitude". I understand how to get the JSON with jQuery using $.getJSON(); But I don't know get what needs to happen to turn the attributes array into an array of objects.

UPDATE: How I'm calling the JSON in right now.

var attributesData = $.getJSON("jsonDB/attributes.js", function(data){

        var thisAttribute = {"attributeName":String(data[i].attributeName),"attributeColor":String(data[i].attributeColor)};
        attributes.push(thisAttribute);
        console.log(attributes.attributeName);

});

Answer 1

This is probably what you are after:

var attributes;

$.getJSON("jsonDB/attributes.js", function(data){
  attributes = data.attributes;
  console.log(attributes);
});

You can test it here. I have stubbed getJSON for this purpose:

function getJSON(url, callbackfn){
  var data = {
    "max":"10",
    "min":"0",
    "attributes":[
      {
        "attributeName":"Fortitude",
        "attributeColor":"#B7B7B7"
      },
      {
        "attributeName":"Vigor",
        "attributeColor":"#D5A6BD"
      },
      {
        "attributeName":"Celerity",
        "attributeColor":"#B4A7D6"
      }
    ]
  }

  callbackfn(data);
}

var attributes;

getJSON("jsonDB/attributes.js", function(data){
  attributes = data.attributes;
  console.log(attributes);
});

Answer 2

Using the open source project jinqJs you could do it like this in one line

var data = {"max":"10",
"min":"0",
"attributes":[
    {
        "attributeName":"Fortitude",
        "attributeColor":"#B7B7B7"
    },
    {
        "attributeName":"Vigor",
        "attributeColor":"#D5A6BD"
    },
    {
        "attributeName":"Celerity",
        "attributeColor":"#B4A7D6"
    }
]
}

var result = jinqJs().from(data).select('attributes');

document.body.innerHTML += '<pre>' + JSON.stringify(result, null, 4) + '</pre>';

<script src="https://rawgit.com/fordth/jinqJs/master/jinqjs.js"></script>

.

var attributes = jinqJs().from('http://..some json url').select('attributes');

This will return a collection of the following:

[
        {
            "attributeName":"Fortitude",
            "attributeColor":"#B7B7B7"
        },
        {
            "attributeName":"Vigor",
            "attributeColor":"#D5A6BD"
        },
        {
            "attributeName":"Celerity",
            "attributeColor":"#B4A7D6"
        }
    ]

Answer 3

First of all, your JSon data is invalid.

The proper format for this data being set as Json is the following:

{
    "max": "10",
    "min": "0",
    "attributes": [
        {
            "attributeName": "Fortitude",
            "attributeColor": "#B7B7B7"
        },
        {
            "attributeName": "Vigor",
            "attributeColor": "#D5A6BD"
        },
        {
            "attributeName": "Celerity",
            "attributeColor": "#B4A7D6"
        }
    ]
}

And, in this situation, I do highly advice to use Jspath. Jspath allows you to perform XPath expressions on JSon data.