We Keep Coding

How to dynamically create HTML elements in JavaScript

I have an HTML page and I want to show the chat content between two person, the chat box is like this:
let data = {
"lyrics": [{
"line": "line 1 start",
"position": "r",
"time": 4.5
},
{
"line": "answer 1",
"position": "l",
"time": 9.03
},
{
"line": "line 2 start",
"position": "r",
"time": 14.01
}
]
}
<!-- right chat -->
<div class="chat__conversation-board__message-container reversed">
<div class="chat__conversation-board__message__person">
<div class="chat__conversation-board__message__person__avatar">
<img src="./customer.jpg" alt="Dennis Mikle" />
</div>
<span class="chat__conversation-board__message__person__nickname">Dennis Mikle</span>
</div>
<div class="chat__conversation-board__message__context">
<div class="chat__conversation-board__message__bubble">
<span>some text</span>
</div>
</div>
</div>
<!-- left chat -->
<div class="chat__conversation-board__message-container">
<div class="chat__conversation-board__message__person">
<div class="chat__conversation-board__message__person__avatar">
<img src="./agent.jpg" alt="Monika Figi" />
</div>
<span class="chat__conversation-board__message__person__nickname">Monika Figi</span>
</div>
<div class="chat__conversation-board__message__context">
<div class="chat__conversation-board__message__bubble">
<span>some text</span>
</div>
</div>
</div>
I get the data.json from the server and display it on index.html and I want to create the element with position type (left=l or right=r) inside my body.

Here is my example code for your reference:
let data={
"lyrics": [
{
"line": "line 1 start",
"position": "r",
"time": 4.5
},
{
"line": "answer 1",
"position": "l",
"time": 9.03
},
{
"line": "line 2 start",
"position": "r",
"time": 14.01
}
]
}
function go(){
let container;
data.lyrics.forEach(lyric=>{
if (lyric.position === 'r') {
container=document.querySelector(".right .chat__conversation-board__message__bubble");
} else {
container=document.querySelector(".left .chat__conversation-board__message__bubble");
}
container.innerHTML+="<div>"+lyric.line+"</div>";
})
}
<div class="chat__conversation-board__message-container reversed right">
<div class="chat__conversation-board__message__person">
<div class="chat__conversation-board__message__person__avatar">
<img src="./customer.jpg" alt="Dennis Mikle" />
</div>
<span class="chat__conversation-board__message__person__nickname">Dennis Mikle</span>
</div>
<div class="chat__conversation-board__message__context">
<div class="chat__conversation-board__message__bubble">
<span>some text</span>
</div>
</div>
</div>
<!-- left chat -->
<div class="chat__conversation-board__message-container left">
<div class="chat__conversation-board__message__person">
<div class="chat__conversation-board__message__person__avatar">
<img src="./agent.jpg" alt="Monika Figi" />
</div>
<span class="chat__conversation-board__message__person__nickname">Monika Figi</span>
</div>
<div class="chat__conversation-board__message__context">
<div class="chat__conversation-board__message__bubble">
<span>some text</span>
</div>
</div>
</div>
<button onclick="go()">
Go
</button>
I have added "right" and "left" to the class name of the containers.
So, I can base on the "position" attribute to select the appropriate containers to store the new content.

Sort and Filter in vue

I am trying to sort the JSON data imported but its not working, I want to sort it to daily, weekly, and monthly on click in VUE.
I want it to be sorted on click for daily, weekly, and monthly. please anyone I would appreciate it all
`
This is the HTML PART
<template>
<div class="duration">
<p
v-for="(item, index) in filter When"
:key="index"
#click="when = item; active=index ">{{item}}</p>
</div>
</div>
<div
class="work box"
v-for="(period, index) in moments"
:item="period"
:key="index">
<div>
<div class="img">
<img class="icon" src="../assets/images/icon-work.svg" alt="" />
</div>
<div class="details xo">
<div class="header">
<h5 class="schedule">{{period.title}}</h5>
<span class="un">…</span>
</div>
<div class="moment">
<p class="hrs">{{period.timeframes.daily.current}}hrs</p>
<p class="when">Yesterday-<span class="days">{{period.timeframes.daily.previous}}days</span></p>
</div>
</div>
</template>
`
This is the JSON data
[
{
"title": "Work",
"timeframes": {
"daily": {
"current": 5,
"previous": 7
},
"weekly": {
"current": 32,
"previous": 36
},
"monthly": {
"current": 103,
"previous": 128
}
}
},
{
"title": "Play",
"timeframes": {
"daily": {
"current": 1,
"previous": 2
},
"weekly": {
"current": 10,
"previous": 8
},
"monthly": {
"current": 23,
"previous": 29
}
}
},
]

