Develop Reference

how can i fetch data json from api to Web app page html

I want to fetch all Jason data into a table
How can i do that?
i write code javascript to get json data from my api, but i can't fetch all data like "category" "name" "value" to table in page html !!
api json :
[
{ "allinfo":[
{
"category": "category1",
"info": [{
"name": "Tech1",
"value": "1575"
},
{
"name": "tech2",
"value": "a-25"
}
]
},
{
"category": "category2",
"info": [{
"name": "Announced",
"value": "2022"
},
{
"name": "Status",
"value": "Coming soon"
}
]
},
{
"category": "category3",
"info": [{
"name": "with",
"value": "163.3 cm"
},
{
"name": "Weight",
"value": "500 g"
}
]
}]
}]
code javascript :
$.getJSON('https://myapi', function(data) {
console.log(data);
$.each(data, function(index, value) {
console.log(value);
var category = value.allinfo.category;
var name = value.allinfo.info.name;
var value = value.allinfo.info.value;
$('.output').append('<div class="cont"><h3>' + category + '</h3><table><tbody><tr><td>'+ name +'</td><td>' + value + '</td></tr></tbody></table></div>');});});
html :
<div class="output"></div>
output html:
<div class="cont">
<h3>undefined</h3>
<table>
<tbody>
<tr>
<td>undefined</td>
<td>undefined</td>
</tr>
<tr>
<td>undefined</td>
<td>undefined</td>
</tr>
</tbody>
</table>
</div>
i want to be like this :
<div class="cont">
<h3>category1</h3>
<table>
<tbody>
<tr>
<td>Tech1</td>
<td>1575</td>
</tr>
<tr>
<td>tech2</td>
<td>a-25</td>
</tr>
</tbody>
</table>
</div>
<div class="cont">
<h3>category2</h3>
<table>
<tbody>
<tr>
<td>Announced</td>
<td>2022</td>
</tr>
<tr>
<td>Status</td>
<td>Coming soon</td>
</tr>
</tbody>
</table>
</div>
<div class="cont">
<h3>category3</h3>
<table>
<tbody>
<tr>
<td>with</td>
<td>163.3 cm</td>
</tr>
<tr>
<td>Weight</td>
<td>500 g</td>
</tr>
</tbody>
</table>
</div>
How can i do that?
I appreciate your help

Here is a short way of doing the whole thing in one expression:
const da=[{ "allinfo":[
{"category": "category1",
"info":[{"name":"Tech1","value":"1575"},
{"name":"tech2","value": "a-25"}]},
{"category": "category2",
"info":[{"name": "Announced","value": "2022"},
{"name": "Status","value": "Coming soon"}]},
{"category": "category3",
"info":[{"name": "with","value": "163.3 cm"},
{"name": "Weight","value": "500 g"}]}
]}];
document.querySelector("div.cont").innerHTML=da[0].allinfo.map(cat=>
`<h1>${cat.category}</h1>
<table><tbody>${cat.info.map(r=>
`<tr><td>${r.name}</td><td>${r.value}</td></tr>`).join("")}
</tbody></table>`).join("\n")
td {border:1px solid grey; width:100px}
table{border-collapse:collapse}
<div class="cont"></div>
There are two (nested) .map()s looping over
da[0].categories for all tables using cat for each category and
cat.info for all records r in one category
The output of each map() is .join()-ed and the resulting string is assigned to the first encountered div.cont's .innerHTML.

You can access your Obj properties like this:
To get category:
var cat = value[0].allinfo[1].category
console.log(cat) //category2
To get info:
var name = value[0].allinfo[1].info[0].name
console.log(name) //announced
Pay attention: to your variable names, it appears that you name all variables as "name"!

I need to store an html input value in a javascript variable and show it in a table

