I'm currently working on a Chrome extension and using the Chrome storage API (chrome.storage.sync.set) for saving my data but I'm having an issue to make it work.
The issue is that once I save an entry and wanted to save another the previous will be deleted.
Popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="data"></div>
<input type="text" id="text"></input>
<button id="set">Set</button>
<script src="popup.js"></script>
</body>
</html>`
popup.js
document.body.onload = function() {
chrome.storage.sync.get("data", function(items) {
if (!chrome.runtime.error) {
console.log(items);
document.getElementById("data").innerText = items.data;
}
});
}
document.getElementById("set").onclick = function() {
var d = document.getElementById("text").value;
chrome.storage.sync.set({ "data" : d }, function() {
if (chrome.runtime.error) {
console.log("Runtime error.");
}
});
window.close();
}
Is there a way to store tons of data without the previous ones deleted and is there a possibility to perform CRUD operation on a data I saved using the chrome storage API?
This is how you can append the value of a key in chrome.storage:
function storage_sync_append(val){
// In get, {'data': []} sets the key value pair if it didn't exist;
// in this case the value is an empty Array
chrome.storage.sync.get({'data': []}, result => {
var temp = result.data;
temp.push(val);
chrome.storage.sync.set({ 'data': temp }, function() {
if (chrome.runtime.error) {
console.log("Runtime error.");
}
});
});
}
In your code:
document.getElementById("set").onclick = function() {
var d = document.getElementById("text").value;
storage_sync_append(d);
window.close();
}
As an aside, if you have more than one array to store with chrome.storage, the append function can be rewritten to work with any key:
function storage_sync_append(key, data){
//
chrome.storage.sync.get({ [key] : []}, result => {
var temp
for(property in result)
if(property == key)
temp = result[property];
temp.push(data);
chrome.storage.sync.set({ [key] : temp }, function() {
if (chrome.runtime.error) {
console.log("Runtime error.");
}
});
});
}
Related
I am trying to load multiple files using jQuery's get function. A minimal example looks like this:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<select name="file-select" id="file-select" multiple>
<option>http://url.to.file/Test1.txt</option>
<option>http://url.to.file/Test2.txt</option>
</select>
<script>
$(document).ready(function() {
$('#file-select').change(function () {
let loaded_files_list = new Array();
let promise = new Promise(function(myResolve,myReject) {
$("#file-select option:selected").each(function () {
file_name = $(this).val();
$.get($(this).val(), function(response) {
data = response;
// Do something with data
console.log("file select length: "+$("#file-select option:selected").length);
loaded_files_list.push(file_name);
console.log('loaded files length: '+loaded_files_list.length)
if(loaded_files_list.length == $("#file-select option:selected").length) {
console.log('Entered if clause');
myResolve(loaded_files_list);
}
else {
myReject('List is not complete yet');
}
});
});
});
promise.then(
function(value) {
console.log('List is complete!');
console.log(value);
},
function(error) {
console.log(error);
}
);
});
});
</script>
</body>
</html>
Now if I select a single file this works just like expected and I can see the list with a single item in the console. However if I I select both files, the if clause is entered after both files are loaded, but it seems myResolve is not called as neither List is complete! is displayed nor the list with two elements. What am I doing incorrect here?
$(document).ready(() => {
// make this a function that "waits" for the await command when
// used on promises
$('#file-select').change(async () => {
// declare an array that we will use to store our HTTP requests
const filesList = [];
// extract the clicked options
const selectedOpts = $('#file-select').children('option:selected')
// loop over the clicked options
selectedOpts.each((index, opt) => {
// extract the text value from the option
const link = opt.text
// push the HTTP request to the filesList array without
// waiting for the response
filesList.push($.get(link))
})
// wait for the HTTP requests to to complete before
// continuing
const responses = await Promise.all(filesList)
// loaded all files
responses.forEach(data => {
console.log(data) // => file contents
})
});
});
I am using an api which has names of exercises in it. I want to make a search box with an autocomplete drop down (like suggetions google gives you before finish up what you type) But i want to use the api as results.
I managed to get the readings out of the api.
let data;
async function getExercises () {
let url = 'https://wger.de/api/v2/exercise/?format=json'
while (url) {
const res = await fetch(url)
data = await res.json()
for (const item of data.results) {
console.log(item.name)
}
url = data.next
}
$(document).ready(function() {
BindControls();
});
function BindControls() {
$('#exercise-search').autocomplete({
source: data,
minLength: 0,
scroll: true
}).focus(function() {
$(this).autocomplete("search", "");
});
}
}
I am trying to make the drop down using the api results but cant get it to work.
<input id="exercise-search" class="form-control" type="text" name="data">
p, div, input {
font: 16px Calibri;
}
.ui-autocomplete {
cursor:pointer;
height:120px;
overflow-y:scroll;
}
these are the libraries i imported:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
the console log in my browser doesnt seem to have any errors.
Any insight would be appreciated
Try something like this https://jsfiddle.net/voaf1sLg/.
What it boils down to is that you do not store those search results anywhere. I've modified the code for your async function to return the full array with all results (after all those 33 API calls, eh!), then return a fulfilled promise with said auto-complete entries. Modify your code accordingly.
async function getEx() {
let url = 'https://wger.de/api/v2/exercise/?format=json'
const array = [];
while (url) {
const res = await fetch(url)
data = await res.json()
for (const item of data.results) {
console.log(item.name)
array.push(item.name);
}
url = data.next
}
return array;
}
$(function() {
let tags = [];
getEx().then(res => {
$( "#tags" ).autocomplete({
source: res
});
});
} );
I can see your total result count is 685,its better if we can full those records in one shot. but if its not possible then i just modify your code accordingly using recurssion.
var sourcearray = []
var getData = function(url) {
$.getJSON(url, function(d) {
Array.prototype.push.apply(sourcearray, d.results);
if (d.next != null) {
getData(d.next);
} else {
console.log(sourcearray)
var config={
minLength: 1,
source: sourcearray,
focus: function(event, ui) {
$("#suggest").val(ui.item.license_author);
return false;
},
select: function(event, ui) {
$("#suggest").val(ui.item.license_author);
return false;
}
};
$("#suggest").autocomplete(config).autocomplete("instance")._renderItem = function(ul, item) {
return $("<li>").append("<div>" + item.license_author + "<br>" + item.description + "</div>").appendTo(ul);
};
}
})
}
$(function() {
getData("https://wger.de/api/v2/exercise/?format=json")
});
here is working fiddle
I want to upload huge file. So I chunk a huge file into 10Mb blobs.
Uploading with files around 200Mb works well.
But uploading 2GB files, Chrome`s console error:
net::ERR_FILE_NOT_FOUND
My environment:
Chrome 53
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="testapp" ng-controller="testctl">
<input type="file" id="file">
<input type="button" ng-click="one()" value="test_split_upload">
</div>
<script>
(function () {
'use strict';
angular
.module('testapp', [
])
.controller('testctl',['$scope','$http','$q',function ($scope,$http,$q) {
$scope.one = function () {
$scope.file = $('#file').get(0).files[0];
$scope.splitfilea(1);
};
$scope.splitfilea = function (currentpage) {
let persize=1024*1024*10; //10Mb
let allpage = Math.ceil($scope.file.size/persize);
let start = (currentpage-1)*persize;
let end = start+persize;
if(currentpage===allpage){
end=$scope.file.size;
}
$scope.filesplitdata = $scope.file.slice(start, end);
$scope.r = new FileReader();
$scope.r.readAsDataURL($scope.filesplitdata);
$scope.r.onloadend=function (e) {
console.log(currentpage);
var bolb = e.target.result;
$scope.encode_blob = new Blob([bolb]);
$q.when($scope.httppost($scope.encode_blob)).then(function () {
delete $scope.formData;
if(currentpage<=allpage){
currentpage = currentpage+1;
$scope.splitfilea(currentpage);
}else{
console.log('end');
}
});
};
};
$scope.httppost = function (blob) {
var deferral_local = $q.defer();
$http({
method: 'POST',
url: '/test/up4/1.php',
headers: {
'Content-Type': undefined
},
data: {
abc: blob,
filename:"xxxxxxx.txt",
type:"xxxxxx"
},
transformRequest: function (data, headersGetter) {
if(!$scope.formData){
$scope.formData = new FormData();
}
angular.forEach(data, function (value, key) {
if(key === "abc"){
$scope.formData.append(key, value,"xxx.txt");
}else{
$scope.formData.append(key, value);
}
});
var headers = headersGetter();
delete headers['Content-Type'];
return $scope.formData;
}
}).success(function (response) {
deferral_local.resolve( { status: 'good' } );
});
return deferral_local.promise;
};
}]);
}());
</script>
</body>
</html>
And the 4.php is empty.
<?php
?>
I'm not sure that I would re-invent the wheel by trying to chunk the file yourself. Look into an AngularJS file upload library such as ng-file-upload.
This library allows you to set a ngf-max-size attribute directive on your file upload object. Their example shows ngf-max-size="10GB", so I wouldn't doubt this library is capable enough to handle your file uploads.
This is Chrome`s Bug
About This: https://bugs.chromium.org/p/chromium/issues/detail?id=375297
I upgrade the Chrome to 57 , And all files works well... ^_^
The code below get's Json object from a URL in a loop.
Problem is I cannot seem to display returned Json data.
I want to display the Temperature and Humidity from the object.
Valid Json objects are returned OK, but i cannot display it in HTML div.
I see nothing printed to screen.
FULL CODE:
<html>
<head>
<title>json loop</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<div id="container">
<div id="div"></div>
<div id="output">nothing yet</div>
</div>
<script>
var previous = null;
var current = null;
var data;
setInterval(function() {
$.getJSON(
"https://dweet.io/get/latest/dweet/for/myesp8266",
function(json) {
data = json;
current = JSON.stringify(data);
$("div").html(data);
console.log(data);
if (previous && current && previous !== current) {
console.log('refresh');
location.reload();
}
previous = current;
});
}, 2000);
var output = document.getElementById('output');
output.innerHTML = data ;
</script>
</body>
</html>
You are not putting the stringified string to the HTML. Use current and not data ?
data = json;
current = JSON.stringify(data);
$("div").html(current);
console.log(current);
if (previous && current && previous !== current) {
console.log('refresh');
location.reload();
}
previous = current;
EDIT
If you want the temperature, use :
$("div").html(data.with[0].content.temperature);
have you tried it like this ?
setInterval(function() {
$.getJSON("https://dweet.io/get/latest/dweet/for/myesp8266",
function(json) {
data = json;
current = JSON.stringify(data);
//$("div").html(data);
console.log(data);
if (previous && current && previous !== current) {
console.log('refresh');
location.reload();
}
previous = current;
var output = document.getElementById('output');
output.innerHTML = current ;
});
}, 2000);
Edit:
here is an example on how this may work: https://plnkr.co/edit/GI5uzojOOmJNwAc73aXq?p=preview
I use Javascript. I want to get RSS data by API google (this link: http://www.javascriptkit.com/dhtmltutors/googleajaxfeed.shtml ), then insert the data into a Array (Global variable). But my global variable can not save data.
Inside rssfeedsetup() function, ARR_DATA (Global Array) have data. However, after load rssfeedsetup() function, ARR_DATA have no data.
Please show me, how to insert data to global variable in this case.
My code:
Head:
<head>
<title>TEST API FEED RSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load("feeds", "1"); //Load Google Ajax Feed API (version 1)
</script>
</head>
Body:
<body>
<div id="feeddiv"></div>
<script type="text/javascript">
var ARR_DATA = []; // **I want to insert data into this array**
var feedurl = "http://rss.slashdot.org/Slashdot/slashdot";
var feedlimit = 4;
function rssfeedsetup() {
var feedpointer = new google.feeds.Feed(feedurl); //Google Feed API method
feedpointer.setNumEntries(feedlimit); //Google Feed API method
feedpointer.load(displayfeed); //Google Feed API method
}
function displayfeed(result) {
if (!result.error) {
var thefeeds = result.feed.entries;
var arr_Temporary = [];
for (var i = 0; i < thefeeds.length; i++) {
arr_Temporary[0] = thefeeds[i].title;
arr_Temporary[1] = thefeeds[i].link;
// insert RSS data into ARR_DATA.
ARR_DATA.push(arr_Temporary);
console.log('value before:', ARR_DATA); // check value of ARR_DATA, there have data exist.
}
}
}
window.onload = function () {
rssfeedsetup(); // call function
console.log('value2 after:', ARR_DATA); // check value of ARR_DATA, there is no data.
};
console.log('value2 after:', ARR_DATA); //check value of ARR_DATA, there is no data.
</script>
</body>
I have got value console:
image of firebug on firefox
Ps: Why ARR_DATA no contain data after load function rssfeedsetup()?
You can push data into the array like this:
function displayfeed(result) {
if (!result.error) {
var thefeeds = result.feed.entries;
for (var i = 0; i < thefeeds.length; i++) {
var feed = {
title: thefeeds[i].title,
link: thefeeds[i].link
};
ARR_DATA.push(feed);
}
console.log(feed);
}
}
Hope it helps