Skip to content

getting confused with trying to insert nesting objects

Currently trying to build a javascript form that converts the inputs into JSON. I’ve managed to create objects that allow multiple keys/values to be entered however I’m struggling to get my head around the logic and code for nesting a child object within an object.

let objects = [];

document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('btn2').addEventListener('click', function(e) {
        e.preventDefault();

        let infoBoxOne = document.getElementById('key').value // store the key into a variable
        let infoBoxTwo =  document.getElementById('value').value // store the value into a variable

        const lastObject = objects[objects.length-1] // finds the last object in the objects array
        const objectValues = Object.entries(lastObject) // gets all the keys and values 
        const lastKeyValuePair = values[values.length-1]; // stores the last key and value entered into a variable

    })
})

So my initial idea was to find the last key/value within the last object that was added and use something like Object.create() or push() to insert the data. Is there an easier way of achieving this?


edit: here’s a jsfiddle showing what I have exactly so far https://jsfiddle.net/9jrzLxnm/


Secone edit: idea of what I’m trying to achieve

{
  {
    "firstObject":'FirstObject'
  },
  {
    "lastObject": {
      "infoBoxOne": "JlastObject",
      },
  }
}

Answer

Ok firstly you have to set the desired location to place a child object as an object itself.. then the rest is intuitive

My example is on jsfiddle

document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('btn2').addEventListener('click', function(e) {
        e.preventDefault();

        let childKey = document.getElementById('key').value // store the key into a variable
        let childValue =  document.getElementById('value').value // store the value into a variable

        const lastObject = objects[objects.length-1] // finds the last object in the objects array
        const values = Object.entries(lastObject) // gets all the keys and values 
        const [key,value] = values[values.length-1]; // stores the last key and value entered into a variable
        lastObject[key]={} //turning place to put child into an object
        lastObject[key][childKey]=childValue //placing the nested child
        document.forms[0].reset();
        listToJson();
    })
})