Vue JS: how to get nested JSON data

i have JSON like below, in payment .. i can't get cash_payment's paid_amount or installment_payment's paid_amount and date as well
{
"response": [
{
"status": "sold",
"price": "100000",
"currency": "USD",
"_id": "61c21fa6f650480b7630badf",
"flat_number": 1,
"description": "This is a newly created flat.",
"city": "dokj",
"payment": {
"cash_payment": {
"paid_amount": "100000",
"date": "2021-12-23"
}
},
"floor": "61c21fa6f650480b7630bade",
"building": "61c21fa6f650480b7630badd",
"createdAt": "2021-12-21T18:40:44.200Z",
"updatedAt": "2021-12-23T18:42:43.959Z",
"__v": 0
},
{
"status": "sold",
"price": "Not set",
"currency": "USD",
"_id": "61c21fa6f650480b7630bae0",
"flat_number": 2,
"description": "This is a newly created flat.",
"city": "Istanbul",
"payment": {
"installment_payment": {
"installments": [
{
"paid_amount": "5000",
"date": "2021-12-21"
},
{
"paid_amount": "4000",
"date": "2021-12-21"
}
],
"remaining": "1000"
}
},
"floor": "61c21fa6f650480b7630bade",
"building": "61c21fa6f650480b7630badd",
"createdAt": "2021-12-21T18:40:44.202Z",
"updatedAt": "2021-12-22T23:06:26.602Z",
"__v": 0
},}
code below:
<template>
<div>
<!-- Header -->
<div class="header bg-gradient-success py-7 py-lg-8 pt-lg-9">
<b-container>
<div class="header-body text-center mb-7">
<b-row class="justify-content-center">
<b-col xl="5" lg="6" md="8" class="px-5">
</b-col>
</b-row>
</div>
</b-container>
</div>
<!-- Page content -->
<b-container class="page-contet mt--8 pb-5">
<b-row class="justify-content-center">
<b-col lg="7" md="10">
<b-card no-body class="bg-white border-0 mb-0" style="background: linear-gradient(87deg, #172b4d 0, #1d2026 100%) !important ;">
<b-card-header class="bg-transparent pb-5">
<div class="text-muted text-center mt-2 mb-3">
<h2> details </h2>
</div>
</b-card-header>
<b-card-body class="px-lg-5 py-lg-5" v-if="roles ==='Admin'">
<div class="text-center text-muted mb-4">
</div>
<validation-observer ref="formValidator">
<b-form role="form">
<select class="status-info" v-model="City">
<option value="" selected disabled> choose city </option>
<option value="duhok" >doki</option>
>
</select>
<div v-if="City=='duhok'" v-for="(flat,index) in Flats" :key="index" v-show="flat.city=='doki'">
{{flat.city}} // i can get city easily
<pre style="color:white;" v-for="(find,indexT) in flat" :key="indexT"> {{find.paid_amount}} </pre> //didn't work
</div>
</b-form>
</validation-observer>
</b-card-body>
</b-card>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import BuildingsService from "../../../services/ApiService"
export default {
name: 'light-table',
components: {
},
data() {
return {
buildingId: this.$route.params.id,
Flats: [],
City:"",
Floors: [],
check: true,
Building: [],
obj:[],
paymentObj:""
};
},
computed: {
roles() {
let roles = JSON.parse(sessionStorage.getItem('user')).role;
return roles;
},
},
mounted: function () {
BuildingsService.getAllFlats().then((response) => {
this.Flats = response.data.response;
});
BuildingsService.getBuildings().then((response) => {
this.Building = response.data.response;
console.log(this.Building, "buildings");
});
},
}
</script>

find.payment.cash_payment.paid_amount
find.payment.installment_payment.installments[0].paid_amount
find.payment.installment_payment.installments[1].paid_amount
You will need a method to detect the payment method and also sum the installments if it is an array.
Non tested example
getPaidAmount(flat) {
if (flat.payment.cash_payment){ return Number(payment.cash_payment.paid_amount) }
if (flat.payment.installment_payment){
const arr = flat.payment.installment_payment.installments.map(it=>Number(it.paid_amount))
const sum = arr.reduce(function (a, b) {return a + b;}, 0);
return sum
}
}

You can try like following snippet:
new Vue({
el: '#demo',
data() {
return {
response: [
{
"status": "sold",
"price": "100000",
"currency": "USD",
"_id": "61c21fa6f650480b7630badf",
"flat_number": 1,
"description": "This is a newly created flat.",
"city": "doki",
"payment": {
"cash_payment": {
"paid_amount": "100000",
"date": "2021-12-23"
}
},
"floor": "61c21fa6f650480b7630bade",
"building": "61c21fa6f650480b7630badd",
"createdAt": "2021-12-21T18:40:44.200Z",
"updatedAt": "2021-12-23T18:42:43.959Z",
"__v": 0
},
{
"status": "sold",
"price": "Not set",
"currency": "USD",
"_id": "61c21fa6f650480b7630bae0",
"flat_number": 2,
"description": "This is a newly created flat.",
"city": "Istanbul",
"payment": {
"installment_payment": {
"installments": [
{
"paid_amount": "5000",
"date": "2021-12-21"
},
{
"paid_amount": "4000",
"date": "2021-12-21"
}
],
"remaining": "1000"
}
},
"floor": "61c21fa6f650480b7630bade",
"building": "61c21fa6f650480b7630badd",
"createdAt": "2021-12-21T18:40:44.202Z",
"updatedAt": "2021-12-22T23:06:26.602Z",
"__v": 0
},
],
//buildingId: this.$route.params.id,
Flats: [],
City:"",
Floors: [],
check: true,
Building: [],
obj:[],
paymentObj:""
}
},
computed: {
roles() {
//let roles = JSON.parse(sessionStorage.getItem('user')).role;
//return roles;
},
cities() {
return this.response.map(r => r.city)
}
},
mounted: function () {
//BuildingsService.getAllFlats().then((response) => {
this.Flats = this.response;
//});
//BuildingsService.getBuildings().then((response) => {
this.Building = this.response;
//console.log(this.Building, "buildings");
//});
},
})
Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/vue#latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<div id="demo">
<b-container class="page-contet mt--8 pb-5">
<b-row class="justify-content-center">
<b-col lg="7" md="10">
<b-card no-body class="bg-white border-0 mb-0" style="background: linear-gradient(87deg, #172b4d 0, #1d2026 100%) !important ;">
<b-card-header class="bg-transparent pb-5">
<div class="text-muted text-center mt-2 mb-3">
<h2> details </h2>
</div>
</b-card-header>
<b-card-body class="px-lg-5 py-lg-5" >
<validation-observer ref="formValidator">
<b-form role="form">
<select class="status-info" v-model="City">
<option value="" selected disabled> choose city </option>
<option v-for="city in cities" >{{ city }}</option>
</select>
<div v-for="(flat,index) in Flats" :key="index" style="color:white;" v-show="City">
<div v-if="flat.payment.cash_payment && flat.city === City">
{{ flat.city }}
<pre style="color:white;" v-for="(find,indexT) in flat.payment" :key="indexT">
<span>Amount: {{ find.paid_amount }}</span> / <span>Date: {{ find.date }}</span>
</pre>
</div>
<div v-else v-if="flat.payment.installment_payment && flat.city === City">
{{ flat.city }}
<pre v-for="(find,indexT) in flat.payment.installment_payment?.installments" :key="indexT">
<span>Amount: {{ find.paid_amount }}</span> / <span>Date: {{ find.date }}</span>
</pre>
</div>
</div>
</b-form>
</validation-observer>
</b-card-body>
</b-card>
</b-col>
</b-row>
</b-container>
</div>

How do i list items(render) from a nested JSON response Angular.js

my home controller returns this, this is what i see on.
This lists the authors i have and the rating star, i wanted to include the titles of each authors. and i tried this but didn't work for me, what am i missing??
[
{
"_id": "58dd21c3cb77090b930b6063",
"bookAuthor": "George Orwell",
"titles": [
{
"title": "Animal Farm",
"_id": "58dd3f2701cc081056135dae",
"reviews": [
{
"author": "Lisa",
"rating": 4,
"reviewText": "this is a review",
"_id": "58dd8e13876c0f16b17cd7dc",
"createdOn": "2017-03-30T23:00:35.662Z"
}
],
"favouredBy": [
"bb, aa, cc"
]
},
{
"title": "1984",
"_id": "58dd42a59f12f110d1756f08",
"reviews": [
{
"author": "jessy",
"rating": 5,
"reviewText": "REVIEW FOR SECOND TITLE",
"_id": "58dd8ef46d4aaa16e4545c76",
"createdOn": "2017-03-30T23:04:20.609Z"
}
],
"favouredBy": [
"all"
]
}
]
}
]
and there is my home.view.html
<navigation></navigation>
<div class="container">
<page-header content="vm.pageHeader"></page-header>
<div class="row">
<div class="col-xs-12 col-sm-8">
<div class="error">{{ vm.message }}</div>
<div class="row list-group">
<div class="col-xs-12 list-group-item" ng-repeat="book in vm.data.books | filter : textFilter">
<h4>
<small class="rating-stars" rating-stars rating="book.rating"></small>
</h4>
<p class="Author">{{ book.bookAuthor }}</p>
</div>
<div class="col-xs-12 list-group-item2" ng-repeat="book in vm.data.books | filter : textFilter">
<h4>
{ book.titles.title }}
</h4>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<p class="lead">{{ vm.sidebar.content }}</p>
</div>
</div>
<footer-generic></footer-generic>
</div>

