I have a Vue app: it is To Do List, where after adding some notes by clicking button Add Task we receive a list of items to do. On the front of each item we have button Delete and checkbox to have opportunity to mark it as done. The bug is when I for example mark one of the items in the list as checked and after that delete it-marker that it was checked goes to the other item which was not marked as checked initially. Can you please advice how it can be solved using Vue.js or any other option? Below is my code:
Vue.createApp({
data(){
return{
placeholder: 'Start typing',
inputvalue: '',
notes: []
}
},
mounted() {
this.notes = JSON.parse(localStorage.getItem('note')) || [];
},
watch: {
notes: {
handler: function() {
localStorage.setItem('note', JSON.stringify(this.notes));
},
deep: true
}
},
methods: {
addnewtask(){
if (this.inputvalue !== ''){
this.notes.push(this.inputvalue)
this.inputvalue=''
}
},
removetask(index){
if (confirm('Do you really want to delete?'))
this.notes.splice(index, 1)
}
}
}).mount(app)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
<div class="container" id="app">
<div class="card">
<h1>To Do List</h1>
<div class="form-control">
<input
type="text"
v-bind:placeholder="placeholder"
v-model="inputvalue"
v-on:keypress.enter="addnewtask"
/>
<button class="btn" v-on:click="addnewtask">Add Task</button>
</div>
<hr />
<ul class="list" v-if="notes.length !== 0"...>
<li class="list-item" v-for="(note, index) in notes">
<div>
<input type="checkbox"/>
({{index+1}}) {{note}}
</div>
<button class="btn danger" v-on:click="removetask(index)">Delete</button>
</li>
<hr />
<li>
<strong>Total: {{notes.length}}</strong>
</li>
</ul>
<div v-else>No task exist, please add first one.</div>
</div>
</div>
<script src="https://unpkg.com/vue#next"></script>
<script src="Vue3.js"></script>
</body>
</html>
The main issue in you code is, you don't store any information about which task is checked and which one is not.let's say you checked 3rd task and then delete it, the new 3rd item from the top will be auto checked as it has no information about the task so can't differentiate between the new and the deleted task.
This can be solved many way one easy solution is, in your notes array store two types of data. One title and one is isChecked then v-model the checked value in template.
Update your addnewtask() function like this,
addnewtask() {
if (this.inputvalue !== "") {
this.notes.push({
title: this.inputvalue,
isChecked: false,
});
this.inputvalue = "";
}
},
In html use a v-modal to add a two way data binding for the note.isChecked and update note like note.title since note is currently an object now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To Do List</title>
</head>
<link rel="stylesheet" href="style.css" />
<body>
<div class="container" id="app">
<div class="card">
<h1>To Do List</h1>
<div class="form-control">
<input
type="text"
v-bind:placeholder="placeholder"
v-model="inputvalue"
v-on:keypress.enter="addnewtask"
/>
<button class="btn" v-on:click="addnewtask">Add Task</button>
</div>
<hr />
<ul class="list" v-if="notes.length !== 0" ...>
<li class="list-item" v-for="(note, index) in notes">
<div>
<input type="checkbox" v-model="note.isChecked" />
({{index+1}}) {{note.title}}
</div>
<button class="btn danger" v-on:click="removetask(index)">
Delete
</button>
</li>
<hr />
<li>
<strong>Total: {{notes.length}}</strong>
</li>
</ul>
<div v-else>No task exist, please add first one.</div>
</div>
</div>
<script src="https://unpkg.com/vue#next"></script>
<script src="Vue3.js"></script>
</body>
</html>
Here is a vue playgroud link for your code demo.
Related
I would like to show and slide an element from the left to the right of the page. To do so, I hide it by default. When a button is clicked, the ul element is displayed and its width goes from 0px to 100vw. I also added a transition on the width property of the ul element.
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<button id="click_me" class="inline-block border-2 p-6"> Click Me! </button>
<ul id="hidden_nav" class="hidden w-0 h-screen bg-red-50 mt-10 transition-[width] duration-1000">
<li> Item </li>
<li> Item </li>
</ul>
</body>
</html>
JS:
const btn = document.getElementById('click_me');
const navul = document.getElementById('hidden_nav');
btn.addEventListener('click', function(){
navul.classList.toggle('hidden');
navul.classList.toggle('w-0');
navul.classList.toggle('w-screen');
});
Codepen link:
https://codepen.io/Okumak/pen/qBVjwdY
Yet, I cannot see any transition going on and I don't get why.
It will never work with a hidden class. An alternative solution would be opacity.
const btn = document.getElementById('click_me');
const navul = document.getElementById('hidden_nav');
btn.addEventListener('click', function(){
navul.classList.toggle('opacity-0');
navul.classList.toggle('w-0');
navul.classList.toggle('w-screen');
});
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<button id="click_me" class="inline-block border-2 p-6"> Click Me! </button>
<ul id="hidden_nav" class="opacity-0 w-0 h-screen bg-red-50 mt-10 transition-[width] duration-1000">
<li> Item </li>
<li> Item </li>
</ul>
</body>
</html>
Just look after the height. It still takes up space when hidden, just in case you want to toggle it as well then you can do so.
I'm trying to create a piechart from a single column of data with the google visualization API by counting each value, but I keep getting the following error message:
Invalid query: SELECT_WITH_AND_WITHOUT_AGG: C
INFORMATION
My spreadsheet can be found here: https://docs.google.com/spreadsheets/d/1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE/edit#gid=942634171
What I want to do is create a pie chart that counts the unique values in the 'What neighborhood are you from' column and plot their relative proportions.
The column itself can be seen here:
So I'd like to take this one column and create a table from it that reads like this:
EXAMPLE TABLE
Corona 2
Sunnyside 3
Elmhurst 4
And so on. And then use the string/number combination to populate a pie chart.
With regular SQL you could do SELECT Column, COUNT(Column) GROUP BY Column, so I'm assuming something similar would work for GQL.
So far these are some of the queries I've tried:
QUERIES:
'SELECT COUNT(C) GROUP BY C'
'SELECT C, COUNT(C) GROUP BY C'
'SELECT C, COUNT(C) PIVOT C
But none of these have worked.
I also get this error message in my console:
ERROR MESSAGE:
Here's the script I'm using that pertains to my problem:
SCRIPT
// Load the Visualization API and the controls package.
google.charts.load('current', {'packages':['corechart', 'controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var neighborhoodChart = new google.visualization.ChartWrapper({
'chartType' : 'PieChart',
'containerId' : 'chart_div2',
'dataSourceUrl' : 'https://docs.google.com/spreadsheets/d/1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE/gviz/tq?gid=942634171',
'query' : 'SELECT C, COUNT(C) GROUP BY C',
'options' : {
'title' : 'Neighborhood of Residence'
}
});
neighborhoodChart.draw();
}
Here's the script for the entire page that it's being used in:
ENTIRE SCRIPT
<!DOCTYPE html>
<html lang="en">
<head>
<title>CDC Dashboard</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Bootswatch Theme -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" >
<!-- External style sheet -->
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--Load the AJAX API for Google Charts-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"
src='https://www.google.com/jsapi?autoload={
"modules":[{
"name":"visualization",
"version":"1"
}]
}'></script>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.charts.load('current', {'packages':['corechart', 'controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var neighborhoodChart = new google.visualization.ChartWrapper({
'chartType' : 'PieChart',
'containerId' : 'chart_div2',
'dataSourceUrl' : 'https://docs.google.com/spreadsheets/d/1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE/gviz/tq?gid=942634171',
'query' : 'SELECT C, COUNT(C) GROUP BY C',
'options' : {
'title' : 'Neighborhood of Residence'
}
});
neighborhoodChart.draw();
}
</script>
</head>
<body>
<!-- Navbar to be affixed at the top -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>What We Do</li>
<li>Who We Serve</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="col-md-10 col-md-offset-1">
<h1 class="text-center">Who We Serve</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<hr>
</div>
</div>
<h2 class="text-center">Understanding Our Clients</h2>
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div class="row">
<div class="col-md-6">
<div id="filter_div"></div>
</div>
<div class="col-md-6">
<div id="search_div"></div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div id="attendance_div"></div>
</div>
<div class="col-md-6">
<div id="transport_div"></div>
</div>
</div>
<div id="chart_div">
</div>
<div id="chart_div2">
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<hr>
</div>
</div>
<div id="storytime">
<h2 class="text-center">Storytime</h2>
</div>
</div>
</div>
</body>
</html>
The working file for it can be seen here: https://s3-us-west-2.amazonaws.com/example-server/serve.html
UPDATE
Ideally I'd prefer a solution that only relies on changing the query itself, as this is syntactically cleaner. I'll be doing this several times throughout the project and would prefer to avoid workarounds that involve extra lines of code.
Any help would be greatly appreciated.
this should work, must be a bug or something...
'SELECT C, COUNT(C) GROUP BY C'
regardless, you can use data.visualization.data.group to manually aggregate the column
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['controls', 'corechart', 'table']
});
function drawChart() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE/gviz/tq?gid=942634171');
query.setQuery('SELECT C');
query.send(function (response) {
if (response.isError()) {
alert('Error: ' + response.getMessage() + ' - ' + response.getDetailedMessage());
return;
}
var dataGroup = google.visualization.data.group(
response.getDataTable(),
[0],
[{
aggregation: google.visualization.data.count,
column: 0,
label: response.getDataTable().getColumnLabel(0),
type: 'number'
}]
);
var neighborhoodChart = new google.visualization.ChartWrapper({
chartType: 'PieChart',
containerId: 'chart_div',
dataTable: dataGroup,
options: {
height: 240,
title: 'Neighborhood of Residence'
}
});
neighborhoodChart.draw();
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I make a simple application Ionic 2 but I find a problem that exists year screenshot
code index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular-ui/angular-ui-router.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- script home.js -->
<script src="js/home.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="myApp">
<ion-pane>
<!-- <ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
</ion-content> --><div ng-view></div>
</ion-pane>
</body>
</html>
code home.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>AngularJS & Firebase Web App</title>
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">
<link href="justified-nav.css" rel="stylesheet">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="../lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/angular-ui/angular-ui-router.js"></script>
<link href="../css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="../lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="../js/app.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron" style="padding-bottom:0px;">
<h2>AngularJS & Firebase App!</h2>
</div>
<form class="form-signin" role="form">
<input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
<input type="password" class="form-control" placeholder="Password" required="">
<label class="checkbox">
Sign Up
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
</body></html>
code home.js
var app = angular.module('home', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', { templateUrl : 'templates/home.html',controller: 'HomeCtrl' });
}])
app.controller('HomeCtrl', [function() {
}]);
code app.js
angular.module('myApp', ['ionic','home'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.otherwise({ redirectTo: '/home' });
}]);
I added ngRoute in js files but same problem
I am trying to match a regex in a website that I scrape using curl, this is my code:
#include <regex>
#include "curl_easy.h"
#include "curl_form.h"
int main(int argc, const char **argv) {
std::ostringstream response;
curl::curl_ios<std::ostringstream> writer (response);
curl::curl_easy easy(writer);
// Add some option to the curl_easy object.
easy.add<CURLOPT_SSL_VERIFYHOST>(false);
easy.add<CURLOPT_SSL_VERIFYPEER>(false);
easy.add<CURLOPT_URL>("https://minecraft.net/login");
easy.add<CURLOPT_FOLLOWLOCATION>(1L);
try {
// Execute the request.
easy.perform();
} catch (curl::curl_easy_exception error) {
// If you want to get the entire error stack we can do:
curl::curlcpp_traceback errors = error.get_traceback();
// Otherwise we could print the stack like this:
error.print_traceback();
// Note that the printing the stack will erase it
}
std::regex pattern("alue=\"\\w{40}");
const char* responseArray = response.str().c_str();
std::cout << response.str();
std::smatch match;
if(std::regex_search(responseArray, pattern)){
std::cout << "Found the proper value!" << std::endl;
} else {
std::cout << "Did not find the proper value" << std::endl;
}
return 0;
}
The response that I get when printing the response is this:
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Minecraft</title>
<meta name="description" content="Minecraft is a game about placing blocks to build anything you can imagine. At
night monsters come out, make sure to build a shelter before that happens.">
<meta name="author" content="Mojang AB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="/stylesheets/style.css?b=b_965">
<link rel="stylesheet" media="handheld" href="/stylesheets/handheld.css?b=b_965">
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
<script src="/javascripts/libs/modernizr.min.js"></script>
<script>
function recordOutboundLink(link, category, action, label, value) {
try {
ga('send', 'event', category, action, label, value);
setTimeout('document.location = "' + link.href + '"', 100);
}catch(err){}
}
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-9482675-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="wrap">
<header>
<div id="header_container" class="clearfix">
<a id="logo" href="/">Minecraft</a>
<ul id="menu">
<li>Home</li>
<li>
Game
<ul>
<li>What is Minecraft?</li>
<li>Getting started</li>
<li>Credits</li>
</ul>
</li>
<li>Community</li>
<li>Store</li>
<li>Profile</li>
<li>Help</li>
</ul>
<div id="userbox">
<span class="logged-out"><a href="/login" >Log i
n</a> | <a href="/register" onclick="recordOutboundLink(this, 'Sales2', 'Purchase-interest', 'Register-link')">Register<
/a></span>
</div>
</div>
</header>
<noscript>
<div id="javascript-warning" class="warning warning-yellow">
Please, please enable JavaScript to use this site.
</div>
</noscript>
<div id="main" role="main" class="clearfix controller-Secure action-login">
<h1>Login</h1>
<div id="login">
<h1></h1>
<form action="https://minecraft.net/login" method="post" accept-charset="utf-8" enctype="application/x-www-form-urle
ncoded" id="loginForm" class="spacious" id="loginForm" class="spacious"><input type="hidden" name="authenticityToken" v
alue="d2edcaa6bcc0fb19bf299b381212f59a194b8884">
<p>When logging in with a Mojang account, use your e-mail address as username.</p>
<p id="username-field">
<label for="username">Username:</label>
<input tabindex="1" type="text" name="username" id="username" value="" />
Forgot username?
</p>
<p id="password-field">
<label for="password">Password:</label>
<input tabindex="2" type="password" name="password" id="password" value="" />
Forgot password?
</p>
<p id="remember-field">
<input type="checkbox" name="remember" id="remember" value="true" />
<label for="remember">Remember me</label>
</p>
<p id="signin-field">
<input type="submit" id="signin" value="Sign in" />
</p>
</form></div>
</div>
</div>
<footer>
Mojang © 2009-. "Minecraft" is a trademark of Mojang Synergies AB — <a href="/terms">Terms of Use
</a> — Privacy Policy — b_965 r_bb50ffaf2f187302eb1bb
937f03df44f30b7d465
</footer>
<script src="/javascripts/libs/json2.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="/javascripts/libs/jquery-1.5.1.min.js"%3E%3C/s
cript%3E'))</script>
<script src="/javascripts/libs/jquery.dataTables.min.js"></script>
<script src="/javascripts/libs/jquery.timeago.js"></script>
<script src="/javascripts/jquery.scrollTo-1.4.2-min.js?b=b_965"></script>
<script src="/javascripts/plugins.js?b=b_965"></script>
<script src="/javascripts/main.js?b=b_965"></script>
</body>
</html>
When I run this code I always get the "Did not find the proper value!" output. But if I run the same regex through regexr I have no issues at all and it manages to find one match.
The match I am looking for in this case is:
alue="d2edcaa6bcc0fb19bf299b381212f59a194b8884
What am I doing wrong here?
const char* responseArray = response.str().c_str(); — binds responseArray to temporary value. String returned by str() is destroyed after this expression.
Better solution will save results in std::string and use it:
std::string responseArray = response.str();
std::cout << responseArray;
std::smatch match;
if(std::regex_search(responseArray, pattern)){
std::cout << "Found the proper value!" << std::endl;
} else {
std::cout << "Did not find the proper value" << std::endl;
}
I want to create a list which dinamically grows after an event (take a shoot) I mean adding each picture on real time to the list, this is my method...
//Invoke the camera capture UI for snapping a photo
function imageCapture() {
...
//Creates the array, datalist and the namespace for making this data public
if (dataArray == null) { dataArray = new Array(); }
dataArray[captureCount] = { title: capturedItem.name, id: "img" + captureCount, picture: photoBlobUrl };
var dataList = new WinJS.Binding.List(dataArray);
var publicMembers = { itemList: dataList };
WinJS.Namespace.define("DataExample", publicMembers);
}
And this is the HTML page which loads the content
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>eCamera</title>
<!-- Referencias de WinJS -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- Referencias de eCamera2 -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body >
<div id="content">
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
<div style="width: 150px; height: 100px;">
<!-- Displays the "picture" field. -->
<img src="#" style="width: 60px; height: 60px;" data-win-bind="alt: title; src: picture" />
<div>
<!-- Displays the "title" field. -->
<h4 data-win-bind="innerText: title"></h4>
<!-- Displays the "id" field. -->
<h6 data-win-bind="innerText: id"></h6>
</div>
</div>
</div>
<div id="basicListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource : DataExample.itemList.dataSource,
itemTemplate: select('#mediumListIconTextTemplate'),
itemsDraggable: true,
itemsReorderable: true }"></div>
</div>
</body>
</html>
If I load all the content in a fixed dataArray at first it works perfect, but dinamically adding elements and setting it all each time I take a picture so far doesn't work, how to make it work???
thanks in advance for the support
The app should not create new list each time. Use the WinJS.Binding.List.push method to append or splice can be used to insert. Since the list is observable, UI will autoupdate on changes (delete/add) to the list.