Ext JS 4: Convert JSON object to another JSON object using JavaScript

Question

What is the easiest way to convert JSON A to JSON B using JavaScript?

JSON A:

{
    "d":
    [
        {"__type":"Web.Controls.Shared.GeneralService+DropdownKeyValuePair","key":"0","value":"one"},
        {"__type":"Web.Controls.Shared.GeneralService+DropdownKeyValuePair","key":"1","value":"two"},
        {"__type":"Web.Controls.Shared.GeneralService+DropdownKeyValuePair","key":"2","value":"three"}
    ]
}

JSON B:

{
    data:
    [
        {"key":"1", "value":"one"},
        {"key":"2", "value":"two"},
        {"key":"3", "value":"three"}
    ]
}

===================

8/1/2012 update (answer when using Ext JS and you have an ASP.NET proxy:

I didn't provide this in my question about what I'm using for a JavaScript framework, but it turns out you can implicitly eliminate the "d" key by specifying the value "d" in the root property

var statusDropdownStore = new Ext.data.Store({
    proxy: new Ext.ux.AspWebAjaxProxy({
        url: '/track/Controls/Shared/GeneralService.asmx/GetDropdownOptions',
        actionMethods: {
            create: 'POST',
            destroy: 'DELETE',
            read: 'POST',
            update: 'POST'
        },
        extraParams: {
            user_login: authUser,
            table_name: '[status]'
        },
        reader: {
            type: 'json',
            model: 'DropdownOption',
            root: 'd'
        },
        headers: {
            'Content-Type': 'application/json; charset=utf-8'
        }
    })
});

Proxy:

Ext.define('Ext.ux.AspWebAjaxProxy', {
    extend: 'Ext.data.proxy.Ajax',
    require: 'Ext.data',

    buildRequest: function (operation) {
        var params = Ext.applyIf(operation.params || {}, this.extraParams || {}),
                                request;
        params = Ext.applyIf(params, this.getParams(params, operation));
        if (operation.id && !params.id) {
            params.id = operation.id;
        }

        params = Ext.JSON.encode(params);

        request = Ext.create('Ext.data.Request', {
            params: params,
            action: operation.action,
            records: operation.records,
            operation: operation,
            url: operation.url
        });
        request.url = this.buildUrl(request);
        operation.request = request;
        return request;
    }
});

Combo Box (dropdown) configuration:

                    {
                        xtype: 'combo',
                        fieldLabel: 'Status',
                        emptyText: 'Select a status...',
                        store: statusDropdownStore,
                        valueField: 'key',
                        displayField: 'value',
                        mode: 'remote',  // or 'local'
                        renderTo: document.body
                    },

sissonb · Accepted Answer · 2012-08-01 15:12:58Z

2

Here's a sample

var old = {
    "d":
    [
        {"__type":"Web.Controls.Shared.GeneralService+DropdownKeyValuePair","key":"0","value":"one"},
        {"__type":"Web.Controls.Shared.GeneralService+DropdownKeyValuePair","key":"1","value":"two"},
        {"__type":"Web.Controls.Shared.GeneralService+DropdownKeyValuePair","key":"2","value":"three"}
    ]
};

old.data = old.d;
delete old.d;
for(var i=0,l=old.data.length;i<l;i++){
    delete old.data[i].__type;
}

answered Aug 1, 2012 at 15:12

sissonb

3,7904 gold badges31 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

frenchie · Accepted Answer · 2012-08-01 15:42:24Z

1

I think this would do it:

var TheJsonA = JSON.parse(JsonA);
TheJsonA = TheJsonA.d;

var TheJsonB = {};
TheJsonB.data = [];
var TheObject = {};

if (TheJsonA.length > 0) { 

  for (var i = 0, LoopTimes = TheJsonA.length; i < LoopTimes; i++) {
      TheObject = {};
      TheObject.key = TheJsonA[i].key;
      TheObject.value = TheJsonA[i].value;
      TheJsonB.data.push(TheObject);
  }
}

TheJsonA = null; // if you need to discard the initial object

I also this JsonB shouldn't be an object that contains an array of objects; I think it should just be an array of objects like this:

[
     {"key":"1", "value":"one"},
     {"key":"2", "value":"two"},
     {"key":"3", "value":"three"}
]

edited Aug 1, 2012 at 15:42

answered Aug 1, 2012 at 15:25

frenchie

52.3k117 gold badges321 silver badges531 bronze badges

7 Comments

JustBeingHelpful Over a year ago

you are precisely right about only having the array as the object! See the bottom of my question in regards to how ExtJS allows you to remove the "d" property. I guess the "__type" property stays there.. doesn't hurt anything since we explicitly state the "key" and "value" in the combo configuration.

JustBeingHelpful Over a year ago

"key" being the valueField value property and "value" being the displayField value

frenchie Over a year ago

Yes, you can use ExtJS to extract the array from the wrapping object but that's heavy artillery! The second line of code does it by reassigning the elements inside .d to the wrapping object itself: TheNewObject = TheNewObject.d; Happy coding!!

JustBeingHelpful Over a year ago

Have you ever eaten at Frenchies on Clearwater Beach? (near Tampa/St. Petersburg) Great Food!

frenchie Over a year ago

No, but have you ever eaten in Paris, France?

|

Community · Accepted Answer · 2017-05-23 11:48:14Z

1

You could try the solution outlined at https://stackoverflow.com/a/1219633/832457 - using delete to remove the key.

Try looping through the array and using delete, then rename the array (by creating a new attribute and the deleting the old one

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Aug 1, 2012 at 15:06

keyboarddrummer

1564 bronze badges

Comments

blueiur · Accepted Answer · 2012-08-01 16:00:51Z

1

try this :) http://jsfiddle.net/daewon/LnpXb/

var jsonA = {
    d: [
        {"__type":"Web.Controls.Shared.GeneralService+DropdownKeyValuePair","key":"0","value":"one"},
        {"__type":"Web.Controls.Shared.GeneralService+DropdownKeyValuePair","key":"1","value":"two"},
        {"__type":"Web.Controls.Shared.GeneralService+DropdownKeyValuePair","key":"2","value":"three"}
   ]
};

var jsonB = {
    data: []
};

var d = jsonA.d;
for (var i=0; i<d.length; i++){
    var obj = {
        key : d[i].key,
        value : d[i].value
    };

    jsonB.data.push(obj);    
}
console.log(JSON.stringify(jsonB));
=> {"data":[{"key":"0","value":"one"},{"key":"1","value":"two"},{"key":"2","value":"three"}]}

answered Aug 1, 2012 at 16:00

blueiur

1,5071 gold badge11 silver badges17 bronze badges

Collectives™ on Stack Overflow

Ext JS 4: Convert JSON object to another JSON object using JavaScript

8/1/2012 update (answer when using Ext JS and you have an ASP.NET proxy:

4 Answers 4

Comments

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8/1/2012 update (answer when using Ext JS and you have an ASP.NET proxy:

4 Answers 4

Comments

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related