How to output content of a nested object using map in React?

Question

I have a json that looks like below

const assessmentData = [
    {
        "Sit1": [
            {
                "rule": "Rule1",
                "type": "High"
            }
        ]
    },
    
    {
        "Sit2": [
            {
                "rule": "Rule6",
                "type": "Low"
            }
        ]
    },
    
    {
        "Sit3": [
            {
                "rule": "Rule3",
                "type": "High"
            }
        ]
    }
]

Now I want to render some html that contains the above info. Usually in vanilla HTML, this is what I do

let content = ""

for(let i=0; i < assessmentData.length; i++) {
    for (const [key, value] of Object.entries(assessmentData[i])) {
        content += `${key}
`
        for (const [subkey, subvalue] of Object.entries(value)) {
            const rule = subvalue["rule"]
            content += `
${rule}`
        }
    }   
}

So the final output looks like

Sit1
Rule1
Sit2
Rule1
Sit3
Rule1

But I can't do the same thing using map functionality. So my code in react looks like

const CreateTemplate = (assessmentData) => {

     const content = assessmentData.map((item, idx) => {
        Object.keys(item).map((subitem, subindex) => {
            {subitem}
            Object.keys(item[subitem]).map((subitem2, subindex2) => {
                {item[subitem][subitem2]["rule"]}
            })
            
        })
               
     
      });


     return (
        Content
        {content}
     )
}

export default CreateTemplate

It doesn't output the content part. What am I doing wrong?

user_8690857 · Answer

You should return the values from the map callback. * You can also use Object.entries to map an array of the key-value pairs. Since the value is already an array you don't need to use the keys, A.K.A. the array indices, you can simply map the array values.

const content = assessmentData.map((item, idx) => {
  return Object.entries(item).map(([key, value], subindex) => {
    return (
      
        {key}
        {value.map((subitem2, subindex2) => {
          return {subitem2.rule}
        })}
      
    );
  });
});

* I tried matching all the brackets but hopefully your IDE does a better job than I did in a plain text editor

Or using the implicit arrow function returns:

const content = assessmentData.map((item, idx) =>
  Object.entries(item).map(([key, value], subindex) => (
    
      {key}
      {value.map((subitem2, subindex2) => (
        {subitem2.rule}
      ))}
    
  ))
);

user_6750422 · Answer

Also, as a solution for general question, you can propose a recursive traversal of an object or an array with variant depth, perhaps it will be useful to someone.

window.Fragment = React.Fragment
const assessmentData = [
    {
        "Sit1": [
            {
                "rule": "Rule1",
                "type": "High"
            }
        ]
    },
    {
        "Sit2": [
            {
                "rule": "Rule6",
                "type": "Low"
            }
        ]
    },
    {
        "another example:" : [
           {items: [1, 2]}, {other: [4, 5, 6]}
         ]
    }
]

const getObject = (obj, level) => {
  return Object.entries(obj).map(([key, val], i) => {
    return {getTree(key, level + 1)}{getTree(val, level + 2)}
  })
}

const getArray = (arr, level) => {
  return arr.map((e, i) => {
    return {getTree(e, level + 1)} 
  })
}

const getTree = (data, level=0) => {
  if (data instanceof Array) {
     return getArray(data, level)
  } else if (data instanceof Object) {
     return getObject(data, level) 
  }
  return {data}      
}

const App = () => {
  return (
    
      { getTree(assessmentData) }
    
  );
};

ReactDOM.render(, document.getElementById("root"));

* {
  margin: 0;
  padding: 0;
}

How to output content of a nested object using map in React?

2 Answers