输入值检查为唯一，然后添加到对象数组- JavaScript

Input value checked as unique and then added to Object Array - JavaScript

本文关键字：对象 数组 JavaScript 添加 然后 检查 唯一 输入      更新时间：2023-09-26

所以我试图设计一个表单，将有3个输入字段(Cust ID, Cust Name和Amount)， ID需要检查，如果它存在于对象数组中，如果这样抛出一个错误，否则它会添加所有3个值到对象数组。

我需要使用一个对象，这样我就不会使用大量的数组，但是我从来没有真正使用过一个基于对象的数组，所以如果有人能够提供一个如何使用它的例子，这将是一个巨大的帮助!

var garrCust = {id:"", name:"", amount:""};

function addCust(){
    var custID = document.getElementById("custid").value;
    var custName = document.getElementById("custname").value;
    var amount = document.getElementById("amount").value;
    if(!custID){
        document.getElementById("output").innerHTML = "ID Cannot be Blank";
        return false;}

    document.getElementById("output").innerHTML += "<br />Added " + custID + "<br /><br />";
    document.getElementById("output").innerHTML += "List contains: " + garrCust.id;
    return true;
}

我将使用ID来命名和数量对象映射，以简化和加速查找:

var garrCust = []; // an array of id -> {id:"", name:"", amount:""}
function addCust(){
    var custID = document.getElementById("custid").value;
    var custName = document.getElementById("custname").value;
    var amount = document.getElementById("amount").value;
    if(!custID){
        document.getElementById("output").innerHTML = "ID Cannot be Blank";
        return false;
    }
    if (!garrCust[custID]) {
        // ID not found in the array
        garrCust[custID] = { id: custID, name : custName, 'amount' : amount};
        document.getElementById("output").innerHTML += "<br />Added " + custID + "<br /><br />";
    } else {
        document.getElementById("output").innerHTML += "List contains: " + garrCust.id;
    }
    return true;
}

注意:将ID存储为object的一部分实际上是可选的，因为它已经作为数组索引与条目相关联

您还可以使用构造函数定义对象内容和id作为属性，以便对它们进行索引，如下所示:

// Create an object with the two properties name and amount
function Customer(name,amount) {
    this.name = name;
    this.amount = amount;
}
// Declare some variables
var id, c;
var customers = {};
// Sample names
var name = [ 'one','two','three','four','five' ];
// Create five sample entries - reusing id for amount
for (id = 0; id < 5; id++) {
    // Using the new keyword with customer creates the object with 
    // the data you pass
    customers[id] = new Customer(name[id],id);
}
// A loop to test for the presence of customer ids
for (c = 0; c < 5; c++) {
    id = Math.floor(Math.random() * 20);
    if (customers.hasOwnProperty(id)) {
        console.log(id+" exists");
    } else {
        console.log(id+" does not exist");
    }
}

这将创建一个具有对象作为属性的对象，属性的名称是客户id。

customers = {44: {name: "John"， amount: 6}，33: {name: "Sally"， amount: 5}};

要显示客户列表，您可以使用以下命令:

var html;
// Use a template literal to build the list item for each customer
function listTemplate(id,name,amount) {
        return `<li><span class="id">${id}</span>
                <span class="name">${name}</span>
                <span class="amount">${amount}</span></li>`;
}
html = "<ul>";
// Iterate through all the customers
for (id in customers) {
        c = customers[id];
        // Concatenate the list items
        html += listTemplate(id,c.name,c.amount);
}
html += "</ul>";
// Add the HTML into the DOM
document.getElementById("customer-list").innerHTML = html;
相关文章：