Incorporate Nested JSON within JSON using JavaScript

Question

Incorporate Nested JSON within JSON using JavaScript

I am currently dealing with a table that has been created using ng-repeat for rows and columns.

ng-model="tableValues[row][column]"

The values for row and column are obtained from ng-repeat. The data in the table consists of dropdowns, which I want to populate from a list of values.

However, when I try to write values to the ng-model from the controller, it ends up overwriting existing values for columns.

var x ={};
for(objData){
        row = objData[i]["row"];
        column = objData[i]["column"];
        value = objData[i]["value"];
        x[row]={};
        x[row][column]=value;
        vm.tableValues=x;
}

//objData is an array of objects where each object contains the value along with its corresponding row and column.

Although this code creates the correct JSON structure, it keeps overwriting values for columns.

{"r1":{"c1":"v1"},"r2":{"c2":"v2"},"r3":{"c2":"v2"}}

what I actually need is:

{"r1":{"c1":"v1","c2":"v2","c3":v3,"c4":"v4"},
{"r2":{"c1":"v1","c2":"v2","c3":v3,"c4":"v4"}.......} 
and so on..

Instead of replacing previous column values when putting them inside a row JSON by comma, I want all column values to be retained.

javascript angularjs json

Answer 1

Answer №1

To optimize your code, you can apply the reduce function to both the rows and columns:

var rows = ['r1', 'r2', 'r3', 'r4', 'r5'];
var columns = ['c1', 'c2', 'c3'];
var values = ['v1', 'v2', 'v3'];

let result = rows.reduce((previous, currentRow) => {
  previous[currentRow] = columns.reduce((accumulator, currentColumn, index) => {
    accumulator[currentColumn] = values[index] || "no value";
    return accumulator;
  }, {});
  return previous;
}, {});

console.log(result);

Answer 2

To optimize your code, you can apply the reduce function to both the rows and columns:

var rows = ['r1', 'r2', 'r3', 'r4', 'r5'];
var columns = ['c1', 'c2', 'c3'];
var values = ['v1', 'v2', 'v3'];

let result = rows.reduce((previous, currentRow) => {
  previous[currentRow] = columns.reduce((accumulator, currentColumn, index) => {
    accumulator[currentColumn] = values[index] || "no value";
    return accumulator;
  }, {});
  return previous;
}, {});

console.log(result);

Answer 3

Answer №2

Give this a shot:

let myObj ={};
    let rows=["r1","r2","r3","r4","r5"]
        let columns=["c1","c2","c3"]
        let values = ["v1","v2","v3"]
        
    for(let i=0;i<rows.length;i++){
      for(let j=0;j<columns.length;j++){
        if(!myObj[rows[i]])
           myObj[rows[i]]={};
        myObj[rows[i]][columns[j]]=values[j] || "no data";
      } 
    }
    console.log(myObj);

Answer 4

Give this a shot:

let myObj ={};
    let rows=["r1","r2","r3","r4","r5"]
        let columns=["c1","c2","c3"]
        let values = ["v1","v2","v3"]
        
    for(let i=0;i<rows.length;i++){
      for(let j=0;j<columns.length;j++){
        if(!myObj[rows[i]])
           myObj[rows[i]]={};
        myObj[rows[i]][columns[j]]=values[j] || "no data";
      } 
    }
    console.log(myObj);

Incorporate Nested JSON within JSON using JavaScript

Answer №1

Answer №2

Similar questions

Triggering a modal window with unique content by clicking on various images

Node.js Objects and String Manipulation

Managing and retrieving data in bulk from an indexed database as JSON format

Unable to utilize Bootstrap inside the Shadow DOM of Custom Elements

Is it possible to asynchronously access a JSON object that has been retrieved from a local file on a global scale using the XMLHttpRequest method and

The modal window displays an error upon submission and prevents itself from closing

What's the best way to ensure that the theme state remains persistent when navigating, refreshing, or revisiting a page in the browser?

Is there a way to change the color of a specific tab without affecting the content within it

The functionality of the submit form is encountering issues upon integration of Ajax requests

How to showcase an item in Angular 2

Issue with MVC framework: AJAX query callback function not functioning properly

The Angular bootstrap datepicker does not correctly format the date value stored in the ng-model variable

Traversing through objects in react.js

WebApi Failing to Properly Deserialize Data

What are the different ways to interact with the object retrieved from the onloadedmetadata event

Universal Navigation Search Component for Vue Router

Unraveling the mystery: accessing the same variable name within a function in JavaScript

Every time I try to launch NPM start, an error pops up on my screen

Indistinct. Applies to every case class with a single constructor parameter

Retrieving a variable from a JSON array with multiple dimensions using jQuery