I have the following variable in js:
var targetInput = {
name: "1",
targetTemperature: "20",
targetHumidity: "48",
targetLight: "1000",
targetSoil: "750"
}
I have a table in html, from where I want to update this variable:
<tr>
<th>Tube 1</th>
<th>Temperature: <input id="temp" value="" type="number"></th>
<th>Humidity: <input id="humi" value="" type="number"></th>
<th>Light: <input id="light" value="" type="number"></th>
<th>Soil: <input id="soil" value="" type="number"></th>
<th><button onclick="newTarget()">Send</button></th>
</tr>
In my javascript I have tried to update the variable with this function:
function newTarget(){
targetInput.targetTemperature = document.getElementById('temp').value
targetInput.targetHumidity = document.getElementById('humi').value
targetInput.targetLight = document.getElementById('light').value
targetInput.targetSoil = document.getElementById('soil').value
console.log(targetInput);
addTableData();
}
The console.log works, the new values get shown. But then I try to show the data in a table, in a different html file:
<table class="table" id="target">
<tr>
<th>Tube number</th>
<th id="number"></th>
</tr>
<tr>
<th>Target temperature</th>
<th id="temperatureTable"></th>
</tr>
<tr>
<th>Target humidity</th>
<th id="humidityTable"></th>
</tr>
<tr>
<th>Target soil moisture</th>
<th id="soilTable"></th>
</tr>
<tr>
<th>Target light</th>
<th id="lightTable"></th>
</tr>
</table>
I show the data from the first variable with this code:
function addTableData(){
document.getElementById("number").innerHTML = targetInput.name;
document.getElementById("temperatureTable").innerHTML = targetInput.targetTemperature;
document.getElementById("humidityTable").innerHTML = targetInput.targetHumidity;
document.getElementById("lightTable").innerHTML = targetInput.targetLight;
document.getElementById("soilTable").innerHTML = targetInput.targetSoil;
console.log("table data added");
}
I call this funtion at the end of my newTarget function, when the new data is added. The table however still shows the old data, not what I just added. How can I fix this?

you can use a different method to resolve your problem ( edit the target input and reCreate the table )
mothod 1 :
<table class="table" id="target">
<thead>
<tr>
<th>Tube number</th> <%-- Add the other Columns here --%>
</tr>
</thead>
</table>
<script>
function setTableValues ()
{
var Tbody = '<tr>'+
' <tbody>'+
'<th>'+targetInput.name+'</th>'+/// add the other columns
'</tbody>';
document.getElementById("target").innerHTML = Tbody;
}
</script>
method 2 :
you can user a DataTable of JQuery or Bootstrap ....
like this :
<table class="table" id="target">
</table>
<script>
var targetInputs = [{name: "1",
targetTemperature: "20",
targetHumidity: "48",
targetLight: "1000",
targetSoil: "750"
}]; /// you add other target
$('#target').DataTable({
data: targetInputs ,
"columns": [
{ "title": "Tube number", "data": "name" },
{ "title": "Target temperature", "data": "targetTemperature"},
{ "title": "Target humidity", "data": "targetHumidity" },
{ "title": "Target soil moisture", "data": "targetLight" },
{ "title": "Target light", "data": "targetSoil" }
],
});
</script>

You can change the key names in targetInput to match the input ids. Then, when the button is clicked, you can iterate over each input tag and update the input value from targetInput by using the id:
function newTarget(){
var targetInput = {
name: "1",
temp: "20",
humi: "48",
light: "1000",
soil: "750"
}
$('input').each(function(){
$(this).val(targetInput[$(this).prop('id')]);
});
}

Duplicated form after click button add

