Accessing Key Value Pair in JSON data results

Question

I haven't needed to access JSON data so I'm a bit stumped. I've validated the data using a JSON formatter and it is valid so I know that is good.

All I'm trying to do is retrieve the data and populate a select box (specifically x-editable).

In there example, they provide:

$('#id').editable({
    source: [
        {value: 1, text: 'Male'},
        {value: 2, text: 'Female'}
    ]
});

Yes, I could throw the 50 states in there but I'd like to use this same approach for other select boxes I plan on implementing.

Here is the datafeed I'm currently getting back from my JSON call:

{
"data": [{
    "stateID": 1,
    "stateAbbr": "AL",
    "state": "Alabama"
}, {
    "stateID": 2,
    "stateAbbr": "AK",
    "state": "Alaska"
}, {
    "stateID": 3,
    "stateAbbr": "AZ",
    "state": "Arizona"
}, {
    "stateID": 51,
    "stateAbbr": "WY",
    "state": "Wyoming"
}]}    

My function snippet that I'm working with is:

$.getJSON("test.html?format=json",function(data){
    statesArr = statesArr.concat(data);
});

Ideally, I'd like to make the statesArr look like this:

source: [
        {value: 1, text: 'Alabama'},
        {value: 2, text: 'Alaska'},
        ...
        {value:50, text: 'Wyoming'}
    ]

But I'm at a loss on what to do from here. The format of the data feed, {"data is throwing me off. I'm used to getting data pretty much like X-Editable is looking for.

Answer 1

I am assuming here that resp is the response. And resp has data property. If I have misunderstood you, please tell me so.

var statesArr;
$.getJSON('test.html?format=json', function(resp){
    statesArr = resp.data.map(function(state){
        return {
            value: state.stateID,
            text: state.state
        }
    });
});

/* somewhere else later; make sure that statesArr is set */
$('#id').editable({
    source: statesArr
});