iterate keys and values in multiple dictionaries by angularjs - javascript

I've got a json file contains few different dictionaries. It looks like this:
{
"variable_1": {
"1357840800": 74,
"1360519200": 71,
"1362938400": 83,
"1365616800": 74,
"1368208800": 78
},
"name": "TITLE",
"variable_2": {
"1357840800": 25817,
"1360519200": 28585,
"1362938400": 26946,
"1365616800": 30034,
"1368208800": 23316
},
"link": "title.html",
"variable_3": {
"1357840800": 1910483,
"1360519200": 2029593,
"1362938400": 2236587,
"1365616800": 2222556,
"1368208800": 1818661
}
}
I want to put the data from variable_1, variable_2 and variable_3 in different columns of a table. Any variable has the same number of items and the number of them is unknown (it could be 1,2,3,5,8...). The keys are the same in all dictionaries. So new <td> should contains only value from another dictionary.
I wrote the code to iterate through one dictionary but I can't find approach to multiple dictionaries.
That's my code for only one dictionary. How should I modify it to handle a few?
<table class="table ng-cloak" ng-if='isActive' ng-repeat="item in data | filter:isActive">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='(key, val) in item.variable_1'>
<td>{{ $index }}</td>
<td>{{ 1000*key + 1 | date:'MM.yyyy'}}</td>
<td>{{ val | splitdivisions }}</td>
</tr>
</tbody>
</table>


If keys in each directory are related to each other, you can simply
<tr ng-repeat='(key, val) in item.variable_1'>
<td>{{ $index }}</td>
<td>{{ 1000*key + 1 | date:'MM.yyyy'}}</td>
<td>{{ val | splitdivisions }}</td>
<td>{{ item.variable_2[key] }}</td>
<td>{{ item.variable_3[key] }}</td>