Anybody help me, I have these working code currently:
HTML:
<body ng-controller="ExampleCtrl">
<label>Category:</label>
<select ng-model="product.category" ng-options="category as category.name for category in categories"></select>
</label><br/><br />
<table class="table" ng-repeat="attr in product.category.templateAttribute">
<thead>
<tr>
<th colspan="4">{{attr.attribute}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input value="{{attr.attribute}}" />
</td>
<td>
<input placeholder="name" ng-model="product.attributes[attr.attribute].name" />
</td>
<td>
<input placeholder="additional price" ng-model="product.attributes[attr.attribute].additionalPrice" />
</td>
<td rowspan="2">
<button type="button" ng-click="addItem(product.category.templateAttribute, attr)">
add
</button>
</td>
</tr>
<tr>
<td colspan="3">
<input type="file" class="form-control" ng-model="product.attributes[attr.attribute].file"/>
</td>
</tr>
</tbody>
</table>
JS
function ExampleCtrl($scope){
$scope.categories = [
{
name:'custom',
templateAttribute: [
{attribute: 'material'},
{attribute: 'soles'},
{attribute: 'size'}
]
}
];
$scope.products = [
{
name: 'custom',
category: {
name:'custom',
templateAttribute: [
{
type: "string",
attribute: "material"
},
{
type: "string",
attribute: "soles"
},
{
type: "string",
attribute: "size"
}
]
}
}
];
// add menu item
$scope.addItem = function(list, item){
list.push(angular.copy(item));
item = {};
};
// remove menu item
$scope.removeItem = function(list, index){
list.splice(index ,1);
};
}
angular
.module('app', [])
.controller("ExampleCtrl", ExampleCtrl)
For a demo :
Seet Demo
My problem is when I fill out one form above and click on the add button, it will display a new form, but that form always has the same value. How to fix my problem?

item should be defined as {} before pushing in list array.
If you do not want to send any model data through view then there is no point of sending attr argument to controller
Try this:
// Code goes here
function ExampleCtrl($scope) {
$scope.categories = [{
name: 'custom',
templateAttribute: [{
attribute: 'material'
}, {
attribute: 'soles'
}, {
attribute: 'size'
}]
}];
$scope.products = [{
name: 'custom',
category: {
name: 'custom',
templateAttribute: [{
type: "string",
attribute: "material"
}, {
type: "string",
attribute: "soles"
}, {
type: "string",
attribute: "size"
}]
}
}];
// add menu item
$scope.addItem = function(list, item) {
item = {};
list.push(angular.copy(item));
};
// remove menu item
$scope.removeItem = function(list, index) {
list.splice(index, 1);
};
}
angular
.module('app', [])
.controller("ExampleCtrl", ExampleCtrl)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="ExampleCtrl">
<h3>How to fix this</h3>
<p>My problem is when I fill out one form above and click on the add button, it will display a new form, but that form always has the same value. Demo:</p>
<label>Category:
<select ng-model="product.category" ng-options="category as category.name for category in categories"></select>
</label>
<br/>
<br />
<table class="table" ng-repeat="attr in product.category.templateAttribute">
<thead>
<tr>
<th colspan="4">{{attr.attribute}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input value="{{attr.attribute}}" />
</td>
<td>
<input placeholder="name" ng-model="product.attributes[attr.attribute].name" />
</td>
<td>
<input placeholder="additional price" ng-model="product.attributes[attr.attribute].additionalPrice" />
</td>
<td rowspan="2">
<button type="button" ng-click="addItem(product.category.templateAttribute, attr)">
add
</button>
</td>
</tr>
<tr>
<td colspan="3">
<input type="file" class="form-control" ng-model="product.attributes[attr.attribute].file" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
Codepen demo

How to hide table column if all json value is null for any property using angular js

Plunker sample
How to hide table column if all json value is null for any property
using angular js
index.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.isArray = angular.isArray;
$scope.data = [{
"Id": null,
"Title": "US",
"Description": "English - United States",
"Values": [{
"Id": 100,
"LanId": 1,
"KeyId": 59,
"Value": "Save"
}]
}, {
"Id": null,
"Title": "MX",
"Description": "test",
"Values": [{
"Id": 100,
"LanId": 1,
"KeyId": 59,
"Value": "Save"
}]
}, {
"Id": null,
"Title": "SE",
"Description": "Swedish - Sweden",
"Values": [{
"Id": 100,
"LanId": 1,
"KeyId": 59,
"Value": "Save"
}]
}]
$scope.cols = Object.keys($scope.data[0]);
$scope.notSorted = function(obj) {
if (!obj) {
return [];
}
return Object.keys(obj);
}
});
index.html
<table border=1 style="margin-top: 0px !important;">
<thead>
<tr>
<th ng-repeat="(k,v) in data[0]">{{k}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)">
<table ng-if="isArr" border=1>
<thead>
<tr>
<td>
<button ng-click="expanded = !expanded" expand>
<span ng-bind="expanded ? '-' : '+'"></span>
</button>
</td>
</tr>
<tr>
<th ng-repeat="(sh, sv) in value[0]">{{sh}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="sub in value" ng-show="expanded">
<td ng-repeat="(sk, sv) in sub">{{sv}}</td>
</tr>
</tbody>
</table>
<span ng-if="!isArr">{{value}}</span>
</td>
</tr>
</tbody>
</table>

You can filter out columns that have only null values with:
JavaScript
$scope.cols = Object.keys($scope.data[0]).filter(function(col) {
return $scope.data.some(function(item) {
return item[col] !== null;
});
});
and check in template if this column should be rendered:
HTML
<table border=1 style="margin-top: 0px !important;">
<thead>
<tr>
<!-- Iterate over non-null columns -->
<th ng-repeat="col in cols">{{col}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data">
<!-- Use ngIf to hide redundant column -->
<td ng-if="cols.indexOf(prop)>=0" ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)" >
...
Plunker
http://plnkr.co/edit/PIbfvX6xvX5eUhYtRBWS?p=preview

So the id is null for every element in the array, then do
<th ng-repeat="(k,v) in data[0]" ng-show="v">{{k}}</th>
and
<td ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)" ng-show="value">
plnkr: http://plnkr.co/edit/rra778?p=preview

