how to add a new table?

[wyknmjj]

I added a new table in initDB and increased the version number by 1. The table was successfully created, but I couldn't add any data to it, and reported a

{
    "message": "Failed to execute 'add' on 'IDBObjectStore': Evaluating the object store's key path yielded a value that is not a valid key.",
    "type": "DataError"
}

error.

Or I changed the table I added in initDB to alter, the table can be successfully created, but the generated table structure is different from the initialized structure.

The code in alter mode is like this

{
    name: tableChatName,
    columns: {
    },
    alter: {
      2: {
        drop: {
        },
        modify: {
          id: {
            primaryKey: true,
            autoIncrement: true
          },
          content: {
            notNull: true,
            dataType: DATA_TYPE.String
          },
          createTime: {
            notNull: true,
            dataType: DATA_TYPE.DateTime
          }
        },
        add: {
        }
      }
    }
  }

[ujjwalguptaofficial]

The alter won't do anything with new table - alter is for existing table. You can just add the new table into the database schema with newer version of db.

It will check if there is new table and then add that table into newer version.

[ujjwalguptaofficial]

checkout this code -

JsStore/test/cases/db_upgrade.js

Line 571 in 4a21f57

var DbUpgradeTestV6 = {

You can see in the code in v5 there was one table, but in v6 there are two tables. I hope that make sense.

[wyknmjj]

Yes, I am able to create the table, it's just that I cannot insert data for this new table.

I will reproduce it in the official demo first, and then reply to you.

[ujjwalguptaofficial]

yeah give me something reproducible and i will help you.

[wyknmjj]

I downloaded the official examplehttps://github.com/ujjwalguptaofficial/jsstore-examples/tree/master/simple_example and I tested that it is possible to add data to the new table (copy a student2 table from the student table, And increase the version to 2, the place where the student table is used will be replaced by student2 globally), but the data in the student table is deleted. I realized that the version of jsstore is too old, so I copied the latest jsstore file from the npm package Come in (version 4.5.2), re-test the above steps, the newly created student2 table cannot insert new data,Just report an error:

{
    "message": "Failed to execute 'add' on 'IDBObjectStore': Evaluating the object store's key path yielded a value that is not a valid key.",
    "type": "DataError"
}

var jsstoreCon = new JsStore.Connection(new Worker("scripts/jsstore.worker.js"));

window.onload = function () {
    refreshTableData();
    registerEvents();
    initDb();
};

async function initDb() {
    var isDbCreated = await jsstoreCon.initDb(getDbSchema());
    if (isDbCreated) {
        console.log('db created');
    }
    else {
        console.log('db opened');
    }
}

function getDbSchema() {

    var db = {
        name: 'My-Db',
        version: 2,
        tables: []
    }
    db.tables.push({
        name: 'Student',
        columns: {
            id: {
                primaryKey: true,
                autoIncrement: true
            },
            name: {
                notNull: true,
                dataType: 'string'
            },
            gender: {
                dataType: 'string',
                default: 'male'
            },
            country: {
                notNull: true,
                dataType: 'string'
            },
            city: {
                dataType: 'string',
                notNull: true
            },
            createTime: {
                notNull: true,
                dataType: "date_time"
            }
        }
    })
    db.tables.push({
        name: 'Student2',
        columns: {
            id: {
                primaryKey: true,
                autoIncrement: true
            },
            name: {
                notNull: true,
                dataType: 'string'
            },
            gender: {
                dataType: 'string',
                default: 'male'
            },
            country: {
                notNull: true,
                dataType: 'string'
            },
            city: {
                dataType: 'string',
                notNull: true
            },
            createTime: {
                notNull: true,
                dataType: "date_time"
            }
        }
    })
    return db;
}


var globalTableName = "Student2"
function registerEvents() {
    $('#btnAddStudent').click(function () {
        showFormAndHideGrid();
    })
    $('#tblGrid tbody').on('click', '.edit', function () {
        var row = $(this).parents().eq(1);
        var child = row.children();
        var student = {
            id: row.attr('itemid'),
            name: child.eq(0).text(),
            gender: child.eq(1).text(),
            country: child.eq(2).text(),
            city: child.eq(3).text()
        }
        refreshFormData(student);
        showFormAndHideGrid();
    });
    $('#tblGrid tbody').on('click', '.delete', function () {
        var result = confirm('Are you sure, you want to delete?');
        if (result) {
            var studentId = $(this).parents().eq(1).attr('itemid');
            deleteStudent(Number(studentId));
        }
    });
    $('#btnSubmit').click(function () {
        var studentId = $('form').attr('data-student-id');
        if (studentId) {
            updateStudent();
        }
        else {
            addStudent();
        }
    });
}


//This function refreshes the table
async function refreshTableData() {
    try {
        var htmlString = "";
        var students = await jsstoreCon.select({
            from: globalTableName
        });
        students.forEach(function (student) {
            htmlString += "<tr ItemId=" + student.id + "><td>" +
                student.name + "</td><td>" +
                student.gender + "</td><td>" +
                student.country + "</td><td>" +
                student.city + "</td><td>" +
                "<a href='#' class='edit'>Edit</a></td>" +
                "<td><a href='#' class='delete''>Delete</a></td>";
        })
        $('#tblGrid tbody').html(htmlString);
    } catch (ex) {
        alert(ex.message)
    }
}



async function addStudent() {
    var student = getStudentFromForm();
    try {
        var noOfDataInserted = await jsstoreCon.insert({
            into: globalTableName,
            values: [student]
        });
        if (noOfDataInserted === 1) {
            refreshTableData();
            showGridAndHideForm();
        }
    } catch (ex) {
        alert(ex.message);
    }

}

async function updateStudent() {
    var student = getStudentFromForm();
    try {
        var noOfDataUpdated = await jsstoreCon.update({
            in: globalTableName,
            set: {
                name: student.name,
                gender: student.gender,
                country: student.country,
                city: student.city
            },
            where: {
                id: student.id
            }
        });
        console.log(`data updated ${noOfDataUpdated}`);
        showGridAndHideForm();
        $('form').attr('data-student-id', null);
        refreshTableData();
        refreshFormData({});
    } catch (ex) {
        alert(ex.message);
    }
}

async function deleteStudent(id) {
    try {
        var noOfStudentRemoved = await jsstoreCon.remove({
            from: globalTableName,
            where: {
                id: id
            }
        });
        console.log(`${noOfStudentRemoved} students removed`);
        refreshTableData();
    } catch (ex) {
        alert(ex.message);
    }
}

function getStudentFromForm() {
    var student = {
        id: Number($('form').attr('data-student-id')),
        name: $('#txtName').val(),
        gender: $("input[name='gender']:checked").val(),
        country: $('#txtCountry').val(),
        city: $('#txtCity').val(),
        createTime: new Date()
    };
    return student;
}

function showFormAndHideGrid() {
    $('#formAddUpdate').show();
    $('#tblGrid').hide();
}

function showGridAndHideForm() {
    $('#formAddUpdate').hide();
    $('#tblGrid').show();
}

function refreshFormData(student) {
    $('form').attr('data-student-id', student.id);
    $('#txtName').val(student.name);
    $(`input[name='gender'][value=${student.gender}]`).prop('checked', true);
    $('#txtCountry').val(student.country);
    $('#txtCity').val(student.city);
}

[ujjwalguptaofficial]

ok, let me check by doing this.

[ujjwalguptaofficial]

There was issue with autoincrement value in database upgrade. I have fixed the issue in version - 4.5.3. Please check and let me know.

here is issue link - #318

[ujjwalguptaofficial]

@wyknmjj

[wyknmjj]

Yes, I updated to 4.5.3 and the problem was indeed solved, thanks a lot!

[ujjwalguptaofficial]

please stargaze the JsStore repo. Thanks.