can't search fetched data from html table - javascript

I have some code (as below) HTML and JavaScript . Actually, I've already fetched some of data from a covid-19 API and also i kept those information on HTML table .
So, now i wanna search info from the HTML table with country name. But, I couldn't that. So, please some one help me to solve this problem .
fetch('https://api.covid19api.com/summary')
.then(response => response.json())
.then(data => {
var tbody = document.querySelector('#tbody');
tbody.innerHTML = `
<tr>
<td>${data.Global.NewConfirmed}</td>
<td>${data.Global.TotalConfirmed}</td>
<td>${data.Global.TotalDeaths}</td>
<td>${data.Global.TotalRecovered}</td>
</tr>
`
var all_covid_data = document.querySelector('#all_covid_data')
var countries = data.Countries ;
for(var i =1;i<countries.length ; i++){
all_covid_data.innerHTML += ` <tr>
<td class='bg-primary text-light '>${countries[i].Country}</td>
<td>${countries[i].NewConfirmed}</td>
<td>${countries[i].NewDeaths}</td>
<td>${countries[i].NewRecovered}</td>
<td>${countries[i].TotalConfirmed }</td>
<td>${countries[i].TotalRecovered}</td>
<td>${countries[i].TotalDeaths}</td>
</tr>`;
}
})
.catch(err => console.log(err))
// searching or filtering data from table
var tableRow = document.getElementById('all_covid_data');
var inputField = document.getElementById('searchBox');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Covid-19 Info</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 py-3">
<h2 class="text-uppercase text-center">Covid-19 Informations</h2>
<hr style="width: 110px; text-align: center; border-width: 3px; border-color:#17A2B8">
<table class="table">
<thead class="bg-info text-light">
<tr>
<th>NewConfirmed</th>
<th>TotalCases</th>
<th>TotalDeaths</th>
<th>TotalRecovered</th>
</tr>
</thead>
<tbody class="bg-dark text-light" id='tbody'>
</tbody>
</table>
</div>
<div class="col-md-2"></div>
</div>
<section id="countries_data" class="py-4">
<div class="row">
<div class="col-12">
<div class="d-flex">
<input type="text" name="" placeholder="Search here" id="searchBox" class="form-control">
<button class="btn ml-2 btn-info">Search</button>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered table-striped my-4 table-hover">
<thead class="bg-info text-light">
<tr>
<th>Countries</th>
<th>NewConfirmed</th>
<th>NewDeaths</th>
<th>NewRecovered</th>
<th>TotalConfirmed</th>
<th>TotalRecovered</th>
<th>TotalDeaths</th>
</tr>
</thead>
<tbody id='all_covid_data'>
</tbody>
</table>
</div>
</section>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="./app.js"></script>
</body>
</html>