You need to make use of the cols property you defined in your $scope, but you also need to make sure its correct and responsive. You do that like this:
var colsFromData = function(data) {
var activeCols = {};
data.forEach(function(o) {
Object.keys(o).forEach(function(k) {
if(null == o[k])
return;
activeCols[k] = 1;
})
});
return Object.keys(activeCols);
}
$scope.cols = colsFromData($scope.data);
$scope.$watchCollection('data', colsFromData);
Then in your template, to use the now correct cols array:
...
<thead>
<tr>
<th ng-repeat="k in cols">{{k}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)" ng-if="cols.indexOf(prop) >= 0">
...
And the updated plunker

Binding input selection to dropdown Angularjs

Hi I have following input
<input type="text" class="form-controlb" ng-model="item.name" id="name" placeholder="Enter Name" />
And following dropdown
<div class="col-sm-12" ng-model="query">
<select ng-model="item" class="form-control" ng-options="a.name for a in addemployees | filter:name | orderBy:'name'" value="{{a.name}}">
<option value="">[Select Employee..]</option>
</select>
</div>
Basically what I am trying to do is, when I enter name in the input box if dropdown has that name ints options to show it in dropdown.
I tried to do do filter by name and than orderby name but it doesnt show any on dropdown as selection.
Please let me know how to fix it.
Thanks

something like this may work:
<input type="text" ng-model="text" />
<select ng-model="selectedOption" ng-options="option.name for option in options">
</select>
$scope.options = [{
name: 'a',
value: 'value-a'
}, {
name: 'b',
value: 'value-b'
}];
$scope.selectedOption = $scope.options[0];
$scope.$watch('text', function(v) {
for (var i in $scope.options) {
var option = $scope.options[i];
if (option.name === v) {
$scope.selectedOption = option;
break;
}
}
});
http://plnkr.co/edit/Lj0p3wig9JfOM0UkpDrd

plank
I hope my example will be useful -)
<table>
<tr>
<td align="right">Search :</td>
<td><input ng-model="query[queryBy]" /></td>
</tr>
<tr>
<td align="right">Search By :</td>
<td>
<select ng-model="queryBy">
<option value="$"></option>
<option value="name">NAME</option>
<option value="company">COMPANY</option>
<option value="designation">DESIGNATION</option>
</select>
</td>
</tr>
</table>
ng-repeat:
<tr>
<tr ng-repeat="emp in employees | filter:query">
<td>{{emp.name}}</td>
<td>{{emp.company}}</td>
<td>{{emp.designation}}</td>
</tr>
JS:
angular.module('module3', [])
.controller('testCtrl3', function($scope){
$scope.query = {}
$scope.queryBy = '$'
$scope.items = [
{
"name" : "Ananchenko Juriy",
"company" : "GOOGLE. Ltd",
"designation" : "Creativ Director"
},
{
"name" : "Ananchenko",
"company" : "GOOGLE"
},
{
"name" : "Korman Juriy",
"company" : "GOOGLE. Ltd",
"designation" : "stager na ispitatelnom sroke"
}
];
$scope.orderProp="name";
});