Looping through JSON object in JavaScript

Question

For some development technologies and their projects data, I am trying to get keys and values using for loop.

I am trying to make separate section of development technologies and then trying to put their projects inside that section, but I am not able to iterate, please tell what is wrong with my code.

I am able to access all web technologies but don't know how to run nested loop

var projects = {
  ReactJs: {
    project: {
      name: "Lorem Ipsum",
      industry: "Health",
      technologies: "XD, HTML5, CSS, ReactNative, Redux",
      description: "Tripsafe is an app designed  to address cross-border travel issues both nationally and internationally. With automated uploads from Pathologists, Doctors or any health professional relating to tests, certificates, letters and or official visas, everyone can check, verify and confirm that the document seen is a true immutable digital copy.",
      img: "project/img",
      tech: {
        "techname": "ReactJs",
        "techname": "ReactNative"
      }
    },
    project: {
      name: "Lorem Ipsum",
      industry: "Event management",
      description: "In this app you can apply to be a member of the United Leuva of Houston if accepted you can then receive information about the organization via this application.To get the latest news about United Leuva Houston you it would be via this app.",
      img: "project/img",
      tech: {
        "techname": "XD",
        "techname": "HTML5",
        "techname": "CSS",
        "techname": "ReactNative",
        "techname": "Redux",
      }
    },
    project: {
      name: "Lorem Ipsum",
      industry: "Hospitality",
      description: "This app is intended to be used in the hospitality industry. The app RoomCheck is an in-house product of SJRP Systems. The app streamlines processes for housekeeping and maintenance by making their work and work progress real time.",
      img: "project/img",
      tech: {
        "techname": "ReactNative",
        "techname": "Redux",
      }
    }
  },
  ReactNative: {
    project: {
      name: "Lorem Ipsum",
      industry: "Health",
      technologies: "XD, HTML5, CSS, ReactNative, Redux",
      description: "Tripsafe is an app designed  to address cross-border travel issues both nationally and internationally. With automated uploads from Pathologists, Doctors or any health professional relating to tests, certificates, letters and or official visas, everyone can check, verify and confirm that the document seen is a true immutable digital copy.",
      img: "project/img",
      tech: {
        "techname": "ReactJs",
        "techname": "ReactNative"
      }
    },
    project: {
      name: "Lorem Ipsum",
      industry: "Event management",
      description: "In this app you can apply to be a member of the United Leuva of Houston if accepted you can then receive information about the organization via this application.To get the latest news about United Leuva Houston you it would be via this app.",
      img: "project/img",
      tech: {
        "techname": "XD",
        "techname": "HTML5",
        "techname": "CSS",
        "techname": "ReactNative",
        "techname": "Redux",
      }
    },
    project: {
      name: "Lorem Ipsum",
      industry: "Hospitality",
      description: "This app is intended to be used in the hospitality industry. The app RoomCheck is an in-house product of SJRP Systems. The app streamlines processes for housekeeping and maintenance by making their work and work progress real time.",
      img: "project/img",
      tech: {
        "techname": "ReactNative",
        "techname": "Redux",
      }
    }
  }
}


var data = '';

for ( var key in projects ) { 
  var holderkey = key
  for ( var innerkey in projects[holderkey]) {
    var holderkey_n = innerkey
    console.log(projects[holderkey][holderkey_n])
   }
  data += holderkey_n
}

document.getElementById('main').innerHTML = data;

Answer 1

You should use array instead of object on the project level. An object cannot have the same keys inside. In that case, you have to use array instead.

 var projects = { ReactJs: [ { name: "Lorem Ipsum", industry: "Health", technologies: "XD, HTML5, CSS, ReactNative, Redux", description: "Tripsafe is an app designed to address cross-border travel issues both nationally and internationally. With automated uploads from Pathologists, Doctors or any health professional relating to tests, certificates, letters and or official visas, everyone can check, verify and confirm that the document seen is a true immutable digital copy.", img: "project/img", tech: { techname: "ReactJs", techname: "ReactNative", }, }, { name: "Lorem Ipsum", industry: "Event management", description: "In this app you can apply to be a member of the United Leuva of Houston if accepted you can then receive information about the organization via this application.To get the latest news about United Leuva Houston you it would be via this app.", img: "project/img", tech: { techname: "XD", techname: "HTML5", techname: "CSS", techname: "ReactNative", techname: "Redux", }, }, { name: "Lorem Ipsum", industry: "Hospitality", description: "This app is intended to be used in the hospitality industry. The app RoomCheck is an in-house product of SJRP Systems. The app streamlines processes for housekeeping and maintenance by making their work and work progress real time.", img: "project/img", tech: { techname: "ReactNative", techname: "Redux", }, }, ], ReactNative: [ { name: "Lorem Ipsum", industry: "Health", technologies: "XD, HTML5, CSS, ReactNative, Redux", description: "Tripsafe is an app designed to address cross-border travel issues both nationally and internationally. With automated uploads from Pathologists, Doctors or any health professional relating to tests, certificates, letters and or official visas, everyone can check, verify and confirm that the document seen is a true immutable digital copy.", img: "project/img", tech: { techname: "ReactJs", techname: "ReactNative", }, }, { name: "Lorem Ipsum", industry: "Event management", description: "In this app you can apply to be a member of the United Leuva of Houston if accepted you can then receive information about the organization via this application.To get the latest news about United Leuva Houston you it would be via this app.", img: "project/img", tech: { techname: "XD", techname: "HTML5", techname: "CSS", techname: "ReactNative", techname: "Redux", }, }, { name: "Lorem Ipsum", industry: "Hospitality", description: "This app is intended to be used in the hospitality industry. The app RoomCheck is an in-house product of SJRP Systems. The app streamlines processes for housekeeping and maintenance by making their work and work progress real time.", img: "project/img", tech: { techname: "ReactNative", techname: "Redux", }, }, ], }; var data = ""; for (var tech in projects) { console.log(`----- ${tech} related projects -----`) for (var project of projects[tech]) { console.log(project); } }