Retrieving the values from unspecified keys within an array of objects

Question

Retrieving the values from unspecified keys within an array of objects

Receiving a JSON from an external source with an unpredictable number of keys is the challenge. The structure typically appears as follows:

data = [{
id: 1,
testObject_1_color: "red",
testObject_1_shape: "triangle",
testObject_2_color: "blue",
testObject_2_shape: "line",
},{
id: 2,
testObject_1_color: "green"
testObject_1_shape: "triangle",
},{
id: 3,
testObject_1_color: "brown",
testObject_1_shape: "square",
testObject_2_color: "black",
testObject_2_shape: "circle",
testObject_3_color: "orange"
testObject_3_shape: "square",
}]

To effectively process this data, transforming it into a more manageable format would be ideal:

data = [
{object:1, color:"red", shape:"triangle"},
{object:2, color:"blue", shape:"line"},
{object:3, color:"green", shape:"triangle"}
]

The fluctuating number of testObject_x_color / shape properties makes iterating through the collection daunting without resorting to repetitive checks like

if data.hasOwnProperty('testObject_x_color')...

. Any suggestions on how to navigate this gracefully?

javascript arrays object

Answer 1

Answer №1

Below is another approach utilizing several loops:

var items = [{
  id: 1,
  testObject_1_color: "red",
  testObject_1_shape: "triangle",
  testObject_2_color: "blue",
  testObject_2_shape: "line"
}, {
  id: 2,
  testObject_1_color: "green",
  testObject_1_shape: "triangle"
}, {
  id: 3,
  testObject_1_color: "brown",
  testObject_1_shape: "square",
  testObject_2_color: "black",
  testObject_2_shape: "circle",
  testObject_3_color: "orange",
  testObject_3_shape: "square"
}];

var organizedData = items.reduce(function(accumulator, current) {
  
  var tempObj = {};
  
  Object.keys(current).forEach(function(key) {
    
    var parts = key.split('_');
    
    if (parts.length === 3) {
      if (!tempObj[parts[1]]) {
        tempObj[parts[1]] = {};
      }
      tempObj[parts[1]][parts[2]] = current[key];
    }
  });
  
  Object.values(tempObj).forEach(function(pair) {
    accumulator.push(pair);
  });
  
  return accumulator;
}, []);

for (var index = 0; index < organizedData.length; index++) {
  console.log('object ' + (index + 1) + ': ', organizedData[index]);
}

Answer 2

Below is another approach utilizing several loops:

var items = [{
  id: 1,
  testObject_1_color: "red",
  testObject_1_shape: "triangle",
  testObject_2_color: "blue",
  testObject_2_shape: "line"
}, {
  id: 2,
  testObject_1_color: "green",
  testObject_1_shape: "triangle"
}, {
  id: 3,
  testObject_1_color: "brown",
  testObject_1_shape: "square",
  testObject_2_color: "black",
  testObject_2_shape: "circle",
  testObject_3_color: "orange",
  testObject_3_shape: "square"
}];

var organizedData = items.reduce(function(accumulator, current) {
  
  var tempObj = {};
  
  Object.keys(current).forEach(function(key) {
    
    var parts = key.split('_');
    
    if (parts.length === 3) {
      if (!tempObj[parts[1]]) {
        tempObj[parts[1]] = {};
      }
      tempObj[parts[1]][parts[2]] = current[key];
    }
  });
  
  Object.values(tempObj).forEach(function(pair) {
    accumulator.push(pair);
  });
  
  return accumulator;
}, []);

for (var index = 0; index < organizedData.length; index++) {
  console.log('object ' + (index + 1) + ': ', organizedData[index]);
}

Answer 3

Answer №2

implement the use of regular expressions and ES5 array functions.

let data = [{
    id: 1,
    testObject_1_color: 'red',
    testObject_1_shape: 'triangle',
    testObject_2_color: 'blue',
    testObject_2_shape: 'line'
  },
  {
    id: 2,
    testObject_1_color: 'green',
    testObject_1_shape: 'triangle'
  },
  {
    id: 3,
    testObject_1_color: 'brown',
    testObject_1_shape: 'square',
    testObject_2_color: 'black',
    testObject_2_shape: 'circle',
    testObject_3_color: 'orange',
    testObject_3_shape: 'square'
  }
]
let regId = /testObject_(\d{1,3})_(color|shape)/
let res = data
  .reduce((re, obj) => {
    Reflect.ownKeys(obj)
      .filter(key => key !== 'id')
      .forEach(key => {
        let id = obj.id + '' + key.match(regId)[1]
        let isFind = re.find(o => o.id === id)
        if (!isFind) {
          re.push({
            id: obj.id + '' + key.match(regId)[1],
            color: obj[key]
          })
        } else {
          isFind.shape = obj[key]
        }
      })
    return re
  }, [])
  .map(({ id, color, shape }, index) => ({
    id: index + 1,
    color,
    shape
  }))
console.log(res)

Answer 4

implement the use of regular expressions and ES5 array functions.

let data = [{
    id: 1,
    testObject_1_color: 'red',
    testObject_1_shape: 'triangle',
    testObject_2_color: 'blue',
    testObject_2_shape: 'line'
  },
  {
    id: 2,
    testObject_1_color: 'green',
    testObject_1_shape: 'triangle'
  },
  {
    id: 3,
    testObject_1_color: 'brown',
    testObject_1_shape: 'square',
    testObject_2_color: 'black',
    testObject_2_shape: 'circle',
    testObject_3_color: 'orange',
    testObject_3_shape: 'square'
  }
]
let regId = /testObject_(\d{1,3})_(color|shape)/
let res = data
  .reduce((re, obj) => {
    Reflect.ownKeys(obj)
      .filter(key => key !== 'id')
      .forEach(key => {
        let id = obj.id + '' + key.match(regId)[1]
        let isFind = re.find(o => o.id === id)
        if (!isFind) {
          re.push({
            id: obj.id + '' + key.match(regId)[1],
            color: obj[key]
          })
        } else {
          isFind.shape = obj[key]
        }
      })
    return re
  }, [])
  .map(({ id, color, shape }, index) => ({
    id: index + 1,
    color,
    shape
  }))
console.log(res)

Retrieving the values from unspecified keys within an array of objects

Answer №1

Answer №2

Similar questions

js TouchEvent: When performing a pinch gesture with two fingers and lifting one of them up, how can you determine which finger was lifted?

Generate responsive elements using Bootstrap dynamically

Various criteria and unspecified length for input needed

Guidelines for integrating historyAPI with AngularJS

Border becomes dashed when dragging and dropping

Mongoose is having trouble identifying the 2dsphere index I created

Obtain the indices of a 2D array jQuery element within a callback function

PHP: Retrieve different options from an array

Keep subtracting pairs of numbers within an array until there is only one integer left in the array

Transforming a React Class Component into a React Functional Component

What is the method for utilizing string interpolation in Angular/Typescript in order to retrieve a value from a variable?

Can you retrieve data or HTML content from the main Vue 3 component?

What is the best way to access the Nodejs response object from outside the routing function?

Creating vibrant squares using HTML and CSS

I am attempting to trigger a mouseup event following a mousedown action

What sets the Object Class definition apart in importance?

Challenges arise when the value of an element within an entity is 'undefined'

Tips for enabling the OnLoad Event for a React Widget

Creating a personalized progress bar that reflects real-time data from an external API

Drop the <span> element into a paragraph by utilizing JQuery's drag and drop feature