JavaScript点餐记录应用输出异常求助：对象内容无法正常展示

Hey there! Let's work through your restaurant order tracking app issues step by step. You're seeing 0: [object Object] 1: [object Object] instead of the clean order details you want, and there are a couple of underlying bugs causing this. Let's break down the problems and fix them:

1. Critical Object Reference Bugs #

Right now, your code isn't correctly saving food/price data to the right customer object, and you're pushing an array into newMakanUser instead of individual customer objects. Here's what's wrong and how to fix it:

• TempVar is an array that stores your UserCustomer instances, but in addFoodPrice, you're trying to access TempVar.Food—this doesn't exist (arrays don't have a Food property). Instead, you need to target the last customer created in TempVar with TempVar[TempVar.length - 1].
• In doneAdd, you're pushing the entire TempVar array into newMakanUser—this makes newMakanUser an array of arrays, which breaks your display logic. Instead, push the single customer object (the last one in TempVar) and clear TempVar for the next customer.

2. Display Logic for Object Arrays #

When you loop through the customer objects, the Food and Price arrays are being converted to their default string representation (which is just comma-separated values, but not formatted nicely). We'll update the displayArrayObjects function to format these arrays into the clean string you want, like Food: Burger, Fries, Cola.

Modified Working Code #

Here's the full corrected code with comments pointing out key changes:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//This is a New Array
var newMakanUser = [];
var newButton = [];
var placeHolder = [];
var TempVar=[];
var TempUSer= "";

function UserCustomer(nameU){
  this.nameUser = nameU;
  this.Food = [];
  this.Price= [];
  var button = document.createElement("button");
  button.innerHTML = "Remove " +nameU +" from list ";
  var body = document.getElementsByTagName("body")[0];
  body.appendChild(button);
}

function outArray() {
  function displayArrayObjects(arrayObjects,outputName) {
    var len = arrayObjects.length, text = "";
    //Loop through the Array
    for (var i = 0; i < len; i++) {
      var myObject = arrayObjects[i];
      // Start with the customer name
      text += myObject.nameUser + " ";
      // Format Food array nicely
      text += "Food: " + myObject.Food.join(", ") + " ";
      // Format Price array nicely
      text += "Price: " + myObject.Price.join(", ") + "<br/>";
    }
    document.getElementById(outputName).innerHTML = text;
  }
  displayArrayObjects(newMakanUser,"outputArray");
}

// This Function is to create an object and store it inside an array.
function addName(UserName){
  UserName = document.getElementById("NamePax").value;
  TempUSer = UserName ;
  // Push the new customer instance to TempVar
  TempVar.push(new UserCustomer(UserName));
  slides.style.display = "block";
  slidess.style.display = "none";
  slidesss.style.display = "none";
}

function addFoodPrice(Foody,Pricey){
  Foody = document.getElementById("FoodyName").value;
  Pricey = document.getElementById("FoodyPrice").value;
  // Get the LAST customer in TempVar and push food/price to their arrays
  const currentCustomer = TempVar[TempVar.length - 1];
  currentCustomer.Food.push(Foody);
  currentCustomer.Price.push(Pricey);
  // Clear input fields after adding
  document.getElementById("FoodyName").value = "";
  document.getElementById("FoodyPrice").value = "";
}

function doneAdd(){
  // Push the LAST customer (the one we just added food to) to newMakanUser
  newMakanUser.push(TempVar.pop());
  slides.style.display = "none";
  slidess.style.display = "block";
  slidesss.style.display = "block";
}
</script>
</head>
<body>
<h2>Who Order the Food</h2>
<P>
<input type="button" value="Check what you order" id="" onclick="outArray();"/></P>
<p id="outputArray"></p>
<p id="outputDB"></p>
<div id="slidesss" style="display:block">
<P style="color:blue;"><strong>Person Name:</strong><input type="text" style="text-align:center; margin-left:10px;"id="NamePax" name="element" placeholder="Person Name" ></P>
</div>
<div id="slides" style="display:none">
<!-- set display to none -->
<P style="color:blue;"><strong>Food Name :</strong><input type="text" style="text-align:center; margin-left:10px;"id="FoodyName" name="element" placeholder="Food Name" ></P>
<P style="color:blue;"><strong>Food Price :</strong><input type="text" style="text-align:center; margin-left:10px;"id="FoodyPrice" name="element" placeholder="Food Price" ></P>
<P><input type="button" value="Add Food" id="Btn_Close1" onclick="addFoodPrice();"/>
<P><input type="button" value="Done Adding" id="Btn_Close1" onclick="doneAdd();"/>
</div>
<div id="slidess" style="display:block">
<P><input type="button" value="Input Name" id="Btn_Close" onclick="addName();"/></P>
</div>
</body>
</html>

Key Changes Explained #

• Fixed food/price saving: Now addFoodPrice targets the most recent customer in TempVar instead of trying to access a non-existent Food property on the array.
• Cleaned up newMakanUser: doneAdd now pushes a single customer object (not an array) into newMakanUser, using TempVar.pop() to remove the customer from the temp array (so it's ready for the next user).
• Improved display: The displayArrayObjects function now explicitly formats the customer name, food list, and price list using join(", ") to create readable strings, instead of looping through all object properties (which was causing the [object Object] issue).
• Added input clearing: After adding a food item, the input fields are cleared to make it easier to add multiple items.

Now when you add a customer like John, add foods (Burger, Fries, Cola) with their prices, click "Done Adding", then "Check what you order", you'll see output like:

John Food: Burger, Fries, Cola Price: 2.4, 1.5, 1.0

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