in JavaScript Technology |

Looping Through JSON object in JavaScript

In order to get key and value for looping there are some development technologies to be implemented.

In this case we will be making separate section of development technologies and then will try to put their project inside those section.

Read also about Double Arraylist Java

The problem that occurs during the process is that the loop cannot be iterated.

enter image description here

All web technologies can be accessed but the problem is how to run nested loop?

Check the code below:

var projects = {
  ReactJs: {
    project: {
      name: "TRIP SAFE ",
      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: "UNITED LEUVA OF HOUSTON (ULH)",
      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: "ROOM CHECK",
      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: "TRIP SAFE ",
      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: "UNITED LEUVA OF HOUSTON (ULH)",
      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: "ROOM CHECK",
      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

Solution

The problem with the code is that we need to use array instead of object on the project level. An object cannot have the same keys inside. In that case, we have to use array instead.

This is the correct version of the code:

var projects = {
  ReactJs: [
    {
      name: "TRIP SAFE ",
      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: "UNITED LEUVA OF HOUSTON (ULH)",
      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: "ROOM CHECK",
      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: "TRIP SAFE ",
      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: "UNITED LEUVA OF HOUSTON (ULH)",
      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: "ROOM CHECK",
      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);
  }
}

Click here to view original web page at stackoverflow.com

We are a group of people who work in different industries write about them for you. This website explores a wide variety of industries and their operation in different locations.

Published