You might want to share your filters (I did remove them here):
function MyCtrl($scope) {
$scope.data = {
"variable_1": {
"1357840800": 74,
"1360519200": 71,
"1362938400": 83,
"1365616800": 74,
"1368208800": 78
},
//"name": "TITLE",
"variable_2": {
"1357840800": 25817,
"1360519200": 28585,
"1362938400": 26946,
"1365616800": 30034,
"1368208800": 23316
},
//"link": "title.html",
"variable_3": {
"1357840800": 1910483,
"1360519200": 2029593,
"1362938400": 2236587,
"1365616800": 2222556,
"1368208800": 1818661
}
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="MyCtrl">
<table class="table" ng-repeat="(key, value) in data">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='(k, val) in value'>
<td>{{ $index }}</td>
<td>{{ 1000*k + 1 | date:'MM.yyyy'}}</td>
<td>{{ val }}</td>
</tr>
</tbody>
</table>
</div>
</div>
I did play around a little with that data... and added a custom filter, see jsFiddle

Related

how to update html value without unique id in JavaScript?

Currently, I am developing a site that guides coin market arbitrage information.
I wonder if the way below is possible in JavaScript.(not React)
backend - django
def index(request):
data = [{"name": "BTC", "binance": "price1", "gecko": "price2", "ftx": "price3"},
{"name": "ETH", "binance": "price1", "gecko": "price2", "ftx": "price3"}]
return render(request, 'index.html', context={'data': data})
html -
<table class="table table-striped mb-0 fixed">
<thead>
<tr>
<th>name</th>
<th>binance</th>
<th>gecko</th>
<th>ftx</th>
</tr>
</thead>
<tbody>
{% for d in data %}
<tr>
<td>{{ d.name }}</td>
<td>{{ d.binance }}</td>
<td>{{ d.ftx }}</td>
<td>{{ d.okx }}</td>
</tr>
{% endfor %}
</tbody>
</table>
JS -
var socket = new WebSocket(
'ws://' + window.location.host +
'/ws?session_key=${sessionKey}')
socket.onmessage = function (e) {
let positions_data = JSON.parse(e.data)
//if positions_data {"site": "binance", "price": "27000", "name": "BTC"}
//update data ->
data = [{"name": "BTC", "binance": "27000", "gecko": "price2", "ftx": "price3"},
{"name": "ETH", "binance": "price1", "gecko": "price2", "ftx": "price3"}]
//do something?
//then change html value
}
Is it possible to change the html value just by changing the variable in JS
Or is it possible to take additional code? Or is there another way?

Change your HTML so that the rows have a unique ID based on the coin name, and the columns have classes that indicate their roles.
<table class="table table-striped mb-0 fixed">
<thead>
<tr>
<th>name</th>
<th>binance</th>
<th>gecko</th>
<th>ftx</th>
</tr>
</thead>
<tbody>
{% for d in data %}
<tr id="row-{{d.name}}">
<td class="name">{{ d.name }}</td>
<td class="binance">{{ d.binance }}</td>
<td class="ftx">{{ d.ftx }}</td>
<td class="okx">{{ d.okx }}</td>
</tr>
{% endfor %}
</tbody>
</table>
Then you can find the row that corresponds to positions_data and update it:
let row = document.querySelector(`#row-${positions_data.name}`);
let site = positions_data.site;
row.querySelector(`.${site}`).innerText = positions_data.price;

How to populate list in list in a table Angular

I have a list of values [1, paracetamol,[{1, location, quantity}, {2, location2, quantity}]
so I have to print in two rows
1. [1, paracetamol, location, quantity]
2. [2. paracetamol, location1, quantity2]
I have maintained head
headElements = ['Drug ID', 'Drug Name', 'Location', 'Quantity']
<table class="table table-striped" >
<thead>
<tr>
<th *ngFor="let head of headElements" scope="col">{{ head }}</th>
</tr>
</thead>
<tbody>
<div *ngFor = "let drugDetail of drugList">
<tr *ngFor="let loc of drugDetail.drugLocationList">
<th scope="row">{{ drugDetail.drugId }}</th>
<td>{{ drugDetail.drugName }}</td>
<td>{{loc.location}}</td>
<td>{{ loc.quantity}}</td>
</tr>
</div>
</table>
output:
['Drug ID', 'Drug Name', 'Location', 'Quantity']
[1, paracetamol, location, quantity]
[2. paracetamol, location1, quantity2]

Maybe it could be easier if you do first a map to your array data, something like this:
copyDrugList = drugList.map(drugDetail => [
{ drugId : drugDetail.drugLocationList[0].drugId ,
drugName : drugDetail.drugName ,
location : drugDetail.drugLocationList[0].location ,
quantity : drugDetail.drugLocationList[0].quantity ,
},
{ drugId : drugDetail.drugLocationList[0].drugId ,
drugName : drugDetail.drugName ,
location : drugDetail.drugLocationList[1].location ,
quantity : drugDetail.drugLocationList[1].quantity ,
},
]);
Then, you only need to do a classic Angular HTML ngFor:
<tr *ngFor = "let drugDetail of copyDrugList ">
<td>{{ drugDetail.drugId }}</td>
<td>{{ drugDetail.drugName }}</td>
<td>{{ drugDetail.location }}</td>
<td>{{ drugDetail.quantity }}</td>
</tr>

How to copy data of first table to second table using Angular?

I just want to copy data(Item and Price) of the first table to the second table and make increment in Quantity(Second table) when i click in the First Table ( Item). I am working on Angular 9
First Table:
Code | Item | Price | Unit |
1 | Mouse | 500 | Piece |
2 | Wire | 100 | Piece |
Second Table:
Item | Quantity| Price |
1 | 2 | 1000 |
2 | 1 | 100 |
I did a lot to work with it but I could not get any required output.
It is possible to solve using javaScript/Js/jquery
<table class="table table-hover" id="firstTable">
<thead class="table-primary">
<tr>
<td>Code</td>
<td>Item</td>
<td>Unit</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of itemList;" id="moveMeIntoMain"
style="cursor:pointer">
<td>{{data.itemCode}}</td>
<td>{{data.itemName}}</td>
<td><span>{{data.unitId}}</span>{{data.name}}</td>
<td>{{data.retailRate}}</td>
</tr>
</tbody>
</table>
<table class="table table-hover" id="secondTable">
<thead class="">
<tr class="table-primary">
<td>#</td>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Js
$(document).ready(function () {
var items = [];
$("#firstTable tr").on("click", function () {
var newTr = $(this).closest("tr").clone();
$(newButtonHTML).children("button").click(function (e) {
});
$(newTr).children("td:last").html("");
items.push(newTr);
newTr.appendTo($("#secondTable"));
});
})

You can simply try in Angular way ;). Just add click handler to the each row and send row data
Working stackblitz
Template file
<table>
<thead>
<th>Code</th>
<th>Item</th>
<th>Price</th>
<th>Unit</th>
</thead>
<tr *ngFor="let data of firstTableData" (click)="updateSecondTable(data)">
<td>{{ data.Code }}</td>
<td>{{ data.Item }}</td>
<td>{{ data.Price }}</td>
<td>{{ data.Unit }}</td>
</tr>
</table>
<hr>
<table *ngIf="secondTableData.length">
<thead>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
</thead>
<tbody>
<tr *ngFor="let newdata of secondTableData">
<td>{{ newdata.Item }}</td>
<td>{{ newdata.Quantity }}</td>
<td>{{ newdata.Price }}</td>
</tr>
</tbody>
</table>
And in the typescript file
Declare a empty secondTableData array
And have a method, which firstly checks for the item existence in the second table array. If item already exists, then simply update quantity and price
If item doesn't exist, just push the item with required columns to the second table array
Component.ts
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
firstTableData = [{
Code: 1,
Item: 'Mouse',
Price: 500,
Unit: 'Piece'
},
{
Code: 2,
Item: 'Wire',
Price: 100,
Unit: 'Piece'
},
{
Code: 3,
Item: 'Some Item',
Price: 300,
Unit: 'Some Unit'
}
];
secondTableData = [];
updateSecondTable(data) {
let foundItem = this.secondTableData.find((item) => item.Item === data.Item);
if (foundItem) {
foundItem.Quantity += 1;
foundItem.Price += data.Price;
return;
}
this.secondTableData.push({
Item: data.Item,
Quantity: 1,
Price: data.Price,
})
}
}

Bootstrap-vue - Display array data as dropdown in vue js

I have an array of JSON data like :
loggers = [{
"allAvailableLevel": ['WARN', 'DEBUG', 'INFO'],
"level": "WARN",
"logger": "com.test1",
"status": "success"
},
{
"allAvailableLevel": ['WARN', 'DEBUG', 'INFO'],
"level": "WARN",
"logger": "com.test2",
"status": "success"
}
]
I am using dropdown inside a table column and for that using below code, and basically traversing Loggers array but not able to extract allAvailableLevel data.
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Class</th>
<th>Current Level</th>
<th>All Available Levels</th>
<!-- Only display "Action" header if level is changed-->
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr v-for="(logger, index) in loggers" :key="logger">
<td>{{ index + 1 }}</td>
<td>{{ logger.logger }}</td>
<td>{{ logger.level }}</td>
<td>
<b-dropdown
boundary="viewport"
id="dropdown-dropup"
size="sm"
:text="selectedLevelText"
split
class="m-2"
>
<b-dropdown-item-button
v-for="logger in loggers[0].allLevel"
:key="logger"
#click.prevent="changeLevel(level)"
>{{ logger }}</b-dropdown-item-button
>
</b-dropdown>
</td>
<td v-if="levelChanged">
<b-button
size="sm"
variant="secondary "
#click.prevent="updateLevel(selectedLevelText)"
>Update</b-button
>
</td>
</tr>
</tbody>
</table>
with above code my dropdown looks like :
I want to display it like this :
How do I traverse my data inside the vue template to get only the data of "allAvailableLevel"?

You should iterate over that nested array as follows :
<b-dropdown-item-button
v-for="level in logger.allAvailableLevel"
:key="level"
#click.prevent="changeLevel(level)"
>{{ level }}</b-dropdown-item-button
>

Do this:
<tr v-for="(logger, index) in loggers" :key="logger">
<td>{{ index + 1 }}</td>
...
<td>
<b-dropdown
boundary="viewport"
id="dropdown-dropup"
size="sm"
:text="selectedLevelText"
split
class="m-2"
>
<b-dropdown-item-button
v-for="level in logger.allAvailableLevel"
:key="level"
#click.stop="changeLevel(level)"
>{{ logger }}</b-dropdown-item-button
>
</b-dropdown>
</td>
</tr>

ng-repeat is not working in AngularJS 1.6

I'm new to AngularJS, I'm using the version 1.6 and I'm getting my info from my database, it is working but when I want to access to the JSON info is not displaying data.
This is my code
<div class="row m-t-50">
{{ autos |json }}
<div class="col-md-12">
<table class="table table-striped">
<thead>
<tr>
<th>Marca</th>
<th>Modelo</th>
<th>Color</th>
<th>Año</th>
<th>Precio</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="auto in autos">
<td>{{ auto.marca }}</td>
<td>{{ auto.modelo }}</td>
<td>{{ auto.color }}</td>
<td>{{ auto.anio }}</td>
<td>{{ auto.precio }}</td>
</tr>
</tbody>
</table>
</div>
</div>
{{ autos | json }} shows this:
{
"data": [{
"id": "1",
"marca": "TOYOTA",
"modelo": "VC2017",
"color": "Verde",
"anio": "2017",
"precio": "250345"
}, {
"id": "2",
"marca": "NISSAN",
"modelo": "NS2017",
"color": "Azul",
"anio": "2016",
"precio": "540000"
}],
"status": 200,
"config": {
"method": "GET",
"transformRequest": [null],
"transformResponse": [null],
"jsonpCallbackParam": "callback",
"url": "php/obtener-autos.php",
"headers": {
"Accept": "application/json, text/plain, */*"
}
},
"statusText": "OK"
}
But the table is just blank, what I am doing wrong?

The ng-repeat is used on <tr ng-repeat="auto in autos">. From the given data, the repeat should be applied on autos.data array.
Use
<tr ng-repeat="auto in autos.data">
OR
In controller, assign the data from response to the autos variable.
$scope.autos = response.data;
And use this in view as it is
<tr ng-repeat="auto in autos">
The autos is the response of an $http request. The response contains data property to access the actual response sent from the server. To access response data use response.data.
Other properties are status – status, headers, config and statusText.

You should use autos.data,
DEMO
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
function($scope) {
$scope.autos ={"data": [ { "id": "1", "marca": "TOYOTA", "modelo": "VC2017", "color": "Verde", "anio": "2017", "precio": "250345" }, { "id": "2", "marca": "NISSAN", "modelo": "NS2017", "color": "Azul", "anio": "2016", "precio": "540000" } ], "status": 200, "config": { "method": "GET", "transformRequest": [ null ], "transformResponse": [ null ], "jsonpCallbackParam": "callback", "url": "php/obtener-autos.php", "headers": { "Accept": "application/json, text/plain, */*" } }, "statusText": "OK" };
}
]);
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="dobController">
<div class="row m-t-50">
{{ autos |json }}
<div class="col-md-12">
<table class="table table-striped">
<thead>
<tr>
<th>Marca</th>
<th>Modelo</th>
<th>Color</th>
<th>Año</th>
<th>Precio</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="auto in autos.data">
<td>{{ auto.marca }}</td>
<td>{{ auto.modelo }}</td>
<td>{{ auto.color }}</td>
<td>{{ auto.anio }}</td>
<td>{{ auto.precio }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

<body ng-controller="MyCtrl">
<div>
<div ng-repeat="d in data"> {{ d.marca }}</div>
</div>
</body>
Working plnkr here Plunker

in Angular version 1.6.1 use this example
your html
<table class="table table-striped">
<thead>
<tr>
<th>Marca</th>
<th>Modelo</th>
<th>Color</th>
<th>Año</th>
<th>Precio</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="auto in autos">
<td>{{ auto.marca }}</td>
<td>{{ auto.modelo }}</td>
<td>{{ auto.color }}</td>
<td>{{ auto.anio }}</td>
<td>{{ auto.precio }}</td>
</tr>
</tbody>
</table>
your code
$http.get("your url").then(function (response) {
$scope.cars= JSON.parse(response.data);
});
Do not forget to insert this line JSON.parse(response.data)
the version 1.6.1 require.

Categories