-
Notifications
You must be signed in to change notification settings - Fork 0
/
mdn_approach_only_one_fetch.js
170 lines (133 loc) · 5.86 KB
/
mdn_approach_only_one_fetch.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
/* This does not work as expected, See stackoverflow answer*/
// Create an instance of a db object for us to store the open database in
let db;
window.onload = function() {
// Open our database; it is created if it doesn't already exist
// (see onupgradeneeded below)
let request = window.indexedDB.open('products_db', 1);
// onerror handler signifies that the database didn't open successfully
request.onerror = function() {
console.log('Database failed to open');
}
// onsuccess handler signifies that the database opened successfully
request.onsuccess = function() {
console.log('Database opened successfully');
// Store the opened database object in the db variable. This is used a lot below
db = request.result;
// Run the fetchProducts() function to fetch data from external API
fetchProducts();
}
// Setup the database tables if this has not already been done
request.onupgradeneeded = function(e) {
// Grab a reference to the opened database
let db = e.target.result;
// Create an objectStore to store our products in (basically like a single table)
// including a auto-incrementing key
let objectStore = db.createObjectStore('products_os', {keyPath: 'id', autoIncrement: true});
// Define what data items the objectStore will contain
objectStore.createIndex('title', 'title', {unique: false});
objectStore.createIndex('price', 'price', {unique: false});
objectStore.createIndex('inStock', 'inStock', {unique: false});
}
function fetchProducts() {
let product1 = fetch('http://localhost:3001/fK/affiliate-api.flipkart.net/affiliate/products/1')
.then(function(response) {
return response.json();
})
.then(function(response) {
addData(response);
})
}
function addData(value) {
// open a read/write db transaction, ready for adding the data
let transaction = db.transaction(['products_os'], 'readwrite');
// call an object store that's already been added to the database
let objectStore = transaction.objectStore('products_os');
let newItem = {
title: value.productInfoList[0].productBaseInfoV1.title,
price: value.productInfoList[0].productBaseInfoV1.flipkartSellingPrice.amount,
inStock: value.productInfoList[0].productBaseInfoV1.inStock,
};
// Make a request to add our newItem object to the object store
var request = objectStore.add(newItem);
transaction.oncomplete = function() {
console.log('Transaction completed: database modification finished.');
// update the display of data to show the newly added item, by running displayData() again.
displayData();
}
transaction.onerror = function() {
console.log('Transaction not opened due to error');
};
}
function displayData() {
// Open our object store and then get a cursor - which iterates through all the
// different data items in the store
let objectStore = db.transaction('products_os').objectStore('products_os');
objectStore.openCursor().onsuccess = function(e) {
// Get a reference to the cursor
let cursor = e.target.result;
// Get a reference to table
let table = document.querySelector('#idb-table');
// If there is still another data item to iterate through, keep running this code
if(cursor) {
// Insert into table, tr and td to put each data item inside when displaying it
// structure the HTML fragment, and append it inside the table
let tableRow = document.createElement('tr');
for (let val in cursor.value) {
if (Object.prototype.hasOwnProperty.call(cursor.value, val)) {
if (val !== 'id') {
let td = document.createElement('td');
tableRow.appendChild(td);
td.textContent = cursor.value[val];
}
}
}
let td = document.createElement('td');
td.setAttribute('align', 'center');
let addButton = document.createElement('button');
td.appendChild(addButton);
addButton.textContent = 'Add';
addButton.addEventListener('click', function(e) {
addCartData(e);
})
tableRow.appendChild(td);
table.appendChild(tableRow);
// Iterate to the next item in the cursor
cursor.continue();
}
}
}
function addCartData(e) {
let req = window.indexedDB.open('products_db', 2);
req.onerror = function() {
console.log('Database failed to open');
}
req.onsuccess = function() {
console.log('Database opened successfully');
// Store the opened database object in the db variable. This is used a lot below
db = request.result;
}
req.onblocked = function(event) {
// If some other tab is loaded with the database, then it needs to be closed
// before we can proceed.
alert("Please close all other tabs with this site open!");
};
req.onupgradeneeded = function(e){
var db = e.target.result;
// Create a cart objectStore
let cartStore = db.createObjectStore('cart_os', {keyPath: 'idi', autoIncrement: true});
// Define what data items the cart objectStore will contain
cartStore.createIndex('title', 'title', {unique: false});
cartStore.createIndex('price', 'price', {unique: false});
console.log(db);
}
// let items = e.target.parentElement.parentElement.querySelectorAll(':not(:last-child)');
// let newItem = {title: items[0].textContent, price: items[1].textContent};
// // open a read/write db transaction, ready for adding the data
// let transaction = db.transaction(['cart_os'], 'readwrite');
// // call an object store that's already been added to the database
// let objectStore = transaction.objectStore('cart_os');
// // Make a request to add our newItem object to the object store
// var request = objectStore.add(newItem);
}
}