JavaScript数组数据展示问题求助

Hey there! Let's fix up your code step by step to meet all three of your requirements:

1. Only Show Values (Not Key Names) #

Right now your code prints both property names (like "Name:") and their values. We'll remove the key name references so only the content after the colon shows up.

2. Display Only Specified Fields #

Instead of looping through every property in each object, we'll define a list of the exact fields you want to show (e.g., name, price, time). This way you won't get extra data you don't need.

3. Replace Buttons with Links #

We'll swap out the <button> elements for <a> tags. We'll use href="javascript:void(0)" to avoid unwanted page jumps, while keeping the onclick handler to trigger the page2 function just like before.

Modified Full Code #

JavaScript

let data = [{ "name": "Sax & Fön", "adress": "Rådmansgatan 46", "zip": "113 57 Stockholm", "time": "12", "tel": "08-522 389 20", "site": "www.salongweb.se", "rating": "(32)", "price": "320 kr", "timeEst": "30 min", "open": "Öppet till 19.00 idag", "desc": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris" }, { "name": "Hårizont", "adress": "Rådmansgatan 46", "zip": "113 57 Stockholm", "time": "12", "tel": "08-522 389 20", "site": "www.salongweb.se", "rating": "(32)", "price": "320 kr", "timeEst": "30 min", "open": "Öppet till 19.00 idag", "desc": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris" } ];

// Define the specific fields you want to display (add/remove as needed)
const displayFields = ['name', 'price', 'time'];

let page2 = (hairdresser) => { 
  let singleView = "<div>"; 
  // Only loop through our target fields
  displayFields.forEach(field => {
    singleView += `<p>${hairdresser[field]}</p>`; // Just the value, no key name
  });
  singleView += "</div>" 
  document.body.innerHTML = singleView; 
}

let handleData = (hairdressers) => { 
  let out = "<table>"; 
  hairdressers.forEach((hairdresser, index) => { 
    out += "<tr>"; 
    // Iterate only over our allowed fields
    displayFields.forEach(field => {
      let isName = field === "name"; 
      // Replace button with link element
      out += `<td> ${isName ? `<a href="javascript:void(0)" onclick='page2(${JSON.stringify(hairdresser)})'>` : ""} ${hairdresser[field]} ${isName ? '</a>' : ""} </td>`; 
    });
    out += "</tr>"; 
  }) 
  out += "</table>"; 
  document.body.innerHTML = out; 
}

handleData(data);

HTML

<html> 
  <body> 
  </body> 
</html>

Key Changes Breakdown: #

• Controlled Field Display: The displayFields array lets you easily adjust which data points show up—just add or remove field names here.
• Value-Only Output: We removed all references to property names in both the table and single-view outputs, so only the content you care about is visible.
• Link Replacement: Buttons are now anchor tags that behave like links but still trigger the detail view function when clicked.

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