Updating the configuration of JavaScript array

Question

Updating the configuration of JavaScript array

As a newcomer to javascript, I am facing a minor issue. My goal is to restructure an array for use in rendering React Native using SectionList.

The JSON data I received from the Web API looks like this:

[
  {
    title: "Test",
    c: 1,
    d: 2,
  },
  {
    title: "Test",
    c: 3,
    d: 4,
  },
  {
    title: "Test",
    c: 5,
    d: 6,
  },
  {
    title: "Test01",
    c: 1,
    d: 2,
  },
  {
    title: "Test01",
    c: 3,
    d: 4,
  },
  {
    title: "Test01",
    c: 5,
    d: 6,
  },
  {
    title: "Test02",
    c: 1,
    d: 2,
  },
  {
    title: "Test02",
    c: 3,
    d: 4,
  },
  {
    title: "Test02",
    c: 5,
    d: 6,
  },
];

My objective is to transform this JSON structure into the following format:

[
  {
    title: "Test",
    data: [
      { c: 1, d: 2 },
      { c: 3, d: 4 },
      { c: 5, d: 6 },
    ],
  },
  {
    title: "Test01",
    data: [
      { c: 1, d: 2 },
      { c: 3, d: 4 },
      { c: 5, d: 6 },
    ],
  },
  {
    title: "Test02",
    data: [
      { c: 1, d: 2 },
      { c: 3, d: 4 },
      { c: 5, d: 6 },
    ],
  },
];

javascript arrays json

Answer 1

Answer №1

To simplify your data organization, consider linking it to the test name. However, if you prefer to map your array in a different way, you can achieve your desired outcome by following this approach:

