映射多个嵌套数组javascript

Question

我正在尝试映射多个数组并在文档上显示每个数组的内容。这些数组嵌套在主数组 (webArray) 内嵌套的对象中。

我能够使用嵌套的 for 循环显示 Test1 和 Test2 的适当内容。我想映射这个。当我使用 .map() 时，数组的两个内容都列在 Test1 和 Test2 下。这不是我想要的行为。我知道发生这种情况是因为我没有在 webArray.map 中指定索引。我不确定如何做到这一点，现在已经尝试了很多方法。

class Website {
    constructor(name, clientSide = []) {
        this.name = name;
        this.clientSide = clientSide;
    }
}

let test1 = new Website(
    //clientSide property
    ["Pug", "SCSS", "Javascript + Jquery + Ajax"]
);

let test2 = new Website( 
     //clientSide property
     ["HTML", "SCSS", "Javascript"]
);

const webArray = [
    test1,
    test2
];

function show() {
    const output = document.getElementById("output");
    let text = [];
    for ( let i = 0; i < webArray.length; i++) {
        let site = webArray[i];

        //**THIS NESTED LOOP WORKS BUT I WANT TO USE MAP INSTEAD **/
        // let listItem = [];
        // for ( let j = 0; j < site.clientSide.length; j++) {
        //     let li = site.clientSide[j];
        //     listItem.push(`<li>${li}</li>`);
        // }


        //THIS IS MY PROBLEM
        let listItems = webArray.map(function(item) {
            return `<li>${item.clientSide}</li>`; 
        });


        text.push(
            `<h1 class="test">${site.name}</h1>
                <ul>${listItems}</ul>`
        ); 

    }
    output.innerHTML = text;
}

show();

我想要什么

测试1
哈巴狗，SCSS，Javascript + Jquery + Ajax

测试2
HTML、SCSS、Javascript

我得到了什么

测试1
哈巴狗，SCSS，Javascript + Jquery + Ajax
HTML、SCSS、Javascript

测试2
哈巴狗，SCSS，Javascript + Jquery + Ajax
HTML、SCSS、Javascript

Answer 1

如果我理解正确，你应该尝试这样的事情：

class Website {
  constructor (name, clientSide = []) {
    this.name = name
    this.clientSide = clientSide
  }
}

const test1 = new Website(
  'test 1',
  ['Pug', 'SCSS', 'Javascript + Jquery + Ajax']
)

const test2 = new Website(
  'test 2',
  ['HTML', 'SCSS', 'Javascript']
)

const webArray = [
  test1,
  test2
]

function show () {
  const output = document.getElementById('output')
  const text = webArray.map(({ name, clientSide }) => `<h1 class="test">${name}</h1><ul>${clientSide.map(item => `<li>${item}</li>`)}</ul>`)
  output.innerHTML = text
}

show()

<div id="output">
<div>

您创建了 2 个没有名称的网站，但网站构造函数需要它，但主要问题是您只创建了一个

text

数组，然后将这两个内容推送到同一个数组上。

希望有帮助。