Combining array objects in JavaScript using AJAX with identical keys

Question

Combining array objects in JavaScript using AJAX with identical keys

In my MVC 5 application, I am utilizing Ajax to create an array as shown below:

$.ajax({
            type: "Post",
            url: '@Url.Action("Getthereport", "Surveys")',
            async: false,
            cache: false,
            dataType: "json",
            data: { 'test': "All" },
            success: function (result) {

                if (result && result.Grid.length > 0) {
                    for (let i = 0; i < result.Grid.length; i++) {
                        jsonData.push({
                            Question: result.Grid[i].Body,
                            QuestionId: result.Grid[i].QuestionId,
                            myData: { name: result.Grid[i].name, value: result.Grid[i].value }
                          });
                    };
                }
               },
            complete: function () {
               reduce();
            },
            error: function(err) {
                alert(err.status + " : " + err.statusText);
            }
        });

The generated result is as follows:

var jsonData = [
            {
                Question: "Was the training useful?",
                QuestionId: 1,
                myData: [{ name: 'No', value: 1 }] },
            {
                Question: "Was the training useful?",
                QuestionId: 1 ,
                myData: [{ name: 'Yes', value: 1 }]
        }];

To merge these objects, I employ the following code:

const result = Object.values(jsonData.reduce((acc, obj) => {
  if (!acc[obj.QuestionId]) {
    acc[obj.QuestionId] = obj;
  } else {
    acc[obj.QuestionId].myData = acc[obj.QuestionId].myData.concat(obj.myData);
  }
  return acc;

This works perfectly when the array is hardcoded and results in:

var jsonData = [
        {
            Question: "Was the training useful?",
            QuestionId: 1,
            myData: [{ name: 'No', value: 1 },
                     { name: 'Yes', value: 1 }] 
          }];

However, when the array is generated via an Ajax call, I encounter the following error:

 acc[obj.QuestionId].myData.concat is not a function

I attempted running the reduce script on Ajax completion and directly, but neither approach worked.

javascript arrays ajax

Answer 1

Answer №1

Ensure to note that in the success attribute of your ajax request, you are appending myData as an object and not an array.

  success: function (result) {

    if (result && result.Grid.length > 0) {
      for (let i = 0; i < result.Grid.length; i++) {
        jsonData.push({
          Question: result.Grid[i].Body,
          QuestionId: result.Grid[i].QuestionId,
          myData: { name: result.Grid[i].name, value: result.Grid[i].value }
        });
      };
    }
  },

This indicates that the outcome deviates from what was initially specified, instead:

var jsonData = [
  {
    Question: "Was the training useful?",
    QuestionId: 1,
    myData: { name: 'No', value: 1 } //<-- Objects not arrays
  },
  {
    Question: "Was the training useful?",
    QuestionId: 1,
    myData: { name: 'Yes', value: 1 }
  }
];

To rectify this, you can either convert it to an array at that stage to produce the intended output,

      for (let i = 0; i < result.Grid.length; i++) {
        jsonData.push({
          ...
          myData: [{ name: result.Grid[i].name, value: result.Grid[i].value }]
        });
      };

or modify your reduction method accordingly.

var jsonData = [
  {
    Question: "Was the training useful?",
    QuestionId: 1,
    myData: { name: 'No', value: 1 }
  },
  {
    Question: "Was the training useful?",
    QuestionId: 1,
    myData: { name: 'Yes', value: 1 }
  }
];


const result = Object.values(jsonData.reduce((acc, obj) => {
  acc[obj.QuestionId] ??= { ...obj, myData: [] };
  acc[obj.QuestionId].myData.push(obj.myData);
  return acc;
}, {}));

console.log(JSON.stringify(result, null, 2))

Answer 2

Ensure to note that in the success attribute of your ajax request, you are appending myData as an object and not an array.

  success: function (result) {

    if (result && result.Grid.length > 0) {
      for (let i = 0; i < result.Grid.length; i++) {
        jsonData.push({
          Question: result.Grid[i].Body,
          QuestionId: result.Grid[i].QuestionId,
          myData: { name: result.Grid[i].name, value: result.Grid[i].value }
        });
      };
    }
  },

This indicates that the outcome deviates from what was initially specified, instead:

var jsonData = [
  {
    Question: "Was the training useful?",
    QuestionId: 1,
    myData: { name: 'No', value: 1 } //<-- Objects not arrays
  },
  {
    Question: "Was the training useful?",
    QuestionId: 1,
    myData: { name: 'Yes', value: 1 }
  }
];

To rectify this, you can either convert it to an array at that stage to produce the intended output,

      for (let i = 0; i < result.Grid.length; i++) {
        jsonData.push({
          ...
          myData: [{ name: result.Grid[i].name, value: result.Grid[i].value }]
        });
      };

or modify your reduction method accordingly.

var jsonData = [
  {
    Question: "Was the training useful?",
    QuestionId: 1,
    myData: { name: 'No', value: 1 }
  },
  {
    Question: "Was the training useful?",
    QuestionId: 1,
    myData: { name: 'Yes', value: 1 }
  }
];


const result = Object.values(jsonData.reduce((acc, obj) => {
  acc[obj.QuestionId] ??= { ...obj, myData: [] };
  acc[obj.QuestionId].myData.push(obj.myData);
  return acc;
}, {}));

console.log(JSON.stringify(result, null, 2))

Combining array objects in JavaScript using AJAX with identical keys

Answer №1

Similar questions

Learn the process of dynamically loading scripts and their functions in Angular

Determining User Login Status in Laravel using jQuery

Pass a two-dimensional array as a one-dimensional array to a function in C

What are the steps to adjust the size of the Facebook "like" button?

Automatically update the Vuex state with dynamic data

How can I keep the cursor from automatically moving to the beginning of an input field when the type changes?

What is the best way to obtain a direct file link from a server URL using JavaScript?

Prototype: Trigger keydown event on the document and cease observation when focus is on a form

Performing two simultaneous AJAX requests using tokeninput

Retrieve data from a JavaScript function that specifies the country, state, city, and locality, providing a complete address in a Spring MVC application

Creating a four-dimensional array in PHP can be achieved by nesting multiple arrays within each

Identify the credit card as either American Express or American Express Corporate

enhancing the functionality of appended children by including a toggle class list

What is the best way to pause function execution until a user action is completed within a separate Modal?

Creating a dynamic JSON object and retrieving the response in a JSP for data-driven documents

Maintain cookie persistence beyond browser shutdown

Creating a dropdown menu in React

The error message is stating that there is a TypeError because it cannot read the property "bind" of an undefined value when using the ng

What is the best method for passing page props in Next.JS?

What is the best way to deactivate select option(s) based on the JSON data retrieved through AJAX?