React+Firebase项目中按hours属性排序对象问题求助

Hey there! Let's figure out how to sort those objects by their hours property in your React project. I'll break this down step by step based on what I understand from your question.

First, let's clarify the problem #

You have parent objects (like object1, object2) each containing sub-objects (e.g., subobject1, subobject2), and each sub-object has a hours string property. You want to sort these sub-objects by hours while keeping the overall structure intact, then display them in React.

Solution 1: Sort sub-objects inside each parent object #

If you want each parent object's sub-objects to be sorted individually (keeping the parent structure), here's how to do it:

First, create a helper function to sort the sub-objects of a single parent:

const sortSubobjectsByHours = (parentObj) => {
  // Convert the parent's sub-objects into an array of [key, value] pairs
  const subobjectEntries = Object.entries(parentObj);
  
  // Sort by converting the hours string to a number (critical for correct numeric sorting!)
  const sortedEntries = subobjectEntries.sort(([, subobjA], [, subobjB]) => {
    return parseInt(subobjA.hours, 10) - parseInt(subobjB.hours, 10);
  });
  
  // Convert the sorted array back into an object
  return Object.fromEntries(sortedEntries);
};

Then apply this function to all your parent objects:

// Your original data structure
const originalData = {
  object1: {
    subobject1: { hours: "06", details: "lorem ipsum" },
    subobject2: { hours: "04", details: "lorem ipsum" }
  },
  object2: {
    subobject1: { hours: "05", details: "lorem ipsum" },
    subobject2: { hours: "01", details: "lorem ipsum" }
  }
};

// Process each parent object to sort its sub-objects
const sortedData = Object.fromEntries(
  Object.entries(originalData).map(([parentKey, parentObj]) => [
    parentKey,
    sortSubobjectsByHours(parentObj)
  ])
);

Solution 2: Sort all sub-objects across all parents #

If you want to collect all sub-objects from every parent and sort them together (ignoring the original parent structure), use this instead:

// Extract all sub-objects into a single array
const allSubobjects = [];
Object.values(originalData).forEach(parentObj => {
  Object.values(parentObj).forEach(subobj => {
    allSubobjects.push(subobj);
  });
});

// Sort the combined array
const sortedAllSubobjects = allSubobjects.sort((a, b) => {
  return parseInt(a.hours, 10) - parseInt(b.hours, 10);
});

Displaying in React #

For the first scenario (sorted per parent), render the data like this in your component:

function SortedObjects() {
  // Assume sortedData is available here (could be in state or props)
  return (
    <div className="object-container">
      {Object.entries(sortedData).map(([parentKey, sortedSubobjects]) => (
        <div key={parentKey} className="parent-object">
          <h2>{parentKey}</h2>
          {Object.entries(sortedSubobjects).map(([subKey, subobj]) => (
            <div key={subKey} className="sub-object">
              <p><strong>Hours:</strong> {subobj.hours}</p>
              <p>{subobj.details}</p>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

Important note #

Don't forget to convert hours from a string to a number when sorting! If you compare the strings directly, you'll get weird results (like "10" coming before "02" because string comparison checks character codes, not numeric value).

内容的提问来源于stack exchange，提问作者Cohchi