Add/Remove Key Value Pairs (Attributes) from JSON Data using JavaScript

Hi! Let's see how to add and remove key value pairs from json data using javascript. JSON is the string representation of java script object and cross-platform compatible. Using AJAX you can communicate with numerous web services and grab API data in JSON format. Considering the increased popularity of API's, it goes without saying that the ability to read, process and manipulate JSON is a must have skill for developers. In JSON, data is stored as key - value pairs and wrapped within quotes since it's a string. Sometimes the key-value pairs are also referred to as attributes, items or elements. Here I'm going to show you how to append or remove key value pairs from existing json data.

JSON Attributes - Key Value Pairs:

JSON attributes are represented as key value pairs something similar to associative arrays. The key-value pairs look something like this,

{ "name": "Barbie" }

Here "name" is the key and "Barbie" is the value of that key.

Also Read:

• Parse JSON and Display in HTML Table with jQuery
• How to Merge Two JSON Data into One using jQuery
• Display JSON in HTML Table using AJAX and jQuery

Plus JSON comes in all sorts of representation - simple, nested or arrays. The simple format contains a set of attributes like this.

{
    "fruit": "apple",
    "color": "red"
}

And as for array of items it will look like this,

[
    {
        "name": "Fredie",
        "department": "Finance"
    },
    {
        "name": "Rolland",
        "department": "Sales"
    },
    {
        "name": "Gina",
        "department": "Customer Service"
    }
]

At times json data can be complicated with nested attributes.

{
    "empid": "ABC001X",
    "personal": {
        "name": "Paula Thompson",
        "gender": "Female",
        "age": "34",
        "address": {
            "streetaddress": "12 117th Street",
            "city": "New York",
            "state": "NY",
            "zipcode": "10038"
        }
    },
    "official": {
        "designation": "Vice President",
        "department": "Operations"
    }
}

However it is you can manipulate json easily with native java script. The same can be handled with jquery but unless necessary just the plain old javascript will do. By this way you can reduce server load.

Add Key Value Pair to JSON with JavaScript:

Adding key value pair to json will append the new attribute to the end of the json string. Following is the simplest way to add attributes to existing json data.

var data = {
    "id": "XYZ123",
    "name": "Greg",
    "gender": "Male"
};

data.country = "United States";
console.log(JSON.stringify(data));

// Produce Output
{
    "id":"XYZ123",
    "name":"Greg",
    "gender":"Male",
    "country":"United States"
}

If json has array of items, then you can add key value pairs to each subset like this,

var data = [
    {
        "name": "John Smith",
        "age": "45"
    },
    {
        "name": "Peter Jason",
        "age": "26"
    },
    {
        "name": "Alice Ray",
        "age": "34"
    }
];

for (var i=0; i<data.length; i++) {
    data[i].department = "Administration";
    data[i].company = "ABC Corp";
}
console.log(JSON.stringify(data));

// Produce Output
var data = [
    {
        "name":"John Smith",
        "age":"45",
        "department":"Administration",
        "company":"ABC Corp"
    },
    {
        "name":"Peter Jason",
        "age":"26",
        "department":"Administration",
        "company":"ABC Corp"
    },
    {
        "name":"Alice Ray",
        "age":"34",
        "department":"Administration",
        "company":"ABC Corp"
    }
];

You have to loop through the array of items and add attributes to each one of it.

Remove Key Value Pair from JSON:

Let's say you have the following JSON data,

var data = {
    "id":"XYZ123",
    "name":"Greg",
    "gender":"Male",
    "country":"United States"
};

In order to remove an attribute from json you have to use JS delete method. This will delete the json attribute with the specific key.

delete data.gender;
console.log(JSON.stringify(data));

// Produce Output
{
    "id":"XYZ123",
    "name":"Greg",
    "country":"United States"
}

Likewise you can remove the occurrence of particular attribute from json array.

var data = [
    {
        "name":"John Smith",
        "age":"45",
        "department":"Administration",
        "company":"ABC Corp"
    },
    {
        "name":"Peter Jason",
        "age":"26",
        "department":"Administration",
        "company":"ABC Corp"
    },
    {
        "name":"Alice Ray",
        "age":"34",
        "department":"Administration",
        "company":"ABC Corp"
    }
];

for (var i=0; i<data.length; i++) {
    delete data[i].age;
}
console.log(JSON.stringify(data));

// Produce Output
[
    {
        "name":"John Smith",
        "department":"Administration",
        "company":"ABC Corp"
    },
    {
        "name":"Peter Jason",
        "department":"Administration",
        "company":"ABC Corp"
    },
    {
        "name":"Alice Ray",
        "department":"Administration",
        "company":"ABC Corp"
    }
]

That explains about add and remove key value pairs in json using javascript. Please note that the json you use should be of valid one for the above methods to work. I hope you find this tutorial useful. Meet you in another interesting one.