Transform the object into an array and iterate through all its values

Question

Transform the object into an array and iterate through all its values

How can I transform an object into an array and iterate through each item?

Here is the object I have:

let obj = {
    each_hour: "20000",
    edit_photo: { yes: "20000", no: "0" },
    photo_type: { Personal: "1000", sport: "2100", Industrial: "1200", Commercial: "2300", Fashion: "1300", mode: { "name": "farhad" } },
    photograph_gender: { male: "0", female: "20000" }
}

Desired output:

each_hour
20000
edit_photo
yes
20000
no
0
photo_type
Personal
1000
sport
2100
Industrial
1200
...

javascript arrays object

Answer 1

Answer №1

To manipulate the data stored in the object, you can experiment with utilizing JSON.stringify(), replace(), and split() in the following manner:

let myObj = {
    hours_per_day: "8",
    tasks: { work: "5", break: "3" },
    project_types: { Personal: "100", school: "200", Professional: "300" },
    employees: { total: "10", male: "3", female: "7" }
}
 var result = JSON.stringify(myObj).replace(/["{}]/g,'').split(/[:,]/);
 console.log(result);

Answer 2

To manipulate the data stored in the object, you can experiment with utilizing JSON.stringify(), replace(), and split() in the following manner:

let myObj = {
    hours_per_day: "8",
    tasks: { work: "5", break: "3" },
    project_types: { Personal: "100", school: "200", Professional: "300" },
    employees: { total: "10", male: "3", female: "7" }
}
 var result = JSON.stringify(myObj).replace(/["{}]/g,'').split(/[:,]/);
 console.log(result);

Answer 3

Answer №2

To efficiently iterate through your object, a recursive function can be used. If the function receives an array, it can recursively call itself on each element in the array using mapping. When handling objects, you can utilize Object.entries() to get the key-value pairs and perform the same array mapping technique. For non-array or non-object inputs, simply return the value:

function traverseObject(val) {
  if(Array.isArray(val)) {
    return val.flatMap(elem => traverseObject(elem));
  } else if(Object(val) === val) {
    return traverseObject(Object.entries(val));
  }
  return val;
}

const obj = { each_hour: "20000", edit_photo: { yes: "20000", no: "0" }, photo_type: { Personal: "1000", sport: "2100", Industrial: "1200", Commercial: "2300", Fashion: "1300", mode: { "name": "farhad" } }, photograph_gender: { male: "0", female: "20000" } }
traverseObject(obj).forEach(e => console.log(e));

An alternative approach involves utilizing the replacer function of JSON.stringify which will be invoked for every key/value pair in the object. However, this method may be considered a workaround:

function traverseObject(obj) {
  const res = [];
  JSON.stringify(obj, (key, val) => (key !== "" && res.push(key, ...(Object(val) === val ? [] : [val])), val));
  return res;
}
// works with arrays -
const obj = { foo: [4, 5, 6], each_hour: "20000", edit_photo: { yes: "20000", no: "0" }, photo_type: { Personal: "1000", sport: "2100", Industrial: "1200", Commercial: "2300", Fashion: "1300", mode: { "name": "farhad" } }, photograph_gender: { male: "0", female: "20000" } }
traverseObject(obj).forEach(e => console.log(e));

Answer 4

To efficiently iterate through your object, a recursive function can be used. If the function receives an array, it can recursively call itself on each element in the array using mapping. When handling objects, you can utilize Object.entries() to get the key-value pairs and perform the same array mapping technique. For non-array or non-object inputs, simply return the value:

function traverseObject(val) {
  if(Array.isArray(val)) {
    return val.flatMap(elem => traverseObject(elem));
  } else if(Object(val) === val) {
    return traverseObject(Object.entries(val));
  }
  return val;
}

const obj = { each_hour: "20000", edit_photo: { yes: "20000", no: "0" }, photo_type: { Personal: "1000", sport: "2100", Industrial: "1200", Commercial: "2300", Fashion: "1300", mode: { "name": "farhad" } }, photograph_gender: { male: "0", female: "20000" } }
traverseObject(obj).forEach(e => console.log(e));

An alternative approach involves utilizing the replacer function of JSON.stringify which will be invoked for every key/value pair in the object. However, this method may be considered a workaround:

function traverseObject(obj) {
  const res = [];
  JSON.stringify(obj, (key, val) => (key !== "" && res.push(key, ...(Object(val) === val ? [] : [val])), val));
  return res;
}
// works with arrays -
const obj = { foo: [4, 5, 6], each_hour: "20000", edit_photo: { yes: "20000", no: "0" }, photo_type: { Personal: "1000", sport: "2100", Industrial: "1200", Commercial: "2300", Fashion: "1300", mode: { "name": "farhad" } }, photograph_gender: { male: "0", female: "20000" } }
traverseObject(obj).forEach(e => console.log(e));

Answer 5

Answer №3

Here's another way to handle the code with an old-school imperative style and recursion:

In this approach, we maintain an array called `output` where we store key-value pairs obtained from `Object.entries`. If the value is an object, we recursively call the function again, otherwise we add it directly to the `output` array.

Please note that this method is tailored to your specific use case and may not be suitable for general purposes.

let obj = {
    each_hour: "20000",
    edit_photo: { yes: "20000", no: "0" },
    photo_type: { Personal: "1000", sport: "2100", Industrial: "1200", Commercial: "2300", Fashion: "1300", mode: { "name": "farhad" } },
    photograph_gender: { male: "0", female: "20000" }
}


function objToArray(obj){

  const output = [];

  function processing(obj){
  for (const [key,value] of Object.entries(obj)){
    if(typeof value === 'object' ){
       output.push(key);
       processing(value);
    }
    else{
    output.push(key,value);
    }
  }
  }
  
  processing(obj);
  return output;
}

const result = objToArray(obj);
console.log(result);

Answer 6

Here's another way to handle the code with an old-school imperative style and recursion:

In this approach, we maintain an array called `output` where we store key-value pairs obtained from `Object.entries`. If the value is an object, we recursively call the function again, otherwise we add it directly to the `output` array.

Please note that this method is tailored to your specific use case and may not be suitable for general purposes.

let obj = {
    each_hour: "20000",
    edit_photo: { yes: "20000", no: "0" },
    photo_type: { Personal: "1000", sport: "2100", Industrial: "1200", Commercial: "2300", Fashion: "1300", mode: { "name": "farhad" } },
    photograph_gender: { male: "0", female: "20000" }
}


function objToArray(obj){

  const output = [];

  function processing(obj){
  for (const [key,value] of Object.entries(obj)){
    if(typeof value === 'object' ){
       output.push(key);
       processing(value);
    }
    else{
    output.push(key,value);
    }
  }
  }
  
  processing(obj);
  return output;
}

const result = objToArray(obj);
console.log(result);

Transform the object into an array and iterate through all its values

Answer №1

Answer №2

Answer №3

Similar questions

Arrange divs adjacent to each other without any gaps in between

Avoid navigating through hidden tab indexes

Exploring jQuery: Moving between different table cells using traversal techniques

V-chip fails to trigger parent input event

Having issues with AJAX and .change() function not functioning correctly?

Adding labels to a JavaScript chart can be done by using the appropriate methods

Getting rid of the white corners on points using ThreeJS

Express JS causing NodeJS error | "Issue with setting headers: Unable to set headers after they have been sent to the client"

How can I make my webpage unselectable except for specific content within a div using CSS and JavaScript?

What could be causing my component not to render when using useEffect?

Endless time continuum within the scheduling application

Modifying dynamic input fields based on the selected input field type

Populating a MySQL database with data from an array using PHP

creating a fresh window using AJAX in Ext JS

Troubleshooting Python: Dealing with Bugs in Binary Search Tree Objects

Adjust the parent div's background color when a radio button is selected

Utilizing AngularJS for toggling data with ng-click

Issue with integrating petfinder API with a ReactJS application

Which is better for creating forms: ASP.NET or Angular.JS?

Continuously looping in Firefox on Android is the setInterval function