Question

我需要帮助我的代码。对不起，长长的清单。我是学生，也是JS的新人:)

结果显示名称：地址：时间：等。

我只想在＆＃34;＆＃34;：

如果我只想显示数组的部分（价格，时间等）。我该怎么办？
我希望按钮成为链接。

＆＃13;

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"

    }
];


let page2 = (hairdresser) => {
    let singleView = "<div>";
    for (prop in hairdresser) {
        if (hairdresser.hasOwnProperty(prop)) {
            singleView += `<p>${prop} : ${hairdresser[prop]}</p>`;
        }
    }
    singleView += "</div>"
    document.body.innerHTML = singleView;
}

let handleData = (hairdressers) => {
    let out = "<table>";
    hairdressers.forEach((hairdresser, index) => {
        out += "<tr>";
        for (let prop in hairdresser) {
            if (hairdresser.hasOwnProperty(prop)) {
                let isName = prop === "name";
                out += `<td>
        ${isName ? `<button onclick='page2(${JSON.stringify(hairdresser)})'}>` : ""}  
          ${prop}${hairdresser[prop]}
        ${isName ? '</button>' : ""}
        </td>`;
            }
        }
        out += "</tr>";
    })
    out += "</table>";

    document.body.innerHTML = out;

}

handleData(data);

＆＃13;

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

＆＃13;

Answer 1

我不确定我是否理解正确，但您可以使用您创建的结构调用该特定部分：

例如：

data[0].price

会给你＆＃39; 320kr＆＃39;这是第一组数据中的值

Answer 2

1。结果显示名称：地址：时间：等。

我通过删除handleData函数中的$ {prop}来修复它（这使得它打印了prop的名称）。

2。如果我只想显示数组的部分（价格，时间等）。我如何能办？

不是循环遍历对象的所有属性，就像使用for ... in循环一样，您可以声明要打印的属性数组并循环遍历它以仅打印这些属性：

const printableProps = ["name", "price", "adress"];
printableProps.forEach(prop => {
    if (hairdresser.hasOwnProperty(prop)) {
        singleView += `<p>${prop} : ${hairdresser[prop]}</p>`;
    }
});

3。我希望按钮成为一个链接。

您可以在<button>处替换<a>代码：

${isName ? `<a href="#" onclick='page2(${JSON.stringify(hairdresser)})'}>` : ""}  
          ${prop}${hairdresser[prop]}
        ${isName ? '</a>' : ""}

＆＃13;

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"
    }
];

let page2 = (hairdresser) => {
    let singleView = "<div>";

    for (prop in hairdresser) {
        if (hairdresser.hasOwnProperty(prop)) {
            singleView += `<p>${prop} : ${hairdresser[prop]}</p>`;
        }
    }

    singleView += "</div>"
    document.body.innerHTML = singleView;
}

let handleData = (hairdressers) => {
    let out = "<table>";
    hairdressers.forEach((hairdresser, index) => {
        out += "<tr>";

        const printableProps = ["name", "price", "adress"];
        printableProps.forEach(prop => {
            if (hairdresser.hasOwnProperty(prop)) {
                let isName = prop === "name";
                out += `<td>
        ${isName ? `<a href="#" onclick='page2(${JSON.stringify(hairdresser)})'}>` : ""}  
          ${hairdresser[prop]}
        ${isName ? '</a>' : ""}
        </td>`;
            }
        });
        out += "</tr>";
    })
    out += "</table>";

    document.body.innerHTML = out;
}

handleData(data);

＆＃13;

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

＆＃13;

显示数组Javascript的结果

2 个答案: