0

I am trying to display a list of fields that have been changed upon saving. To do this, I need to map through a very complex object consisting of both objects and arrays. The issue is in this part of the object right now: 

suppressionRules: {
     additional_offer_ids: [2568]
     duration: {type: "days", amount: 7}
     suppression_type: "accepted"
  proto__: Object
}

For some reason, it's coming up as this when I display it: 

suppressionRules: [object Object]

This is the function I'm using to display the changed fields in the object: 

    function NumberList() {
      if (initialValues !== formValues) {
        const listItems = Object.keys(getChangedValues).map(item => {
          console.log(item + ' ' + getChangedValues[item]);
          return <li>{`${item}: ${getChangedValues[item]}`}</li>;
        });

        return <ul>{listItems}</ul>;
      }
      return null;
    }

I need help on how to make it so that the suppressionRules actually shows the fields inside of it.

Jay
  • 2,826
  • 2
  • 13
  • 28
Alyssa
  • 143
  • 3
  • 15
  • Possible duplicate of [How to get the key value from nested object](https://stackoverflow.com/questions/38083288/how-to-get-the-key-value-from-nested-object) – Jay Nov 19 '19 at 05:54
  • You are converting nested objects to string. One way is to do that conversion with `JSON.stringify`. `${JSON.stringify(getChangedValues[item])}`. That at least will avoid `[object Object]` in your output. Possibly you want a nested iteration though. – trincot Nov 19 '19 at 05:55
  • @trincot how would i go about a nested iteration? – Alyssa Nov 19 '19 at 06:00
  • Take the object and iterate it, just like you already iterate the outer object. If the nesting can be deeper still, then consider recursion. There are lots of Q&A on this site on how to iterate nested objects. – trincot Nov 19 '19 at 06:02

0 Answers0