When attempting to set the keyPath using a variable, an error occurs stating that the keyPath option is not a valid key path

My JSON object, stored in a variable named "jsonObjSuper", is structured like this:

{
"Watchlist": "My Watchlist",
"Instruments": {
"instrument1": [
  "Company ABC",
  [
    {
      "snapshotTimeUTC": "2018-11-01T00:00:00",
      "snapshotTime": "2018/11/01 00:00:00"
    }
  ]
],
"instrument2": [
  "Company XYZ",
  [
    {
      "snapshotTimeUTC": "2018-11-01T00:00:00",
      "snapshotTime": "2018/11/01 00:00:00"
    }
  ]
]
}
}

I am attempting to set a keyPath for an IndexedDB using the value of "Watchlist". Here's the code snippet I'm using:

request.onupgradeneeded = function(event) {
var db = event.target.result;
var key = jsonObjSuper["Watchlist"]
var objectStore = db.createObjectStore("instruments", { keyPath: key});
}

However, I encounter the following error when executing the above code:

"Uncaught DOMException: Failed to execute 'createObjectStore' on 'IDBDatabase': The keyPath option is not a valid key path."

When I log the value of the "key" variable, it correctly shows as "My Watchlist". I also attempted stringifying the "key" variable but still faced the same error.

What could be causing this issue?

Thank you for your help!

Answer №1

After reviewing your code:

let key = jsonObjSuper["Watchlist"];
let objectStore = db.createObjectStore("instruments", { keyPath: key });

Considering the data definition provided:

jsonObjSuper = {
    "Watchlist": "My Watchlist",
    ...
}

You are essentially executing:

db.createObjectStore("instruments", { keyPath: "My Watchlist" });

The key path "My Watchlist" is invalid. In IndexedDB, a key path for an object store must be either a valid JavaScript identifier, a dot-separated sequence of identifiers, an empty string, or an array containing one or more of the previous options. Refer to https://w3c.github.io/IndexedDB/#key-path-construct for specific details. Therefore, using "My_Watchlist" as the key path would be acceptable, but "My Watchlist" is not suitable.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Challenges with exporting dynamically generated divs using jspdf in an Angular 2 project

I have been utilizing the jspdf library to print div elements in my current project. But I recently discovered an issue where dynamic content within a div is not being printed correctly. Specifically, when incorporating simple Angular if statements, jspdf ...

I'm facing some difficulties in sourcing my header into a component and encountering errors. Can anyone advise me on how to properly outsource my header?

Looking to streamline my headers in my Ionic 4 project by creating a separate reusable component for them. Here's how I set up my dashboard page with the header component: <ion-header> <app-header title="Dashboard"></app-he ...

What is the best way to present a unique page overlay specifically for iPhone users?

When browsing WebMD on a computer, you'll see one page. However, if you access it from an iPhone, not only will you be directed to their mobile page (which is easy enough), but they also display a special overlay with a "click to close" button prompti ...

Clicking an AngularJS button within a form is causing an unexpected page refresh

I am facing an issue with adding a new input field on click. I have two buttons, one to add and another to remove the input box. When I click on the add button, it should add a set of input boxes, but currently, it only adds one and refreshes the page, dis ...

Pass a data variable to an HTML file using express's sendfile function (quick inquiry)

Currently utilizing Node.JS, path, and express for running an HTML webpage. I need to pass a variable to the HTML file for its utilization: var client_cred_access_token = 'fakeToken'; ... app.get('/', function (req, res) { res.se ...

Filtering multiple rows in a table using Javascript

I'm currently working on creating a filter that can filter based on multiple inputs, with each input filtering in a separate column. Here is the JavaScript & code I am using: function myFunction(column, input) { var filter, table, tr, td, i, t ...

Storing form information within the view

What is the best way to transfer data between views in AngularJS? I tried using $rootScope but it's not working as expected. ...

Error: Java JSONObject data is not present

When converting a string to JSONObject, I encountered an issue where some data went missing. I tried using new JSONObject(response.toString()); but when I received JSON from my Philips Hue bridge and converted it to JSONObject, part of the data was missing ...

How can I implement a toggle button to display additional details for a specific row within a table created using React.js?

I'm currently working on a project using Next.js and have come across an unexpected issue. Upon reading a JSON file, I populate a table with the data retrieved from it. Each piece of information in the table has hidden details that should only be reve ...

Escaping JSON in child blocks for handling AJAX requests

Each page on the website can be served in two different ways - either as an "html" version or a "json" version. The "html way" includes a complete html page layout with header, footer, menu, and main content just like any other standard webpage. On the ...

AngularJS is not properly clearing the datepicker

Upon submitting the form, I have managed to reset all input fields to blank except for the datepicker which still retains the previously selected date. How can I clear that as well? Snippet of HTML: <div> <form name="profileform" role="fo ...

Concerns with the performance of Leaflet's polyline

Currently using Leaflet version 1.0.3 and encountering an issue with GPS positions on my map. Within a for loop, I am creating circle markers for each GPS position: var position = new L.latLng(lat, lng); coordinates.push(position); L.circle([lat, lng], ...

I am encountering a problem where I lose the values of a nested array of objects when trying to push it into another array

My goal is to format data for use with the amCharts library. The required structure should look like this: data = [{ name: "First", total: 190, children: [ { name: "A1", value: 100 }, { name: &q ...

Tips for incorporating user-entered data from a text box into a JavaScript function and utilizing a loop

Although my code is functioning correctly, I am looking to make some adjustments but seem to be struggling to achieve the desired outcome. Essentially, I have two labels and an input field in which the user is prompted to enter a specific number of weeks ...

Trouble displaying images from JSON file in AngularJS using ng-src - need help with image loading

While utilizing AngularJS to extract image data from a JSON file, everything seems to work fine for other types of data except images. Why is the ng-src not retrieving any images? I am attempting to load all the images into the div and set the src, alt, a ...

AngularJS, NodeJS, and Mongoose Challenge in Internet Explorer 11

I am currently working on developing my website using the AngularJS framework for the front end, Node.js for the backend, and Mongoose to store data in a MongoDB database. Everything works fine in Firefox RS v.24 and Chrome - when I add a new user to the ...

Managing POST request data in Express: A step-by-step guide

Currently, I am facing an issue with my alert button on the client side, which has an event listener that is supposed to send data to the server. Below is the code snippet for the client side: alertBtn.addEventListener("click", () => { axios ...

Having issues with C# ASP.Net autocomplete not functioning properly when using Javascript/Json post

I have been working on a c# asp.net usercontrol that requires a functional autocomplete feature. However, I am encountering an ongoing issue where the script appears to be running – with the progress bar spinning – but it consistently returns an ' ...

JavaScript form callbacks in Rails 3 are failing to trigger

My Rails 3 callbacks are not triggering for some unknown reason. Here's the form code I'm using: <%= form_tag('/create', :method => "post", :remote => true ,:id => "create") do %> <% end %> And this is the javascr ...

Origin of SVG Circle Stroke

Describing my current issue is proving to be challenging, but I'll do my best: My project involves creating an SVG circle progress bar and fortunately, I came across a great example that aligns with what I aim to achieve. I prefer not to use any thir ...