JSON Serializer data need to show on frontend into two separated text boxes. Thanks in Advance

JavaScript
1
Edit Student
×
Student Name
Phone Number
Present Address
Permanent Address
Close Save changes
function editStudent(studentId) { debugger; // Set the value of the hidden input field to the current studentId document.getElementById('editStudentId').value = studentId; 
// Fetch student details for the given studentId using API call
// Display student details in the Edit Student modal

// Assuming you have a function to fetch student details and populate the modal fields
fetchStudentDetails(studentId);

// Show the Edit Student modal
$('#editStudentModal').modal('show');

}
function fetchStudentDetails(studentId) {
debugger;
// Make a GET request to the backend API to fetch student details
//fetch(/api/students/GetStudentById/${studentId})
fetch(/api/students/GetStudent/${studentId})
.then(response => {
if (!response.ok) {
throw new Error(‘Failed to fetch student details’);
}
return response.json();
})
.then(student => {
debugger;
console.log(‘Student Object:’, student);

  // Ensure the DOM is loaded before accessing elements
  document.addEventListener('DOMContentLoaded', () => {
    const editPresentAddress = document.getElementById('editPresentAddress');
    const editPermanentAddress = document.getElementById('editPermanentAddress');

    if (editPresentAddress && editPermanentAddress) {
      // Parse the address string into a JavaScript object
      let addressObject = null;
      if (student.address && typeof student.address === 'string') {
        try {
          addressObject = JSON.parse(student.address);
        } catch (error) {
          console.error('Error parsing address:', error);
        }
      }

      // Populate the textboxes
      document.getElementById('editStudentName').value = student.studentName;
      document.getElementById('editPhoneNumber').value = student.phoneNumber;
      editPresentAddress.value = addressObject?.presentAddress || '';
      editPermanentAddress.value = addressObject?.permanentAddress || '';
    } else {
      console.error('HTML elements not found');
    }
  });
})
.catch(error => {
  console.error('Error fetching student details:', error);
});

}

2

hello and welcome to fcc forum :slight_smile:

  • what is it exactly that you want to do and how are you trying to do solve this issue, as in what have you tried?

happy coding :slight_smile:

3

To show JSON serialized data in two separate text boxes on the frontend, you can follow these steps. This approach ensures that the data is properly retrieved, parsed, and displayed to users in an intuitive manner.

Solution Overview

  1. Fetch Student Data: Retrieve the student’s details using an API call.
  2. Parse the Data: Parse the JSON serialized address field.
  3. Populate the Text Boxes: Fill the text boxes with the relevant address information.

Step-by-Step Code Explanation

Here’s a simplified version of your JavaScript code that performs these actions:
function editStudent(studentId) {
// Set the value of the hidden input field to the current studentId
document.getElementById(‘editStudentId’).value = studentId;

// Fetch student details for the given studentId using API call
fetchStudentDetails(studentId);

// Show the Edit Student modal
$(‘#editStudentModal’).modal(‘show’);
}

function fetchStudentDetails(studentId) {
// Make a GET request to the backend API to fetch student details
fetch(/api/students/GetStudent/${studentId})
.then(response => {
if (!response.ok) {
throw new Error(‘Failed to fetch student details’);
}
return response.json();
})
.then(student => {
console.log(‘Student Object:’, student);

  // Populate the textboxes with student data
  populateTextBoxes(student);
})
.catch(error => {
  console.error('Error fetching student details:', error);
});

}

function populateTextBoxes(student) {
// Ensure the DOM is loaded before accessing elements
document.addEventListener(‘DOMContentLoaded’, () => {
const editPresentAddress = document.getElementById(‘editPresentAddress’);
const editPermanentAddress = document.getElementById(‘editPermanentAddress’);

if (editPresentAddress && editPermanentAddress) {
  // Parse the address string into a JavaScript object
  let addressObject = null;
  if (student.address && typeof student.address === 'string') {
    try {
      addressObject = JSON.parse(student.address);
    } catch (error) {
      console.error('Error parsing address:', error);
    }
  }

  // Populate the textboxes with address data
  document.getElementById('editStudentName').value = student.studentName;
  document.getElementById('editPhoneNumber').value = student.phoneNumber;
  editPresentAddress.value = addressObject?.presentAddress || '';
  editPermanentAddress.value = addressObject?.permanentAddress || '';
} else {
  console.error('HTML elements not found');
}

});
}

How It Works

  1. editStudent(studentId): This function initializes the student edit process by setting the student ID and calling fetchStudentDetails to get the student’s data.
  2. fetchStudentDetails(studentId): It makes an API call to retrieve the student’s details. On successful retrieval, it calls populateTextBoxes to update the UI.
  3. populateTextBoxes(student): This function ensures the DOM is ready, parses the JSON serialized address, and then populates the text boxes with the student’s data.

At Impressico Business Solutions, we provide expertise in developing intuitive user interfaces and integrating complex backend systems with frontend components. If you need assistance with implementing such solutions or optimizing your application, feel free to reach out to us. We specialize in delivering user-friendly and efficient software solutions tailored to your needs.