Create a JSON array of objects and dynamically append new items to it

Question

Create a JSON array of objects and dynamically append new items to it

I'm feeling a bit lost and frustrated at the moment. I'm attempting to initialize a JSON Array and dynamically add JSON Objects to it during runtime, but something isn't clicking for me.

Let's say I receive a list of repeated values from the server like this:

"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]

My goal is to create an array of objects and populate them with these values.

This is how I'm trying to start my array:

var myArr = [];

and then I want to add objects with properties to it dynamically, as shown below.

var myobj = {}

for(int i=0;i<length;i++)
{
myobj[i].name = serverrespOBJ.name;
myobj[i].lastName= 'serverrespOBJ.lastname';
myArr.push(myobj)
}

However, I keep getting an error saying name cannot be added to undefined, which leads me to believe I'm not adding items to the object correctly.

I've been searching for examples to help clarify things, but haven't had much luck. Any assistance would be greatly appreciated.

Thank you

javascript arrays json

Answer 1

Answer №1

Here is an example of what you might need:

let dataList = { staff: [] }   // starting off as empty

dataList.staff.push( {
    firstName: 'Emily',
    lastName: 'Smith'
} );

Answer 2

Here is an example of what you might need:

let dataList = { staff: [] }   // starting off as empty

dataList.staff.push( {
    firstName: 'Emily',
    lastName: 'Smith'
} );

Answer 3

Answer №2

To begin, initialize the object or array you wish to manipulate dynamically. For example:

var myArray = [], myObject = {};

Next, you can add elements to them like so:

myArray.push(10);
myObject.new = 10; // or myObject['new'] = 10;

For a more advanced scenario:

myArray.push(myObject); //[10, {'new':10}] --> observe our object in the array

Answer 4

To begin, initialize the object or array you wish to manipulate dynamically. For example:

var myArray = [], myObject = {};

Next, you can add elements to them like so:

myArray.push(10);
myObject.new = 10; // or myObject['new'] = 10;

For a more advanced scenario:

myArray.push(myObject); //[10, {'new':10}] --> observe our object in the array

Answer 5

Answer №3

To create a new JSON object, you can do it like this:

var newObj = {};
newObj.people = [];
newObj.people.push({"firstName":"Alice", "lastName":"Smith"});

Alternatively, to add data to an existing object:

var jsonObj = {
    "people":[
        {"firstName":"John", "lastName":"Doe"},
        {"firstName":"Mary", "lastName":"Jones"},
        {"firstName":"Sarah", "lastName":"Taylor"}
    ]
};

jsonObj.people.push({"firstName":"Alice", "lastName":"Smith"});

console.log(jsonObj);

Answer 6

To create a new JSON object, you can do it like this:

var newObj = {};
newObj.people = [];
newObj.people.push({"firstName":"Alice", "lastName":"Smith"});

Alternatively, to add data to an existing object:

var jsonObj = {
    "people":[
        {"firstName":"John", "lastName":"Doe"},
        {"firstName":"Mary", "lastName":"Jones"},
        {"firstName":"Sarah", "lastName":"Taylor"}
    ]
};

jsonObj.people.push({"firstName":"Alice", "lastName":"Smith"});

console.log(jsonObj);

Answer 7

Answer №4

Take a look at this code snippet on JSFiddle - http://jsfiddle.net/FamBn/1/

HTML:

<input type="text" id="firstname" />
<input type="text" id="lastname" />
<input type="submit" id="add" />
<div id="dsp"></div>

JS:

var employees=[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
];

$('#add').click(function(){
    var fname=$('#firstname').val();
    var lname=$('#lastname').val();
    employees.push({
        firstName: fname,
        lastName: lname
    });
    var output = '';
    for (var i=0; i<employees.length; i++) {
        output += "FirstName: " + employees[i].firstName + " LastName: " + employees[i].lastName;
    }
    $('#dsp').html(output);
    console.log(employees);
});

Answer 8

Take a look at this code snippet on JSFiddle - http://jsfiddle.net/FamBn/1/

HTML:

<input type="text" id="firstname" />
<input type="text" id="lastname" />
<input type="submit" id="add" />
<div id="dsp"></div>

JS:

var employees=[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
];

$('#add').click(function(){
    var fname=$('#firstname').val();
    var lname=$('#lastname').val();
    employees.push({
        firstName: fname,
        lastName: lname
    });
    var output = '';
    for (var i=0; i<employees.length; i++) {
        output += "FirstName: " + employees[i].firstName + " LastName: " + employees[i].lastName;
    }
    $('#dsp').html(output);
    console.log(employees);
});

Create a JSON array of objects and dynamically append new items to it

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to retrieve a response from a modal dialog using jQuery?

When refactoring docxtemplater on the server, the request JSON object is no longer accessible in the doc.setData() method

What sets apart 'hasClass' from 'is'? Additionally, is there a substitute to retrieve a Jquery element instead?

React-router causing issues with Redux integration

Stop the npm start command with a specific error message if the file is not found in the repository

What is the best way to handle a JSON arraylist in a Node.js environment?

The steps to properly load "child.vue" into the correct position within "parent.vue" are as follows

Using MongoDB to push elements into nested arrays

Encountering the error 'Cannot read property 'length' of undefined' while attempting to fetch data from a URL using node.js

"I'm looking for a solution on integrating Osano CookieConsent into my Next.js application. Can

Learn how to efficiently import data into d3.js from several JavaScript arrays, and create a dynamically updating chart without the need to refresh the page

Tips for maintaining a scrollable Material-UI Table with dynamic height?

What methods can be used to control the URL and back button in a web application designed similar to an inbox in Gmail?

The ideal login page design

Creating a JSON document with a specific structure using Java

(Java) Algorithm for finding numbers divisible by a given number and storing them in an array for later printing

Sending the form without triggering a new window or tab

Tips for customizing the name and description of your Firefox SDK Add-on for localization

Is the z-index feature not functioning as anticipated?

Incorporating SOAP Service into AngularJS Using AngularJS Data Model