I need help, I have an api and access key. "https://api-redemet.decea.mil.br/mensagens/metar/SBKP?api_key=XXXXX". When I call right into the browser it returns the information in Json.
I need to get a tag from the return calls "mens": that returns this updated data from hourly "METAR SBKP 290100Z 13012KT CAVOK 18/14 Q1020="
A friend helped me with another API of the same style where he created a local html capturing some tags.
Html that i use today.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Metar</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
$.ajaxSetup({ cache: false });
setInterval(function() {
$.getJSON('https://api.radarbox.com/v2/airports/SBKP/metar', { bearerToken: "XXXXXXXX" })
.done(function(data) {
var text = `<table>
<tr style="background-color: #C4C4C4">
<td><span style="color: rgb(255, 255, 0);"><strong>Metar SBKP ${data.apiMetar.observationTime}</strong></span></td>
</tr>
</table>`
$(".mypanel").html(text);
});
}, 9000);
});
</script>
</head>
<body>
<div class="mypanel"></div>
</body>
</html>
The new API returns:
{"status":true,"message":200,
"data":
{"current_page":1,
"data":[{"id_localidade":"SBKP","validade_inicial":"2021-04-29 01:00:00","mens":"METAR SBKP 290100Z 13012KT CAVOK 18\/14 Q1020=","recebimento":"2021-04-29
I need get this information "mens": "METAR SBKP 290100Z 13012KT CAVOK 18/14 Q1020="
and write to html changing ${data.apiMetar.observationTime}
Other question, first Api use bearerToken and the new?
Api Information --> https://ajuda.decea.mil.br/base-de-conhecimento/api-redemet-mensagem-metar/
Tks for Help
Assume this is your JSON object
{
"status":true,
"message":200,
"data":
{
"current_page":1,
"data":[{
"id_localidade":"SBKP",
"validade_inicial":"2021-04-29 01:00:00",
"mens":"METAR SBKP 290100Z 13012KT CAVOK 18\/14 Q1020=",
"recebimento":"2021-04-29
}]
}
The updated code should be something like this:
$.getJSON('https://api.radarbox.com/v2/airports/SBKP/metar', { bearerToken: "XXXXXXXX" })
.done(function(data) {
var text = `<table>
<tr style="background-color: #C4C4C4">
<td><span style="color: rgb(255, 255, 0);"><strong>Metar SBKP ${data.data[0]['mens']}</strong></span></td>
</tr>
</table>`
$(".mypanel").html(text);
});
Thanks for the help. I'm not a developer so I get caught up with it kkkkkkkk
I changed my HTML with this call but does not display anything. I don't know if I'm passing the right call from api_key the old one was:
$.getJSON('https://api.radarbox.com/v2/airports/SBKP/metar', { bearerToken: "ac3e1a8bXXXXXXX" }) and the new one from what I saw informs you directly in the URL , may be that I'm informing wrongly, I'm informing thus: $.getJSON(https'api-redemet.decea.mil.br/mensagens/metar/SBKP?api_key=FEG1OXXXXXXXX'})
Html is now:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Metar</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
$.ajaxSetup({ cache: false });
setInterval(function() {
$.getJSON('https://api-redemet.decea.mil.br/mensagens/metar/SBKP?api_key=FEG1OXXXXXX'})
.done(function(data) {
var text = `<table>
<tr style="background-color: #C4C4C4">
<td><span style="color: rgb(255, 255, 0);"><strong>Metar SBKP ${data.data[0]['mens']}</strong></span></td>
</tr>
</table>`
$(".mypanel").html(text);
});
}, 1000);
});
</script>
</head>
<body>
<div class="mypanel"></div>
</body>
</html>
Related
After several hours of research on google, I have not managed to find a tutorial that shows how to use vue.js to display the result of a sql query (for example SELECT in my case). I come to you because i need to know how i can retrieve and display the data back by the spring findAll () method in an html page with framwork vue.js.
Thank you in advance for your help.
Here is the html file in which I would like to display the data:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>List of school</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="test">
<h1>Result</h1>
<tr>
<td/>ID</td>
<td/>Description</td>
</tr>
<tr v-for="item in panier">
<td>{item.id}</td>
<td>{item.description}</td>
</tr>
</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.10/vue.min.js"></script>
<script>
new Vue({
el: '#test',
data: {
panier: [
{ id: "1", description: "University"},
{ id: "2", description: "high school"}
],
}
});
</script>
</body>
</html>
The problem I do not know how to fill my basket with the data returned by the findAll () method of spring.I specify that this method returns me the data in JSON format. Like this :
{
id:1,
description:"University"
}
{
id:,
description:"University"
}
Here is my getAllType method :
#RequestMapping(value= "/getAllTypes", method = RequestMethod.GET)
public #ResponseBody Collection<Type> getAllTypes() {
return this.typeService.getAllTypes();
}
Please if possible with an example of how I should proceed.
I am getting the JSON object back TO the HTML request (I am using GlassFish on localhost just to demo). I am not, however, able to display any of my JSON objects. (I am a rookie when it comes to HTML.)
Here is my attempt at HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<title>Dss</title>
<script>
function onSubmit() {
alert(document.getElementById('text').value);
$.ajax({
url: 'rest/dss/acceptInput',
type: 'GET',
dataType: 'jsonP',
data: {'UserInput': document.getElementById('text').value },
statusCode: {
200: function(data) {
alert(data);
$.each( data.items, function(item ) {
alert(item.Type);
$( "<p>" ).attr( "value", item.Type ).appendTo( "#Test" );
});
},
404: function() {
alert("Page NOT found");
}
},
done: function(data) {
alert("NOPE" + data);
$.each( data.items, function(item ) {
alert(item.Type);
$( "<p>" ).attr( "value", item.Type ).appendTo( "#Test" );
});
}
});
alert("at the end");
};
</script>
</head>
<body style="background-color:black;">
<img src="http://i.imgur.com/97.png" alt="DSS_Thumbnail" style="display: inline;width:120px;height:120px;">
<h1 style="display: inline;color:rgb(241,85,50)">Search for details:</h1>
<br>
<input id="text" type="text" name="UserInput" value="Enter search criteria">
<br>
<button id="submit" onclick="onSubmit()" type='button'>Submit</button>
<br><br>
<div id="Test"></div>
</body>
</html>
I run this in the Chrome browser, and the alerts show me the object Object returns within the status code 200. I am not sure HOW to display this information... I thought I had it, but I have tried for a few hours.
After running the HTML I receive these acknowledgements:
Initial acknowledgement of input:
Acknowledgement of finish:
Displaying the object after status code 200 received:
I understand that it is asynchronous which is why I would get them out of order, but what do I do with said object Object?
What do i have to add to the HTML file to display the JSON to the current page? (Or even populate a new page with the information on it?)
I'm trying to create a single page app (using ng-sho and ng-hide) displaying buildings. Currently, my code looks like this
index.html
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
<title>Happy Building Company</title>
</head>
<body ng-controller="MainCtrl">
<!--BUILDING DIRECTORY-->
<div id="directory" class="mainDiv" ng-show="buildingDirVisible">
<form>
<fieldset>
<legend>Building Directory</legend>
<div id="directoryTable" style="overflow-x:auto;">
<table class="table table-responsive" id="dirtable">
<tr>
<th>Building ID</th>
<th>Owner</th>
<th>Address</th>
<th>View</th>
</tr>
<tr class="rowHover" ng-repeat="item in buildings" >
<td> {{item.ID}}</td>
<td> {{item.Owner}}</td>
<td> {{item.Address}}</td>
<td> <button type="button" value="View Building" ng-click="viewBuilding()">View Building</button></td>
</tr>
</table>
</div>
app.js
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.name = 'Happy Building Company';
$scope.buildings = null;
$scope.target1 = '/building_dir.json';
$scope.building = $http.get($scope.target1)
.then(
function successCall(response) {
$scope.buildings = response.data.buildings;
},
function errorCall(response) {
$scope.feedback = "Error reading building directory";
$scope.buildings = null;
}
);
//View Building - NEED TO WORK OUT HOW TO SPECIFY TO A BUILDING
$scope.viewbuilding = function(){
$scope.buildingDirVisible = false;
$scope.buildingFormVisible = true; // Building form visible
};
building_dir.json
{"buildings":[{"ID":"123",
"Owner":"Joe Doe",
"Address":"20 Lambton Quay",
"BuildingType":null,
"ConstructionDate":"0001-01-01T00:00:00"
},
{"ID":"222",
"Owner":"John Smith",
"Address":"20 Dixon Street",
"BuildingType":null,
"ConstructionDate":"0001-01-01T00:00:00"
}]}
I am trying to have it so that when you select View Building in the table in the building directory that the buildingDirVisible div is hidden and another div is opened displaying information only related to that building ID (ie. Building ID 222's Building Type and Construction date). Currently, my app switches between the divs using show and hide but does not display data specific details. My understanding is that I will have to develop a for loop to iterate through the JSON file and then display buildings that match the building ID. I am relatively new to angular js so any help would be hugely appreciated! Thanks!!
Some observations as per your code review :
$scope.viewbuilding = function() { ... } should be $scope.viewBuilding = function() { ... } as in view we are triggering viewBuilding not viewbuilding.
Div having buildingFormVisible is not available in the view where you want to display the data specific to building ID that you selected from the table.
Your approach is correct !!
You can loop to iterate through the buildings JSON and then display buildings that match the building ID.
For this approach, you can use Array.filter() method with ES6 Arrow operator.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.buildingDirVisible = true;
$scope.buildingFormVisible = false;
$scope.buildings = [{"ID":"123",
"Owner":"Joe Doe",
"Address":"20 Lambton Quay",
"BuildingType":null,
"ConstructionDate":"0001-01-01T00:00:00"
},
{"ID":"222",
"Owner":"John Smith",
"Address":"20 Dixon Street",
"BuildingType":null,
"ConstructionDate":"0001-01-01T00:00:00"
}];
//View Building - NEED TO WORK OUT HOW TO SPECIFY TO A BUILDING
$scope.viewBuilding = function(itemID) {
$scope.buildingDirVisible = false;
$scope.buildingFormVisible = true; // Building form visible
var record = $scope.buildings.filter(item => { return item.ID == itemID });
$scope.buildingDetail = record[0];
};
});
table,tr,th,td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table class="table table-responsive" id="dirtable" ng-show="buildingDirVisible">
<tr>
<th>Building ID</th>
<th>Owner</th>
<th>Address</th>
<th>View</th>
</tr>
<tr class="rowHover" ng-repeat="item in buildings" >
<td> {{item.ID}}</td>
<td> {{item.Owner}}</td>
<td> {{item.Address}}</td>
<td> <button type="button" value="View Building" ng-click="viewBuilding(item.ID)">View Building</button></td>
</tr>
</table>
<div ng-show="buildingFormVisible">
<p>Building ID : {{buildingDetail.ID}}</p>
<p>Building ID : {{buildingDetail.Owner}}</p>
<p>Building ID : {{buildingDetail.Address}}</p>
<p>Building ID : {{buildingDetail.ConstructionDate}}</p>
</div>
</div>
i want to use the bootstrap-table library from wenzhixin (http://bootstrap-table.wenzhixin.net.cn/) but my skills seem not be as good enough that i can get the script running.
I want the table to be supplied with data via ajax.
Here's the code which works (example from the source page):
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>SL Time</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Table -->
<link href="css/bootstrap-table.css" rel="stylesheet">
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap Table -->
<script src="js/bootstrap-table.js"></script>
<script src="js/bootstrap-table-de-DE.js"></script>
</head>
<body>
<div class="container">
<table id="table"
data-toggle="table"
data-height="460"
data-search="true"
data-ajax="ajaxRequest"
data-side-pagination="server"
data-pagination="true">
<thead>
<tr>
<th data-field="nummer">Nummer</th>
<th data-field="name">Name</th>
</tr>
</thead>
</table>
</div>
<script>
// your custom ajax request here
function ajaxRequest(params) {
// data you need
console.log(params.data);
// just use setTimeout
setTimeout(function () {
params.success({
total: 100,
rows: [{
"nummer": 0,
"name": "Item 0",
}]
});
}, 1000);
}
But i want the data coming from my page "ajax_loader.php" which looks like this:
<?php
$data=array();
array_push($data, array('nummer' => '1', 'name' => 'daniel'));
array_push($data, array('nummer' => '2', 'name' => 'thomas'));
echo json_encode($data);
?>
But how do i get the following piece of code get to fill the table (as the sample function does):
$.ajax({
type: "POST",
url: "ajax_loader.php",
data: "user-id=1",
success: function(data) {
// At this position my knowledge ends ;-(
}
});
Can anyone help me, get the thing working?
Best regards
Daniel
The documentation is your friend ^^ (moreover with an example : http://issues.wenzhixin.net.cn/bootstrap-table/index.html#options/custom-ajax.html).
Seriously, here is the solution :
The HTML :
<div class="container">
<table id="table"
data-toggle="table"
data-height="460"
data-search="true"
data-ajax="ajaxRequest"
data-side-pagination="server"
data-pagination="true">
<thead>
<tr>
<th data-field="nummer">Nummer</th>
<th data-field="name">Name</th>
</tr>
</thead>
</table>
</div>
The script :
// your custom ajax request here
function ajaxRequest(params) {
// data you may need
console.log(params.data);
$.ajax({
type: "POST",
url: "ajax_loader.php",
data: "user-id=1",
// You are expected to receive the generated JSON (json_encode($data))
dataType: "json",
success: function (data) {
params.success({
// By default, Bootstrap table wants a "rows" property with the data
"rows": data,
// You must provide the total item ; here let's say it is for array length
"total": data.length
})
},
error: function (er) {
params.error(er);
}
});
}
params.success is function! You need more params, like this
function ajaxRequest(params) {
$.ajax({
type: "POST",
url: "/gruzin/getdb",
success: function (data) {
console.log(data);
params.success({
"rows": data,
"total": data.length
},null,{});
},
error: function (er) {
params.error(er);
}
});
}
My PHP is working fine and I appear to be getting back the correct JSON data for FLOT, but I'm still getting a blank chart :-/
Here's the PHP:
foreach($result as $row) { //or whatever
$dataset1[] = array((int) $row['INDX'], (int) $row['RUNTIME'] );
}
echo json_encode($dataset1);
Here's a sample of the JSON it returns:
[[31,2303],[113,5697],[201,4485],[151,4404],[192,2668],[84,1082],[13,6003],[68,3628],[12,2115]]
Here's the function to plot:
$(function () {
$.plot($("#dashboard_div"), apudata);
console.log(apudata);
});
The console log shows correctly formatted JSON as above. I can cut and paste from the console log into a literal variable for that function and it works, but passing the JSON as a variable doesn't.
Ideas?Help?
Try using the code below. Set the 1000 (ms) interval to however often you want the graph to update. This is simply (very slightly edited) code from one of my previous posts that I put in the comments.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AJAX FLOT</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script>
</head>
<body>
<div id="placeholder" style="width: 100%;height: 600px;"></div>
<div id="div" style="width: 100%; height: 100px;"></div>
<script type="text/javascript">
var options = {
lines: {
show: true
},
points: {
show: true
},
xaxis: {
mode: "time"
}
};
window.setInterval(function(){
$.getJSON('http://localhost/data.php', function (csv) {
dataOne = csv;
var plot = $.plot($('#placeholder'), [dataOne], options);
});
}, 1000);
</script>
</html>
Not sure if it matters, but the flot docs say to just pass the selector as a string to $.plot(), and not a jQuery object. So instead of
$.plot($('#dashboard_div'), apudata);
try
$.plot('#dashboard_div', apudata);