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);
});

• KJ Price: "It's external and I want to grab it" - Where is your ajax call that does this?

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);
});

• henonChesser: I KNEW IT HAD TO BE THAT SIMPLE. Seamus... I... I love you.

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.

• henonChesser: I'll look into that, it kind of reminds me of a Query engine for JSON. But is there no native way to do this in JS or jQuery?
• Dexygen: Seriously an entire library for this small of a JSON packet?