Access a specific object from an array of objects

I have a variable which returns an object. This object has multiple properties, the first property is an array of more objects. I want to access this one by one using javascript and render it using html css and js.

This is my object variable (myObj).

const myJson = item.message;
const myObj = JSON.parse(myJson);
console.log(myObj);

In the first image you can see the returned object that has 2 properties.

In the second image I have expanded the first property which itself is an array of objects.

First image
Second image

1. I want to access these objects one by one and print them in tables using HTML, CSS and JS
2. I want to access object property based on each property index rather than its property name
   eg: all the object keys will be table headers and all its values will be in data cells.
   I know if I want to do this without using property name eg: obj.id I have to use for loops, but I can’t seem to get this correctly. Would appreciate any help.

>Solution :

this is what i understood from the question.

const data = {courseconfig:[{title:'title1', id:'id1'}]};

for(let i = 0; i < data.courseconfig.length; i++){
  
  const objectKeys = Object.keys(data.courseconfig[i]);
  
  for(let j = 0; j < objectKeys.length; j++)
    console.log(data.courseconfig[i][objectKeys[j]]);

}

EDIT 1: to access a property of an object which has a name you can use ‘.name’, or [‘name’].