Appending to JSON object using JavaScript

Question

I'm building the JSON object using JavaScript. How would I inset the following data to the bottom of the stack:

"hello": { "label":"Hello", "url":"#hello" }

in to the following variable:

var ListData = {
  "main": {
    "label":"Main",
    "url":"#main"
  },
  "project": {
    "label":"Project",
    "url":"#project"
  },
  "settings": {
    "label":"Settings",
    "url":"#settings",
    "subnav":[
      {
        "label":"Privacy",
        "url":"#privacy"
      },
      {
        "label":"Security",
        "url":"#security"
      },
      {
        "label":"Advanced",
        "url":"#advanced"
      }
    ]
  }
};

So the variable looks like:

var ListData = {
  "main": {
    "label":"Main",
    "url":"#main"
  },
  "project": {
    "label":"Project",
    "url":"#project"
  },
  "settings": {
    "label":"Settings",
    "url":"#settings",
    "subnav":[
      {
        "label":"Privacy",
        "url":"#privacy"
      },
      {
        "label":"Security",
        "url":"#security"
      },
      {
        "label":"Advanced",
        "url":"#advanced"
      }
    ]
  },
  "hello": {
    "label":"Hello",
    "url":"#hello"
  }
};

I used the following code but it doesn't seem to work:

var NewData = '"hello": { "label":"Hello", "url":"#hello" }';
ListData.push(NewData);

Clay Hinson · Accepted Answer · 2010-10-10 01:26:49Z

21

You can insert it directly with an object literal:

ListData.hello = { label: "Hello", url: "#hello" };

answered Oct 10, 2010 at 1:26

Clay Hinson

9431 gold badge6 silver badges9 bronze badges

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

Comments

Ashish Bahl · Accepted Answer · 2017-01-31 10:47:41Z

9

If you are using jQuery, you can use the .extend() jQuery API like:

$.extend(ListData, {"hello": { "label":"Hello", "url":"#hello" }});

edited Jan 31, 2017 at 10:47

Ashish Bahl

1,4941 gold badge18 silver badges28 bronze badges

answered Oct 10, 2010 at 1:30

Alex

66.3k49 gold badges154 silver badges181 bronze badges

1 Comment

Pereira Over a year ago

After nine and a half years, this solution helped me a lot. Thank you.

Sohan · Accepted Answer · 2017-01-31 11:28:54Z

I have one more solution using underscore.js module,

var _ = require("underscore");

var src = {
    "main": {
        "label": "Main",
        "url": "#main"
    },
    "project": {
        "label": "Project",
        "url": "#project"
    },
    "settings": {
        "label": "Settings",
        "url": "#settings",
        "subnav": [
            {
                "label": "Privacy",
                "url": "#privacy"
            },
            {
                "label": "Security",
                "url": "#security"
            },
            {
                "label": "Advanced",
                "url": "#advanced"
            }
        ]
    }
};

var dest = {"hello": { "label":"Hello", "url":"#hello" }};


var data = _.extend(src, dest);
console.log(JSON.stringify(data));

Required op :

{"main":{"label":"Main","url":"#main"},"project":{"label":"Project","url":"#project"},"settings":{"label":"Settings","url":"#settings","subnav":[{"label":"Privacy","url":"#privacy"},{"label":"Security","url":"#security"},{"label":"Advanced","url":"#advanced"}]},"hello":{"label":"Hello","url":"#hello"}}

Robert Bolton · Accepted Answer · 2017-02-14 15:09:23Z

2

A JavaScript Object Literal is a comma-separated list of name/value pairs wrapped by a pair of curly braces.

To append the property name of encampment name with a value of Valley Forge to the bottom of the stack, simply add the property name after the JSON object with a dot syntax. Then specify the value. (See 'Append data' below)

You can also delete the appended name/value pair from the object literal. (See 'Delete data below')

// Start with some JSON
var myJson = { "name":"George Washington", "rank":"General", "serial":"102" };

// Append data
myJson.encampment = "Valley Forge";    

// Delete data
delete myJson.encampment

answered Feb 14, 2017 at 15:09

Robert Bolton

6733 gold badges8 silver badges22 bronze badges

Comments

Bobby Borszich · Accepted Answer · 2010-10-10 16:14:37Z

1

Keeping with you object literal statements just add another object to your ListData object.

ListData.hello = { "label":"Hello", "url":"#hello" };

push is only for Javascript Arrays.

edited Oct 10, 2010 at 16:14

answered Oct 10, 2010 at 1:20

Bobby Borszich

11.8k9 gold badges41 silver badges35 bronze badges

Collectives™ on Stack Overflow

Appending to JSON object using JavaScript

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related