Create separate methods, one to fetch data from API & another to populate the table.
Simply use filter() method to filter Country by name and re-use the populateTable() method.
Start the for loop from 0.
$(document).ready(function() {
var summary;
fetch('https://api.covid19api.com/summary')
.then(response => response.json())
.then(data => {
summary = data;
populateTable(data);
})
.catch(err => console.log(err))
function populateTable(data) {
var tbody = document.querySelector('#tbody');
tbody.innerHTML = `
<tr>
<td>${data.Global.NewConfirmed}</td>
<td>${data.Global.TotalConfirmed}</td>
<td>${data.Global.TotalDeaths}</td>
<td>${data.Global.TotalRecovered}</td>
</tr>
`;
var countries = data.Countries;
let content = '';
for (var i = 0; i < countries.length; i++) {
content += `<tr>
<td class='bg-primary text-light '>${countries[i].Country}</td>
<td>${countries[i].NewConfirmed}</td>
<td>${countries[i].NewDeaths}</td>
<td>${countries[i].NewRecovered}</td>
<td>${countries[i].TotalConfirmed }</td>
<td>${countries[i].TotalRecovered}</td>
<td>${countries[i].TotalDeaths}</td>
</tr>`;
}
$('#all_covid_data').html(content);
}
// searching or filtering data from table
var tableRow = document.getElementById('all_covid_data');
var inputField = document.getElementById('searchBox');
$("#search_btn").click(() => {
var filteredData = JSON.parse(JSON.stringify(summary));
filteredData.Countries = filteredData.Countries.filter(c => c.Country.toLowerCase().includes(inputField.value.toLowerCase()));
if (filteredData.Countries.length > 0) {
$('#all_covid_data').html('');
populateTable(filteredData);
} else {
alert('Country not found');
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Covid-19 Info</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 py-3">
<h2 class="text-uppercase text-center">Covid-19 Informations</h2>
<hr style="width: 110px; text-align: center; border-width: 3px; border-color:#17A2B8">
<table class="table">
<thead class="bg-info text-light">
<tr>
<th>NewConfirmed</th>
<th>TotalCases</th>
<th>TotalDeaths</th>
<th>TotalRecovered</th>
</tr>
</thead>
<tbody class="bg-dark text-light" id='tbody'>
</tbody>
</table>
</div>
<div class="col-md-2"></div>
</div>
<section id="countries_data" class="py-4">
<div class="row">
<div class="col-12">
<div class="d-flex">
<input type="text" name="" placeholder="Search here" id="searchBox" class="form-control">
<button class="btn ml-2 btn-info" id="search_btn">Search</button>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered table-striped my-4 table-hover">
<thead class="bg-info text-light">
<tr>
<th>Countries</th>
<th>NewConfirmed</th>
<th>NewDeaths</th>
<th>NewRecovered</th>
<th>TotalConfirmed</th>
<th>TotalRecovered</th>
<th>TotalDeaths</th>
</tr>
</thead>
<tbody id='all_covid_data'>
</tbody>
</table>
</div>
</section>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="./app.js"></script>
</body>
</html>

Related

Why am i having two select pickers?

Why am i having two select pickers, when there should be only one. Actually, I am copying the first row of table in my javascript function, and pasting it (as a new row) when the user presses "Add" button. But there seems to be a problem with select picker.
Press "Add New" button to see the problem. See the Jsfiddle please
output i am having on jsfiddle
This is my js file:
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
var accounts = $("table td:first-child").html();
var actions = $("table td:last-child").html();
// Append table with add row form on add new button click
$(".add-new").click(function() {
$(this).attr("disabled", "disabled");
var index = $("table tbody tr:last-child").index();
var row =
"<tr>" +
"<td>" +
accounts +
"</td>" +
'<td><input type="text" class="form-control" name="debit"></td>' +
'<td><input type="text" class="form-control" name="credit"></td>' +
'<td><input type="text" class="form-control" name="description"></td>' +
"<td>" +
actions +
"</td>" +
"</tr>";
$("table").append(row);
$("table tbody tr")
.eq(index + 1)
.find(".add, .edit")
.toggle();
$('[data-toggle="tooltip"]').tooltip();
$('.selectpicker').selectpicker('render'); //is this line problematic?
});
});
This is the corresponding part of HTML file:
<!DOCTYPE html>
<html lang="en" xmlns:th="w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/dashboardAssets/img/favicon.png" />
<title>Create Transaction</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- bootstrap-select CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.0/css/bootstrap-select.css" integrity="sha512-fbGrX/r0npKKqlimb6PTYM51KC1aAmZtP3srWTAKiavy3ISb0B2SrA4SXCePEZxphpjJJn6+OoAUxxqbHUD5Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- font icon -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- container section start -->
<section id="container" class="">
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><i class="fa fa fa-bars"></i> Transaction</h3>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-bars"></i>Transaction</li>
<li><i class="fa fa-square-o"></i>Create Transaction</li>
</ol>
</div>
</div>
<!-- page start-->
<form action="/commitTransaction">
<div class="row">
<div class="container">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-8">
<h2>Create <b>Transaction</b></h2>
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-info add-new"><i class="fa fa-plus"></i>
Add New</button>
</div>
</div>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Account</th>
<th>Debit</th>
<th>Credit</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="row-fluid">
<select class="selectpicker" data-live-search="true" data-live-search-placeholder="Search">
<option value=""> -- Nothing Selected -- </option>
<optgroup label="Customers">
<option>cx</option>
<option>cy</option>
<option>cz</option>
</optgroup>
</select>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="panel panel-body">
<button class="btn btn-primary btn-lg" style="float:right" type="submit">Commit</button>
</div>
</div>
</div>
</form>
<!-- page end-->
</section>
</section>
</section>
<!--main content end-->
<!-- javascripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- bootstrap-select -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js" integrity="sha512-yDlE7vpGDP7o2eftkCiPZ+yuUyEcaBwoJoIhdXv71KZWugFqEphIS3PU60lEkFaz8RxaVsMpSvQxMBaKVwA5xg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
I am using Thymeleaf and Java Spring in the project. Please help me out. Thanks
The reason for you seeing this twice, is because you copy everything. The selectpicker('render') works similar to jQuerys select2(). It hides the select and inserts some divs/spans to display a browser-rendered "fake"-selection, not an OS rendered selection.
If you would (for example) use the last row of the table, as a preset, you would have an additinal selectpicker-button every time you call add new.
Just copy the select, not the whole content from the first column.
Changing:
var accounts = $("table td:first-child").html();
to
var accounts = $("table td:first-child select").get(0).outerHTML;
will solve your issue.

html input to pdf format

can you help me how to print it into pdf on the table with input value.
sorry im just a student and my supervisor need this project for my output
and i cant add my materialize js and css because for body limit
and i add a add button for new Row for the table with a input that can print it to the pdf. just help me in converting to pdf and i can handle the rest of formating in pdf
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bureau of Internal Revenue</title>
</head>
<body class="scrollspy bg">
<nav>
<div class="nav-wrapper white" >
<div class="container">
<img src="img/download.png" style="width:5%; margin-top:3px; " alt="" class="responsive-image">
<a href="" style="margin-left:1%;" class="brand-logo black-text"> Bureau of Internal Revenue
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Create</li>
</ul>
</a></div>
</div>
</nav>
<div class="showcase container">
<div class="bg-showcase">
<div class="row">
<div class="col s12 m10 offset-m1 center">
<br>
<br>
<br>
<br>
<h1 class="white-text center"><b>Welcome</b></h1>
<h1 class="center white-text"><b>to</b></h1>
<h1 class="center white-text"><b>Bureau of Internal Revenue</b></h1>
</div>
</div>
</div>
</div>
<form action="">
<div class="row">
<div class="col s12 l10 offset-l1">
<div class="card">
<div class="card-content">
<div class="">
<h3><b>Index of Success Indicators</b></h3>
<table class="striped">
<thead>
<tr>
<th>Major Final Outputs</th>
<th>Performance Measures</th>
<th>Performance Targets</th>
<th>Success Indicator
<p>(Measure + Target)</p></th>
<th>Organization Outcome Sectoral Goals</th>
</tr>
</thead>
<thead>
<tr>
<th>A. Strategic Priority</th>
</tr>
</thead>
<tbody class="line">
<tr>
<th>New Row</th>
</tr>
</tbody>
<thead>
<tr>
<th>B. Core Function</th>
</tr>
</thead>
<tbody class="line">
<tr>
<th>New Row</th>
</tr>
</tbody>
<thead>
<tr>
<th>C. Support Function</th>
</tr>
</thead>
<tbody class="line">
<tr>
<th>New Row</th>
</tr>
</tbody>
</table>
<div class="center"><input type="button" value="Create PDF" class="btn btn-black" onclick="demoFromHTML()"></div>
</div>
</div>
</div>
</div>
</div>
</form>
<footer class="page-footer grey darken-3">
<div class="container">
<div class="row">
<div class="col s12 l6">
<h4>Links</h4>
<ul>
<li>Home</li>
<li>Back to Top</li>
<li>About Developer</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright grey darken-2">
<div class="container">Bureau of Internal Revenue © 2019</div>
</div>
</footer>
</body>
<div id="create" class="modal">
<ul class="container center" style="margin-bottom: 3%;">
<h2>Create</h2>
<li>Index of Success Indicators</li>
<br><br>
<li>Performance Monitoring and Coaching</li>
<br><br> <li>CSC Individual Development Plan</li>
<br><br> <li>Individual Performance Commitment And Review</li>
</ul>
<div class="modal-footer">
close
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script>
$(document).ready(function () {
// Init Sidenav
$('.button-collapse').sideNav();
// Scrollspy
$('.scrollspy').scrollSpy();
$('.modal').modal({
dismissible:true,
inDuration:300,
outDuration:200,
ready:function(modal,trigger){
console.log('Modal Open',modal,trigger);
}
});
jQuery(function(){
var counter = 1;
jQuery('a.addline').click(function(event){
event.preventDefault();
var newRow =jQuery('<tr class="number">'+
counter +' <th><input type="text" name="" class="center" id=""/></th>'+
counter +' <th><input type="text" name="" class="center" id=""/></th>'+
counter +' <th><input type="text" name="" class="center" id=""/></th>'+
counter +' <th><input type="text" name="" class="center" id=""/></th>'+
counter + '<th><input type="text" name="" class="center" id=""/></th>' +
counter + '<th><button type="button" class="deletebtn" title="Remove row">X</button></th>');
counter ++;
jQuery('tbody.line').append(newRow);
});
});
function demoFromHTML(){
var pdf= new jsPDF('p','pt','letter');
source = $('#isi')[0];
specialElementHandlers={
'#bypassme':function(element,renderer){
return true
}
};
margins = {
top:80,
bottom:60,
left:40,
width:552
};
pdf.fromHTML(
source,
margins.left,
margins.top, {
'width':margins.width,
'elementHanlders':specialElementHandlers
},
function(dispose){
pdf.save('testing.pdf');
}
,margins);
};
});
</script>
</body>
</html>

Change content of multiple elements using Javascript without for loop

I am trying to change the content of multiple elements with the same id, using:
window.onload = function() {
document.getElementById('price_01').innerHTML = price_01;
document.getElementById('dimension_01').innerHTML = dimension_01;
}
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script type="text/javascript">
var price_01 = '$8000';
var dimension_01 = '10m';
window.onload = function() {
document.getElementById('price_01').innerHTML = price_01;
document.getElementById('dimension_01').innerHTML = dimension_01;
}
</script>
<body>
<div class="w3-container">
<h2>W3.CSS Modal</h2>
<div class="w3-container">
<table class="table">
<tbody>
<tr>
<td>Price:</td>
<td id='price_01'></td>
</tr>
<tr>
<td>Dimension:</td>
<td id='dimension_01'></td>
</tr>
</tbody>
</table>
</div>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<div class="w3-container">
<table class="table">
<tbody>
<tr>
<td>Price:</td>
<td id='price_01'></td>
</tr>
<tr>
<td>Dimension:</td>
<td id='dimension_01'></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
However, it seems that the code doesn't work because you can only have one unique id for each element. Is there a more elegant solution to this problem without for loops and class? I have a lot of these elements to populate and I don't really want to write a for loops for each of them.

Vue.js 2.x v-for in a <table> not working (Property or method not defined)

I was trying to iterate though an array defined in the data section of a Vue instance, so the table head could be determined automatically. But when I ran the code, the console output was as follows:
Here's the code (.js file combined):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Demo</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<h3>
Staffs
</h3>
<table id="mytable" class="table table-hover">
<thead>
<tr>
<th v-for:"term in items">
{{term}}
</th>
</tr>
</thead>
<tbody>
<tr>
<td>6556</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row clearfix">
<div class="col-md-8 column">
<ul class="pagination">
<li>
Prev
</li>
<li v-for="n in 5">
{{n}}
</li>
<li>
Next
</li>
</ul>
</div>
<div class="col-md-4 column">
<button class="btn btn-default" type="button">button</button>
</div>
</div>
</div>
<script>
'use strict';
console.log("here we go!");
var tab = new Vue({
el: '#mytable',
data: {
items: ['aa','bb']
}
});
</script>
</body>
</html>
And the appearance was like:
Replace
v-for:"term in items"
With
v-for="term in items"

how to send data from angularjs to server distant using ngresouce

how to use ngResource module
to send data to server.
and get data from server
i trying to send data to solr server
using angularjs api
and npm package manager to install package to my application
thank you for your help
controller.js:
var app=angular.module('myApp', ['ngResource']);
app.controller('Mycontroller',function($scope, $resource) {
$scope.requete = $resource('http://localhost:8983/solr/#/cv/:action',
{action:'cv.json', q:'angularjs', callback:'JSON_CALLBACK'},
{get:{method:'JSONP'}});
$scope.chercher = function () {
$scope.repnses = $scope.requete.get({q:$scope.formInfo.Quoi});
};
})
search.html :client
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body >
<div ui-view></div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Formation</a>
<a class="navbar-brand" href="app/index.html">Formateur</a>
<a class="navbar-brand" href="app/search.html" active>Client</a>
</div>
</div>
</nav>
<div ng-contoller="Mycontroller">
<form class="form-horizontal" role="form">
<div class="table">
<table class="table table-striped">
<tr>
<td>
<label for="inputQuoi" class="col-sm-2 control-label">Quoi</label>
</td>
<td></td>
</tr>
<tr>
<td>
<input class="form-control" id="inputQuoi" placeholder="quoi" ng-model="formInfo.Quoi" required>
</td>
<td><button type="submit" ng-click="chercher()" class="btn btn-primary" >chercher</button></td>
</tr>
</table>
</div>
</form>
<table class="table table-striped">
<tr ng-repeat="repnse in reponses.results">
<td>{{requete.text}}</td>
</tr>
</table>
</div>
<script src="app/js/controller.js"></script>
<script src="node_modules/angular-resource/angular-resource.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</body>
</html>
Not sure if this is your problem.
But you have this...
<tr ng-repeat="repnse in reponses.results">
<td>{{requete.text}}</td>
</tr>
But dont really have any variable called reponses.results, or anything with requete as the variable.
Your code puts the get response in $scope.repnses
So to loop through that you need to refer to it properly.
<tr ng-repeat="repnse in repnses.results">
// Then refer to the variables inside of it using the repnse variable.
// not requet, dont even know where you're getting that from
<td>{{repnse.text}}</td>
</tr>

Categories