循環通過 JavaScript 中的 JSON object

Question

對於某些開發技術及其項目數據，我正在嘗試使用for循環獲取鍵和值。

我正在嘗試制作單獨的開發技術部分，然后嘗試將他們的項目放在該部分中，但我無法迭代，請告訴我的代碼有什么問題。

我能夠訪問所有web 技術，但不知道如何運行嵌套循環

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

您應該在項目級別使用array而不是object 。 object 內部不能有相同的鍵。 在這種情況下，您必須改用array 。

 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); } }