Yous should use <div ng-app='myApp' ng-controller='myController as vm'> also you should place the nested loop inside the first div and then access do a ng-repeat for the child item.
<div ng-repeat="eachbook in book.titles">
DEMO
var myApp=angular.module('myApp',[])
myApp.controller('myController',function(){
this.data={};
this.data.books= [
{
"_id": "58dd21c3cb77090b930b6063",
"bookAuthor": "George Orwell",
"titles": [
{
"title": "Animal Farm",
"_id": "58dd3f2701cc081056135dae",
"reviews": [
{
"author": "Lisa",
"rating": 4,
"reviewText": "this is a review",
"_id": "58dd8e13876c0f16b17cd7dc",
"createdOn": "2017-03-30T23:00:35.662Z"
}
],
"favouredBy": [
"bb, aa, cc"
]
},
{
"title": "1984",
"_id": "58dd42a59f12f110d1756f08",
"reviews": [
{
"author": "jessy",
"rating": 5,
"reviewText": "REVIEW FOR SECOND TITLE",
"_id": "58dd8ef46d4aaa16e4545c76",
"createdOn": "2017-03-30T23:04:20.609Z"
}
],
"favouredBy": [
"all"
]
}
]
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app='myApp' ng-controller='myController as vm'>
<div class="row">
<div class="row list-group">
<div class="col-xs-12 list-group-item" ng-repeat="book in vm.data.books | filter : textFilter">
<h4>
<small class="rating-stars" rating-stars rating="book.rating"></small> {{book.bookAuthor}}
</h4>
<div ng-repeat="eachbook in book.titles">
<ul>
<li>
{{eachbook.title}}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

Filters not working - Angularjs

I have been studying some of the videos for angularjs. While trying to apply filter to a list of bookmark category my main content simply doesn't loads. I have not implemented view as of now. And I would like my code to be without views for a moment.
The filter line is problematic as when I remove the curly braces around. The bookmark lists does shows up but the filtering still not works !
Please let me know what is the correction which needs to be done ?
Here is my code for INDEX.HTML
<!doctype html>
<html ng-app="Eggly">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Eggly</title>
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/eggly.css">
<link rel="stylesheet" href="assets/css/animations.css">
</head>
<body ng-controller='MainCtrl'>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<img class="logo" src="assets/img/eggly-logo.png">
<ul class="nav nav-sidebar">
<li ng-repeat="category in categories">
{{category.name}}
</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div ng-repeat="bookmark in bookmarks | filter:{category:currentCategory.name}">
<button type="button" class="close">×</button>
<button type="button" class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span></button>
{{bookmark.title}}
</div>
<hr/>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app/eggly-app.start.js"></script>
</body>
JS FILE
angular.module('Eggly', [
])
.controller('MainCtrl', function($scope){
$scope.categories = [
{"id": 0, "name": "Development"},
{"id": 1, "name": "Design"},
{"id": 2, "name": "Exercise"},
{"id": 3, "name": "Humor"}
];
$scope.bookmarks= [
{"id":0, "title": "AngularJS", "url": "http://angularjs.org", "category": "Development" },
{"id":1, "title": "Egghead.io", "url": "http://angularjs.org", "category": "Development" },
{"id":2, "title": "A List Apart", "url": "http://alistapart.com/", "category": "Design" },
{"id":3, "title": "One Page Love", "url": "http://onepagelove.com/", "category": "Design" },
{"id":4, "title": "MobilityWOD", "url": "http://www.mobilitywod.com/", "category": "Exercise" },
{"id":5, "title": "Robb Wolf", "url": "http://robbwolf.com/", "category": "Exercise" },
{"id":6, "title": "Senor Gif", "url": "http://memebase.cheezburger.com/senorgif", "category": "Humor" },
{"id":7, "title": "Wimp", "url": "http://wimp.com", "category": "Humor" },
{"id":8, "title": "Dump", "url": "http://dump.com", "category": "Humor" }
];
$scope.currentCategory = null;
function setCurrentCategory(category) {
$scope.currentCategory = category;
}
$scope.currentCategory = setCurrentCategory;
});

A few errors there must me fixed in your code.
Please attach .setCurrentCategory() to $scope (or this) in controller as Angular realize MVVM architecture. $scope is an object that links your controllers with views. As long as you want to interact with data from controller by method setCurrentCategory you must assign it to $scope
Filters - according to AngularJS documentation need expression – not curly brackets
angular.module('Eggly', [])
.controller('MainCtrl', function($scope) {
$scope.categories = [{
"id": 0,
"name": "Development"
}, {
"id": 1,
"name": "Design"
}, {
"id": 2,
"name": "Exercise"
}, {
"id": 3,
"name": "Humor"
}];
$scope.bookmarks = [{
"id": 0,
"title": "AngularJS",
"url": "http://angularjs.org",
"category": "Development"
}, {
"id": 1,
"title": "Egghead.io",
"url": "http://angularjs.org",
"category": "Development"
}, {
"id": 2,
"title": "A List Apart",
"url": "http://alistapart.com/",
"category": "Design"
}, {
"id": 3,
"title": "One Page Love",
"url": "http://onepagelove.com/",
"category": "Design"
}, {
"id": 4,
"title": "MobilityWOD",
"url": "http://www.mobilitywod.com/",
"category": "Exercise"
}, {
"id": 5,
"title": "Robb Wolf",
"url": "http://robbwolf.com/",
"category": "Exercise"
}, {
"id": 6,
"title": "Senor Gif",
"url": "http://memebase.cheezburger.com/senorgif",
"category": "Humor"
}, {
"id": 7,
"title": "Wimp",
"url": "http://wimp.com",
"category": "Humor"
}, {
"id": 8,
"title": "Dump",
"url": "http://dump.com",
"category": "Humor"
}];
$scope.currentCategory = null;
function setCurrentCategory(category) {
$scope.currentCategory = category;
}
$scope.setCurrentCategory = setCurrentCategory;
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='Eggly'>
<div ng-controller='MainCtrl'>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li ng-repeat="category in categories">
{{category.name}}
</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div ng-repeat="bookmark in bookmarks | filter:currentCategory.name">
<button type="button" class="close">×</button>
<button type="button" class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span>
</button>
{{bookmark.title}}
</div>
<hr/>
</div>
</div>
</div>
</div>
</div>