let updatedArray=[];
originalArray.forEach(item => {
  let testName = item.title;
  let index = updatedArray.findIndex(a => a.title = testName);
  if (index === -1) {
    updatedArray.push({title}
    index = updatedArray.length - 1;
  }
let columns = ['c', 'd'];
let newData = {};
columns.forEach(col => {
 newData[col] = item[col];
});
if (!Array.isArray(updatedArray[index].data)) {
  isArray(updatedArray[index].data = [];
}
updatedArray[index].data.push(newData);
});

Answer 2

To simplify your data organization, consider linking it to the test name. However, if you prefer to map your array in a different way, you can achieve your desired outcome by following this approach:

let updatedArray=[];
originalArray.forEach(item => {
  let testName = item.title;
  let index = updatedArray.findIndex(a => a.title = testName);
  if (index === -1) {
    updatedArray.push({title}
    index = updatedArray.length - 1;
  }
let columns = ['c', 'd'];
let newData = {};
columns.forEach(col => {
 newData[col] = item[col];
});
if (!Array.isArray(updatedArray[index].data)) {
  isArray(updatedArray[index].data = [];
}
updatedArray[index].data.push(newData);
});

Answer 3

Answer №2

To obtain the desired format, you can use the reduce operation on the array.

const items = [
  {
    title: "Test",
    c: 1,
    d: 2,
  },
  {
    title: "Test",
    c: 3,
    d: 4,
  },
  {
    title: "Test",
    c: 5,
    d: 6,
  },
  {
    title: "Test01",
    c: 1,
    d: 2,
  },
  {
    title: "Test01",
    c: 3,
    d: 4,
  },
  {
    title: "Test01",
    c: 5,
    d: 6,
  },
  {
    title: "Test02",
    c: 1,
    d: 2,
  },
  {
    title: "Test02",
    c: 3,
    d: 4,
  },
  {
    title: "Test02",
    c: 5,
    d: 6,
  },
];

const formatted = items.reduce((carry, current) => {
    // creating a placeholder format to store the data 
    if(!carry.hasOwnProperty(current.title)) {
      carry[current.title] = {
        title: current.title,
        data: []
      };
    }
    // Adding the data to the unique title
    carry[current.title].data.push({ c: current.c, d: current.d });
    return carry;
}, []);
// formatted will contain key-value pairs
console.log(Object.values(formatted));

Answer 4

To obtain the desired format, you can use the reduce operation on the array.

const items = [
  {
    title: "Test",
    c: 1,
    d: 2,
  },
  {
    title: "Test",
    c: 3,
    d: 4,
  },
  {
    title: "Test",
    c: 5,
    d: 6,
  },
  {
    title: "Test01",
    c: 1,
    d: 2,
  },
  {
    title: "Test01",
    c: 3,
    d: 4,
  },
  {
    title: "Test01",
    c: 5,
    d: 6,
  },
  {
    title: "Test02",
    c: 1,
    d: 2,
  },
  {
    title: "Test02",
    c: 3,
    d: 4,
  },
  {
    title: "Test02",
    c: 5,
    d: 6,
  },
];

const formatted = items.reduce((carry, current) => {
    // creating a placeholder format to store the data 
    if(!carry.hasOwnProperty(current.title)) {
      carry[current.title] = {
        title: current.title,
        data: []
      };
    }
    // Adding the data to the unique title
    carry[current.title].data.push({ c: current.c, d: current.d });
    return carry;
}, []);
// formatted will contain key-value pairs
console.log(Object.values(formatted));

Answer 5

Answer №3

This custom function uses reduce to gather data into an array:

const originalData = [{
    name: 'Example A',
    value1: 1,
    value2: 2,
  },
  {
    name: 'Example A',
    value1: 3,
    value2: 4,
  },
  {
    name: 'Example A',
    value1: 5,
    value2: 6,
  },
  {
    name: 'Example B',
    value1: 1,
    value2: 2,
  },
  {
    name: 'Example B',
    value1: 3,
    value2: 4,
  },
  {
    name: 'Example B',
    value1: 5,
    value2: 6,
  },
  {
    name: 'Example C',
    value1: 1,
    value2: 2,
  },
  {
    name: 'Example C',
    value1: 3,
    value2: 4,
  },
  {
    name: 'Example C',
    value1: 5,
    value2: 6,
  },
];

const processedData = originalData.reduce((accumulator, {
  name,
  ...additionalData
}) => {
  const index = accumulator.findIndex((element) => name === element.name);
  if (index === -1) accumulator.push({
    name,
    details: [additionalData]
  });
  else accumulator[index].details.push(additionalData);
  return accumulator;
}, []);
console.log(processedData);

Answer 6

This custom function uses reduce to gather data into an array:

const originalData = [{
    name: 'Example A',
    value1: 1,
    value2: 2,
  },
  {
    name: 'Example A',
    value1: 3,
    value2: 4,
  },
  {
    name: 'Example A',
    value1: 5,
    value2: 6,
  },
  {
    name: 'Example B',
    value1: 1,
    value2: 2,
  },
  {
    name: 'Example B',
    value1: 3,
    value2: 4,
  },
  {
    name: 'Example B',
    value1: 5,
    value2: 6,
  },
  {
    name: 'Example C',
    value1: 1,
    value2: 2,
  },
  {
    name: 'Example C',
    value1: 3,
    value2: 4,
  },
  {
    name: 'Example C',
    value1: 5,
    value2: 6,
  },
];

const processedData = originalData.reduce((accumulator, {
  name,
  ...additionalData
}) => {
  const index = accumulator.findIndex((element) => name === element.name);
  if (index === -1) accumulator.push({
    name,
    details: [additionalData]
  });
  else accumulator[index].details.push(additionalData);
  return accumulator;
}, []);
console.log(processedData);

Answer 7

Answer №4

const data =[
  {
    name: "Sample",
    value1: 1,
    value2: 2,
  },
  {
    name: "Sample",
    value1: 3,
    value2: 4,
  },
  {
    name: "Sample",
    value1: 5,
    value2: 6,
  },
  {
    name: "Sample01",
    value1: 1,
    value2: 2,
  },
  {
    name: "Sample01",
    value1: 3,
    value2: 4,
  },
  {
    name: "Sample01",
    value1: 5,
    value2: 6,
  },
  {
    name: "Sample02",
    value1: 1,
    value2: 2,
  },
  {
    name: "Sample02",
    value1: 3,
    value2: 4,
  },
  {
    name: "Sample02",
    value1: 5,
    value2: 6,
  },
];
let resultData = {};
data.forEach((element)=>{
  if(!resultData[element.name]){
  resultData[element.name] = {info:[]};
}
  resultData[element.name]['info'].push({ value1: element.value1, value2: element.value2});
});
let newStructure =[];
Object.keys(resultData).forEach((key)=>{
  newStructure.push({
    name: key, info: resultData[key].info
})
});
console.log(newStructure)

Answer 8

const data =[
  {
    name: "Sample",
    value1: 1,
    value2: 2,
  },
  {
    name: "Sample",
    value1: 3,
    value2: 4,
  },
  {
    name: "Sample",
    value1: 5,
    value2: 6,
  },
  {
    name: "Sample01",
    value1: 1,
    value2: 2,
  },
  {
    name: "Sample01",
    value1: 3,
    value2: 4,
  },
  {
    name: "Sample01",
    value1: 5,
    value2: 6,
  },
  {
    name: "Sample02",
    value1: 1,
    value2: 2,
  },
  {
    name: "Sample02",
    value1: 3,
    value2: 4,
  },
  {
    name: "Sample02",
    value1: 5,
    value2: 6,
  },
];
let resultData = {};
data.forEach((element)=>{
  if(!resultData[element.name]){
  resultData[element.name] = {info:[]};
}
  resultData[element.name]['info'].push({ value1: element.value1, value2: element.value2});
});
let newStructure =[];
Object.keys(resultData).forEach((key)=>{
  newStructure.push({
    name: key, info: resultData[key].info
})
});
console.log(newStructure)

Answer 9

Answer №5

const information = [
    {
      name: "John",
      age: 25,
      city: "New York",
    },
    {
      name: "Emily",
      age: 30,
      city: "Los Angeles",
    },
    {
      name: "Michael",
      age: 35,
      city: "Chicago",
    },
    {
      name: "Sarah",
      age: 22,
      city: "Miami",
    },
    {
      name: "David",
      age: 40,
      city: "Seattle",
    }
];

console.log('information', information);

function organizeData(information){
    let grouped = {}
    for(let person of information){
      if(grouped[person.city]){
          grouped[person.city].push({name: person.name, age: person.age})
      }else{
          grouped[person.city] ={
              details: [{name: person.name,age: person.age}]
          }
  
      }
    }
    
    console.log('grouped data', grouped)
    
  let finalResult = []
    for(let location in grouped){
      finalResult.push({city:location,details:grouped[location].details})
    }
    
    console.log('final result', JSON.stringify(finalResult))
    
  return finalResult
}

organizeData(information)

Answer 10

const information = [
    {
      name: "John",
      age: 25,
      city: "New York",
    },
    {
      name: "Emily",
      age: 30,
      city: "Los Angeles",
    },
    {
      name: "Michael",
      age: 35,
      city: "Chicago",
    },
    {
      name: "Sarah",
      age: 22,
      city: "Miami",
    },
    {
      name: "David",
      age: 40,
      city: "Seattle",
    }
];

console.log('information', information);

function organizeData(information){
    let grouped = {}
    for(let person of information){
      if(grouped[person.city]){
          grouped[person.city].push({name: person.name, age: person.age})
      }else{
          grouped[person.city] ={
              details: [{name: person.name,age: person.age}]
          }
  
      }
    }
    
    console.log('grouped data', grouped)
    
  let finalResult = []
    for(let location in grouped){
      finalResult.push({city:location,details:grouped[location].details})
    }
    
    console.log('final result', JSON.stringify(finalResult))
    
  return finalResult
}

organizeData(information)

Updating the configuration of JavaScript array

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best approach for writing a concise Select statement that produces a data list?

Navigating through complex data structures of nested objects and arrays to selectively

Clouds marred by a unpleasant visual presentation

Is it possible to transform a ReadonlyArray<any> into a standard mutable array []?

Issues encountered when trying to retrieve data from an Express server

PyTorch: inverse lookup

Multer is successfully retrieving images, but unfortunately, it is failing to save the files in the intended directory

Show a different image with a matching title each time the page loads

Tips for importing and exporting icons in a way that allows for dynamic importing using a string parameter

Is it possible to include 'file.php' along with the 'id' using php?

Sending File from React to Express Causes 404 Error

Is there a way for me to open this tr link in a separate tab rather than in the current one?

How to showcase an ArrayList with and without organizing it?

Assign updated values to a list based on changed fields in the map

An easy way to attach a Contextmenu to a specific element

Issues with the functionality of the ObjectMapper.readValues() method when handling invalid JSON data

Sending the value of a selected option from the view to the controller in .NET 6 using a for loop

Restrict the number of requests made to the Facebook graph_url_engagement_count API

What is the best way to divide my value sets using jQuery?

Error: Python requires string indices to be integers