How to access child key-values on objects and clonate that object

Question

I'm tryin to make a list from an object on React. Before I continue, I'll share my code:

const genres = {
  Rock: {
    album1: '',
    album2: '',
  },
  Jazz: {
    album1: '',
    album2: '',
  },
  Pop: {
    album1: '',
    album2: '',
  }
};


let myFunc = genress => {
  let newObject = {};
  Object.keys(genress).map(gen => {
    newObject[gen] = 'a';
    let newChild = newObject[gen];
    let oldChild = genress[gen];
    
    Object.keys(oldChild).map(gen2 => {
      newChild[gen2] = 'b';
      let newGrandChild = newChild[gen2];
      console.log(newGrandChild);
    })
    
  });
  return newObject;
}

myFunc(genres);

I wanna render that object on a list.

<ul>
  <li>Rock
    <ul>
      <li>album1</li>
      <li>album2</li>
    </ul>
  </li>
</ul>
...And so on

Before placing it on React I'm trying it on a normal function. I'm making a new object just to make sure I'm accesing the right values. The problem is, when I return the new object at the end of the function it returns the genres but not the albums, only the 'a' I set in the first Object.key. The console.log on the second Object.key logs undefined, and can't figure out why this is happening.

My idea is to have access to every level on the object so I can set them to variables and return them on the render's Component. I'll make more levels: Genres -> Bands -> Albums -> songs.

Thanks so much in advance :)

Answer 1

From what I can understand is that you are iterating over the object incorrectly.

The reason why 'a' is the only thing showing up is that you are hard coding that every time you run the loop and setting that current key that that value.

So essentially your code does not work because you set the value of the current key to be 'a' which is a string so there are no keys on 'a' so the second loop does not produce anything.

 newObject[gen] = 'a'; // you are setting obj[Rock]='a'
let newChild = newObject[gen]; // this is just 'a'
let oldChild = genress[gen]; // this is just 'a'
Object.keys(newObject[gen]) // undefined

What I think you are trying to do is iterate over the object and then render the contents of that object in a list.

Let me know if the below answers your question.

You can see the code working here: https://codesandbox.io/s/elastic-dhawan-01sdc?fontsize=14&hidenavigation=1&theme=dark

Here is the code sample.

 import React from "react"; import "./styles.css"; const genres = { Rock: { album1: "Hello", album2: "Rock 2" }, Jazz: { album1: "", album2: "" }, Pop: { album1: "", album2: "" } }; const createListFromObject = (key) => { return ( <div> <h1>{key}</h1> <ul> {Object.entries(genres[key]).map(([k, v], idx) => ( <li key={`${key}-${k}-${v}-${idx}`}>{`Key: ${k} Value ${v}`}</li> ))} </ul> </div> ); }; export default function App() { return ( <div className="App">{Object.keys(genres).map(createListFromObject)}</div> ); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>