I created a function and set a get method to receive all the data from my table.
However I can't display images on browser. I have tried all the "solutions" but nothing seems to work.
This is what I currently have
<tbody>
<tr *ngFor="let obj of dataArr">
<td>{{obj.name}}</td>
<td>{{obj.price}}</td>
<td>
<img src="data:image/png;base64,{{obj.img}}"/>
</td>
</tr>
</tbody>
Name and price are displayed fine.
This is the data that I receive when I console log:
0: {id: 2, name: "nesto", price: "6", img: "ÿØÿàJFIFÿáExifII*ÿá…"QD¢%(DJ"QD¢%(DJ"QD¢%(DJ"QD¢/ÿÙ"}
Probably you're looking for this:
<img src="data:image/png;base64,{{
btoa(obj.img) /* or window.btoa(obj.img) try both */
}}"/>
I advise you to create a route which retrieves the file from database:
// routes.php
Route::get('files/{record_id}', function($record_id){
$Model = \EloquentModel::firstOrFail($record_id, ['img']);
return response($Model->img)->header('Content-Type', 'image/png');
});
// angular file
<img src="/files/{{ obj.id }}">
Related
I am both new to flask and posting here.
I am trying to query a MySQL database with a variable input from HTML to Flask.
If I fix the query from the python code, it works. However, trying to query my database using the input variable doesn't give any result.
Here is my HTML code for the input variable :
<div class="search">
<form action="{{ url_for('search') }}" method="POST">
<input type=text name="search"></br>
<div class="actions"><input type=submit value="Search"></div>
</form>
</div>
Here is the python code for the search query:
#app.route('/search', methods=["POST" , "GET"])
def search() :
if request.method == "POST" :
search = request.form["search"]
cursor=mysql.connection.cursor(MySQLdb.cursors.DictCursor)
cursor.execute( '''SELECT * FROM sites WHERE SITE_CODE=(%s)''', (search,))
data=cursor.fetchall()
return render_template("search.html", data=data , search=search )
else :
return render_template("search.html")
here is the jinja2 code for the output :
<table>
<td>Site Code</td>
<td>OM VLAN id</td>
<td>IuB VLAN id</td>
<td>Abis VLAN id</td>
<td>S1X2 VLAN id</td>
</tr>
{% for sites in data %}
<tr>
<td>{{sites.SITE_CODE}}</td>
<td>{{sites.OM_VLAN_id}}</td>
<td>{{sites.IuB_VLAN_id}}</td>
<td>{{sites.Abis_VLAN_id}}</td>
<td>{{sites.S1X2_VLAN_id}}</td>
</tr>
{% endfor %}
</table>
I have a fully ready to use database(I do not have to change anything in it, I just need to query searched data from it) note that everything is working fine when I try to show all the data from the table :
#app.route("/")
#app.route('/IP_PLAN',methods=['GET','POST'])
def IP_PLAN():
cursor=mysql.connection.cursor(MySQLdb.cursors.DictCursor)
cursor.execute("SELECT * FROM sites")
data=cursor.fetchall()
return render_template("IP_PLAN.html",data=data)
UPDATE:
everything actually works, I just need to type the exact name of the "SITE_CODE". is there any way to get a result without doing it? I want to get as an output all the sites that contain an A in their SITE_CODE for example.
Thanks
UPDATE 2:
I finally achieved what I wanted to do, I just had to change the cursor.execute command :
cursor.execute( 'SELECT * FROM sites WHERE SITE_CODE LIKE %s', ['%' + search + '%'])
I want to cut a string (it's in an object) in 3 words (after "-"), my application is developed with reactJS, how to fixed this problem ?.
I want to return the line after "-".
NOTE: data is defined and displayed, but i want cut the String (name) after "-"
I want to display the channel like this :
tst ab
deb
azerty bla
problem :
TypeError: Cannot read property 'split' of undefined
object :
email: "tst#gmail.com"
idclient: 74
name: "tst ab - deb - azerty bla"
poste: "PDG"
soct: "entrp"
phone: "1111111"
mypage front :
....
<tr>
<td><i class="fas fa-user"></i> Name</td>
<td> {this.state.clientById.name.split(' - ')} </td>
</tr>
The error might be during the initial render where this.state.clientById might not have name property. If the optional chaining is allowed in your application, you can use the following snippet:
<td> {this.state?.clientById?.name?.split(' - ').join('\n')} </td>
Solution without optional chaining, just in case:
<td> { this.state.clientById
&& this.state.clientById.name
&& this.state.clientById.name.split(' - ').join('\n')
}
</td>
name.split('-') will return an array so you need to store in variable and iteration it
Your component may be rendering before the state is initialized and at that time this.state.clientById.name may still be undefined, try adding a check bofore executing the split like this.
<td> {
this.state.clientById &&
this.state.clientById.name &&
this.state.clientById.name.split(' - ')
}
</td>
This will make sure that this.state.clientById.name is defined before trying to split it.
This issue is occurring due to empty or null property "name" in "clientById". If we try to call split on undefined it will give error.
Try this one to get desired output. It will work in all browser.
<td> {this.state.clientById && this.state.clientById.name && this.state.clientById.name.split(' - ').map(item => {
return (<div> {item} </div>)
} </td>
I have a table from which I have the representation of data that gets updated every 10 seconds or so, represented by the "current" list. As you can see in the code snippet below, the two ng-show's depend on the Status value of an object. I know that the list is getting updated with new values, so that the second ng-show should be showing and not the first, but it only updates when I refresh the page, not automatically. Shouldn't the ng-show's get updated automatically when the value of the Status field of the object gets changed?
<table>
<tr ng-repeat="object in current">
<td>Name: {{object.Name}} <br /> Status: {{object.StatusMessage}}<br /> ID: {{object.ID}} <br /> User: {{object.UserName}}</td>
<td>
<div ng-show="object.Status == 2 || object.Status == 3">
<img ng-src="{{getScreenshot(object.Name)}}" style="width: 500px; height: 300px">
</div>
<div ng-show="object.Status < 2 || object.Status > 3" style="font-size: large; font-weight: bold">
Screenshot not available.
</div>
</td>
</tr>
</table>
You can apply AngularJS $digest() function.
For more information about $digest() function go to AngularJS $watch() , $digest() and $apply()
You need to modify your controller code to something like this:
var app = angular.module('test', []);
app.controller('TestCtrl', function ($scope) {
$scope.testValue = 0;
setInterval(function() {
console.log($scope.testValue++);
$scope.$apply()
}, 500);
});
Jsfiddle: Link
I have json data in controller as response. I have to print that data in html.
for that I have done as below:
In my controller
.controller('DataImportControl', ['$scope','$http', '$location', '$rootScope' , function($scope, $http, $location, $rootScope) {
console.log(" In dataimportCtrl");
$scope.readCustomer = function(){
console.log("in read customer");
$http.post('/custimport').success(function(response) {
console.log("in controller");
console.log("controller:"+response);
$scope.data=response;
}).error(function(response) {
console.error("error in posting");
});
};
}])
My html code:
<html>
<head>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="DataImportControl">
<form ng-submit="readCustomer()">
<button type="submit" >Submit</button>
</form>
<table class="table">
<thead>
<tr>
<th>Code exists in customer master</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cust in data ">
<td>{{cust.customer_code}}</td>
</tr>
</tbody>
</table>
</div>
<div >
</div>
</body>
</html>
My json data as response in controller :
{"jarray":[{"customer_name":["Ankita"],"customer_code":["c501"]}]}
My question is how to print json data in html using ng-repeat in my case?
Thanks in advance...
I'm assuming you want to print out the actual object, in that case just do
{{cust | json}}
Wrap it in pre tags to have it prettified.
The data being returned from your service is strangely formatted. I would assume you have multiple records being returned, but you are only showing one in this example.
The record you are showing here is an object, with an array as one of the properties. It is not clear if your object has multiple arrays, or if this array has multiple customer objects embedded in it. However, I worked up a quick plunker showing how to iterate through in both situations.
first, if you intend to iterate through data directly, and data will hold multiple arrays, you would use the (key, value) syntax, since data itself is an object and not an array.
<div ng-repeat="(key, value) in data">
key: {{key}}
<br/>value: {{value}}
<div ng-repeat="customer in value">
Customer name: {{customer.customer_name}}
<br/>Customer code: {{customer.customer_code}}
</div>
</div>
However, if your data is only returning a single object property, jarray, and you will always be iterating through this same property, the outer ng-repeat is unnecessary:
<div ng-repeat="customer in data.jarray">
Customer name: {{customer.customer_name}}
<br/>Customer code: {{customer.customer_code}}
</div>
you may want to clean up your service, either in angular or on your server, and remove jarray all together, if it doesn't hold a specific significance to the data.
http://plnkr.co/edit/Nq5Bo18Pdj4yLQ13hnrJ?p=preview
I have the following contoller in my app :
angular.module('myApp.controllers', []).
controller('ClientesController', [ '$scope', '$rootScope', 'Clientes',
function($scope, $rootScope, Clientes) {
$rootScope.clientes;
Clientes.query(function(response) {
$rootScope.clientes = response;
})
}]);
Which returns a JSON object with the following format :
[{"idCliente":1,
"nomeFantasia":"Flores",
"razaoSocial":"Transportes Flores Ltda.",
"contatosClientes":
[
{"idContatoCliente":1,
"dddCelular":21,
"email":"ljames#cavaliers.com"},
{"idContatoCliente":2,
"dddCelular":21,
"email":"test#cavaliers.com"}
]
}]
And a template which tries to parse the JSON with ng-repeat :
<tr ng-repeat="cliente in clientes | filter:searchText">
<td>{{cliente.idCliente}}</td>
<td>{{cliente.razaoSocial}}</td>
<td>{{cliente.nomeFantasia}}</td>
<td>{{cliente.contatosClientes.email}}</td>
<td>
<div class="right floated ui green icon buttons">
<div class="ui button">Editar</i></div>
</div>
</td>
</tr>
The problem is that I can access the outer keys (idCliente,razaoSocial, etc) with the object.key sintaxe, but I can't access the inner keys (contatosClientes.email, for example) in the nested array.
I've tried many approaches and I am starting to think that is something wrong with my REST API, but before change all my backend code I would like to know if someone can help me with this issue.
Best regards,
Antonio Belloni
contatosClientes is an array, you'll have to do ng-repeat for that too, for example:
<tr ng-repeat="cliente in clientes | filter:searchText">
<td>{{cliente.idCliente}}</td>
<td>{{cliente.razaoSocial}}</td>
<td>{{cliente.nomeFantasia}}</td>
<td ng-repeat="contato in cliente.contatosClientes>{{contato.email}}</td>
<td>
<div class="right floated ui green icon buttons">
<div class="ui button">Editar</i></div>
</div>
</td>
</tr>