javascript - 显示用户数据数组

Question

我是 Javascript 新手，一直被困在一个问题上。我已经构建了一个与 API 配合使用的随机卡片生成器。生成器考虑到用户的困境，随机抽取一张解决方案卡并保存配对。但是，我无法在下面的数据框中显示配对。这是相关代码和生成器的图片以供参考。

let dataStore = []

let dilemma = "";
    strategy = "";

function saveData() {
    newPair = {dilemma: userText.value, strategy: cardText.innerText};
    dataStore.push( newPair )
    displayData();
}

function doSmtElse( element ) {
 
    console.log( "element is here : " , element , element.dilemma , element.strategy)
 

    for (let i = 0; i < dataStore.length; i++) {
        if (i === 0) {break;}
        const element = dataStore[i];
        doSmtElse(element )
    }
}

function displayData() {
 
    console.log( "dataStore is here : " , dataStore)
 

    for (let index = 0; index < dataStore.length; index++) {
        const element = dataStore[index];
        doSmtElse(element )
    }
}

生成器+console.log的图片

标签： javascriptarrays

Answer 1

对于票务系统，您应该使用一个类来保存数据并添加/删除它。

displayData 展示了如何从数组数据创建元素并将它们添加到 DOM。

你的问题没有html的例子，所以我自己做了。

// making a ticket system class to handle stuff related to tickets.
class TicketSystem {
  // constructor function is ran when the class is called.
  constructor() {
    this.tickets = [];
  }

  // made class method to add a new ticket object to tickets array.
  add({ problem, solution }){
    this.tickets.push({
      problem,
      solution
    });
  }
}

// making a new ticket system
const ticket = new TicketSystem();

// adding a click event to the add button, so when you click it it adds the ticket to the ticket system and re-renders the DOM.
document.querySelector("button").addEventListener("click", () => saveData());

function saveData() {
  // using add method to add new ticker.
  ticket.add({
    // selecting the value of the element with id of problem;
    problem: document.querySelector("#problem").value,
    // selecting the value of the element with id of solution;
    solution: document.querySelector("#solution").value,
  })
  // rerendering the ticket list in the DOM
  displayData();
}

// loops through the tickets and adds them to dom.
function displayData() {
  // selecting element with id of tickets
  const parent = document.querySelector("#tickets");
  // clearing it so it has noting inside.
  // do this so we don't have duplicate data.
  parent.innerHTML = "";
  
  // looping through each ticket in the ticket system.
  ticket.tickets.forEach(t => {
    // making a new div element.
    const elm = document.createElement("div");
    // giving it a class of ticket
    elm.classList.add("ticket");
    
    // making a new div element.
    const prob = document.createElement("div");
    // giving it a class of problem
    prob.classList.add("problem");
    //setting it's text value to the current tickets problem;
    prob.textContent = t.problem;
    
    // making a new div element.
    const solu = document.createElement("div");
    // giving it a class of solution
    solu.classList.add("solution");
    //setting it's text value to the current tickets solution;
    solu.textContent = t.solution;
    
    // adding the problem and solution div to the ticket div.
    elm.appendChild(prob);
    elm.appendChild(solu);
    
    // adding the ticket div to the tickets div.
    parent.appendChild(elm);
  });
}

saveData();

.ticket {
  text-align: center;
}

.problem {
  background-color: red;
  color: white;
  padding: 10px;
}

.solution {
  background-color: green;
  color: white;
  padding: 10px;
}

<input id="problem" type="text" value="No Food"></input>
<input id="solution" type="text" value="Go to supermarket"></input>
<button>ADD</button>
<div id="tickets"></div>