Possible to iterate through a JSON object and return values of each property?

Possible to iterate through a JSON object and return values of each property?
0.0 0

#1

Hey all,

I’m trying to add a shopping list to my Recipe box project as an extra personalization, and when researching on how to do this, one camper recommended that in order for me to render my Shopping list in a different target, I make a stateful component, and update the state as I add new stuff to my shopping list.

I thought I would give this a try, but I’m not totally sure how to access the data in the state the way that I want to.

For example if I had a state that looked like this:

this.state = {
   "Pizza" : ["Cheese", "Bread", "Sauce"]
}

How would I go about getting the value for both “Pizza” and the ingredients? Keep in mind that the property name could be anything, so I’m trying to read every property name, and then read everything that’s inside each property. Please help if you can thank you.


#2

say:

var somedata = {
   "Pizza" : ["Cheese", "Bread", "Sauce"]
}

// to get all keys of this somedata object, returned as an array
Object.keys(somedata)      // returns ["Pizza"] 

// to get all values of this object
Object.values(somedata)     // returns array ["Cheese", "Bread", "Sauce"]

// you can now iterate to the array
Object.values(somedata)[0][0]   // returns "Cheese"

Object.values(somedata)[0][1]   // returns "Bread"

Object.values(somedata)[0][2]   // returns "Sauce"

Is this what you’re looking for?

update: Additional Example:

var somedata = {
   "Pizza" : ["Cheese", "Bread", "Sauce"],
   "Spaghetti" : ["Pasta", "Sauce", "Meatballs"]
}

Object.keys(somedata)       // returns  ["Pizza", "Spaghetti"]
Object.keys(somedata)[0]   // returns  "Pizza"
Object.keys(somedata)[1]   // returns "Spaghetti"

somedata["Pizza"]    // returns ["Cheese", "Bread", "Sauce"]
somedata["Spaghetti"]   // returns  ["Pasta", "Sauce", "Meatballs"]

//---------------
Object.values(somedata)        // returns  [Array(3), Array(3)]
Object.values(somedata)[0]    // returns ["Cheese", "Bread", "Sauce"]
Object.values(somedata)[1]    // returns ["Pasta", "Sauce", "Meatballs"]

#3

@owel
Thanks for the help,
before I put myself through pain, do you think this is the easiest way to do what I’m trying to accomplish, or do you think there’s a more simple way?


#4

try this. not sure if it is what you want exactly for your task, but it’s kind of universal extractor for JSON.
it outputs to console. you may want to ignore indent

const json = {
  first: 'abc',
  second: ['a', 'b', 'c'],
  third: {
    first: 'a',
    second: 'b',
    third: ['a', 'b', 'c'],
    fourth: {
      first: 'a',
      second: 'b'
    }
  }
};

function extractJSON(obj, indent) {
  for (const i in obj) {
    if (Array.isArray(obj[i]) || typeof obj[i] === 'object') {
      console.log(indent + i + ' is array or object');
      extractJSON(obj[i], indent + ' > ' + i + ' > ');
    } else {
      console.log(indent + i + ': ' + obj[i]);
    }
  }
}

extractJSON(json, '');

see it in action http://jsbin.com/laxerexife/edit?js,console