We Keep Coding

Is it a good idea to use images local URL in array?

I want to make a list of projects and I made an array and using .map() method to display them, and I'm adding that list in the HTML element using .insertAdjacentHTML() method.
While inspecting the elements I can see the image path is coming fine but image is not showing in UI. What would be the reason of it?
const projectData = [
{
id: 01,
title: "Project 1",
url: "https://react-projects-1/",
imageUrl: "src/img/projects/project-1.png", //is it wrong using like this
description: "This is project 1 desc",
},
{
id: 02,
title: "Project 2",
url: "https://react-projects-2/",
imageUrl: "src/img/projects/project-2.png", //is it wrong using like this
description: "This is project 2 desc",
},
];
Mapping them and using the HTML:-
const projectHTML = projectData.map((el) => {
return `<div class="row align-items-center project_row">
<div class="col-md-5 col-12 order-md-2">
<a href="${el.url}" class="thumb">
<img
src="${el.imageUrl}"
class="w-100"
alt="${el.title}"
target="_blank"
/>
</a>
</div>
<div class="col-md-7 col-12 order-md-1 mt-4 mt-md-0">
<h3><span>${el.id}.</span>${el.title}</h3>
<p>
${el.description}
</p>
<ul class="buildTech">
<li><i class="fa-brands fa-react"></i> React</li>
</ul>
View
</div>
</div>`;
});
workWrapper.insertAdjacentHTML("afterbegin", projectHTML);
Inspect:-

how to filter post by title using Vue js 2.x directives instead of vue js 1.x

I am learning to use vue js with wprest api by following watch-learn tutorials on the same topic. the problem is that the vue js version used in the tutorial seems to be v 1.x and i started using vue js 2.x. I was able to figure out the initial stages on how to display all the post using vue js 2.x.. I have an input field using which I search for a specific title it should filter and show the post. The issue is unable to workout exactly how it needs to be computed using vuejs 2.x.. I have included a codepen link containing the json data as well as my working code.
the following is the input field to be used to filter the posts by title
<div class="row">
<h4>Filter by name:</h4>
<input type="text" name="" v-model="nameFilter">
</div>
<div class="row">
<div class="col-md-4" v-for="post in posts">
<div class="card post">
<img class="card-img-top" v-bind:src="post.fi_300x180" >
<div class="card-body">
<h2 class="card-text">{{ post.title.rendered }}</h2>
<small class="tags" v-for="category in post.cats">{{ category.name }}</small>
</div>
</div> <!-- .post -->
</div> <!-- .col-md-4 -->
</div> <!-- .row -->
https://codepen.io/dhivyasolomon/pen/LdZKJY
I would appreciate any help in figuring out the next step. thanks.

You don't need directives, achieve this using the power of Computed properties
So you will have to itarate over the computed property which filter the posts by the input value and return a new array of posts.
Little example:
new Vue({
el: '#example',
computed: {
filteredPosts () {
return this.posts.filter(p => p.title.toLowerCase().includes(this.filterText.toLowerCase()))
}
},
data () {
return {
filterText: '',
posts: [
{
title: 'My first post title',
body: 'foo'
},
{
title: 'Another post title',
body: 'foo'
},
{
title: 'This will work fine',
body: 'foo'
},
{
title: 'Omg it\'s working!',
body: 'foo'
}
]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<div id="example">
<input type="text" v-model="filterText" />
<ul>
<li v-for="post in filteredPosts">{{ post.title }}</li>
</ul>
</div>

Angular 1.6 - ng-repeat orderby and groupby items

So what I want to achieve is:
loop through array of messages (ng-repeat)
sort messages by date
then group current message with previous one, if author is matching (store in the same div element)
create new div if current messages's author is not matching previous one
continue loop
I'm stuck here:
<div class="message" ng-repeat="msg in chatDetails.msgList">
<p>{{ msg.text }}</p>
</div>
I need to keep exact order - simply, if previous element doesn't match with current - new box should be created.
Is that even possible in angular? If so, could you show me how, please?
Thank you!
edit
Heres sample result of chatDetails:
{
msgList: [
{ author: 0, text: 'hi', date: 1493050181799 },
{ author: 1, text: 'hola!', date: 1493050181801 },
{ author: 1, text: 'wilkomen', date: 1493050181802 },
{ author: 0, text: 'czesc', date: 1493050181803 }
{ author: 0, text: 'ciao', date: 1493050181804 }
{ author: 1, text: 'bonjour', date: 1493050181805 }
]
}
Somehow desired result:
<div class="message-list">
<div class="message-group" data-author="1">
<div class="message">
<p>hola</p>
</div>
<div class="message">
<p>ciao</p>
</div>
</div>
<div class="message-group" data-author="0">
<div class="message">
<p>hola</p>
</div>
</div>
<div class="message-group" data-author="1">
<div class="message">
<p>hola</p>
</div>
<div class="message">
<p>hola</p>
</div>
</div>
</div>

I believe your problem can be solved with "orderBy".
https://docs.angularjs.org/api/ng/filter/orderBy
It would look something like:
<div class="message" ng-repeat="msg in chatDetails.msgList | orderBy: 'date'">
<p>{{ msg.text }}</p>
</div>
If your msg objects have some date or index value, you can sort by that number.

AngularJS expression doesn't work in a different view

So I have this problem with creating a new view. The routeing works just fine because it shows the required HTML perfectly, but the expressions which worked just fine in the main view don't show up in the new.
<a href="#/view/{{todo.id}}" id="super" ng-repeat="todo in todos | filter: search">
<div id="main" ng-class="{'done': todo.done}">
<input type="checkbox" ng-model="todo.done" />
<span>{{todo.title}}</span>
<button id="info">i</button>
<div class="inf">
<span>Prioritás: {{todo.priority}}</span>
</div>
<div class="inf" id="sec">
<span>Határidő: {{todo.deadLine | date: "yyyy. MMMM. dd"}}</span>
</div>
</div>
</a>
These are the expressions in the main view, they work like a charm.
myTodoList.config(['$routeProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('', {
templateUrl: 'index.html',
controller: "mainController"
})
.when('/view/:id', {
templateUrl: 'view.html',
controller: "mainController"
}).otherwise({
redirectTo: ''
});
This is the routeing part, this is working.
<div id="mainContent">Master Detail
<div ng-controller="mainController" ng-view></div>
</div>
This is the div where the new view goes.
<div>
<p>Should be the ID: {{todo.id}}</p>
<p> should be the title: {{todo.title}}</p>
<p> this works: {{1+2}}</p></div>
And this is the view.html. The third expression is working, so I have the problem with de other two expressions. I think I messed up this because I can't reach the data I want. todo.id and todo.title are data created by a function in real time.
$scope.addTodo = function(title, priority, deadLine, id) {
$scope.todos.push({
'id': lastId,
'title': $scope.newTodo,
'done': false,
'priority': $scope.newPriority,
'deadLine': $scope.newDeadLine
});
$scope.newTodo = ''
$scope.newPriority = ''
$scope.newDeadLine = ''
lastId++;
}
This is the function I am using. I hope I described the problem well.

Are you using ng-repeat in your new view ?
<div>
<p>Should be the ID: {{todo.id}}</p>
<p> should be the title: {{todo.title}}</p>
<p> this works: {{1+2}}</p></div>
Your Scope variable name is $socpe.todos but here you are trying to access todo make sure if you are inside the ng-repeat if this is not your problem then share your full code on fiddle or codepen.

Just like Jeyenthaaran Nanjappan said, i think your div should look like this:
<div ng-repeat="todo in todos">
<p>Should be the ID: {{todo.id}}</p>
<p> should be the title: {{todo.title}}</p>
<p> this works: {{1+2}}</p>
</div>

Okay, I solved the problem. I needed to separate the different objects. So I made a function.
$scope.currentTodo = $scope.todos[0];
$scope.selectTodo = function(todo) {
$scope.currentTodo = todo;
}
I made a div and called this function with it.
<div ng-click="selectTodo(todo);" id="super" ng-repeat="todo in todos | filter: search">
And the problematic div now looks like this.
<div id="mainContent">Master Detail
<div>
<p>Should be the ID: {{currentTodo.id}}</p>
<p> should be the title: {{currentTodo.title}}</p>
</div>
</div>
Thank you for your help! I think both of you helped me through this problem.

Some issues in the nesting of the div and html. Change this:
<div id="mainContent">Master Detail
<div ng-repeat="todo in todos" ng-controller="mainController" ng-view></div>
<p>Should be the ID: {{todo.id}}</p>
<p> should be the title: {{todo.title}}</p>
<p> this works: {{1+2}}</p>
</div>
to this:
<div id="mainContent">Master Detail
<div ng-repeat="todo in todos" ng-controller="mainController">
<p>Should be the ID: {{todo.id}}</p>
<p> should be the title: {{todo.title}}</p>
<p> this works: {{1+2}}</p>
</div>
</div>

Trouble with ng-repeat

I'm trying to get to grips with AngularJS and had this working to echo individual things from a controller, but when I tried to incorporate a loop with ng-repeat all I get is {{tasks.title}} flashing onscreen for a second, then a blank empty div.
Any examples I've looked up seem a little different and I've tried a few ways, can anyone see where I'm going wrong?
Controller:
app.controller('MainController', ['$scope', function($scope) {
$scope.tasklist = {
tasks: [{
title: 'Wash Dog'
}, {
title: 'Email Joe'
}]};
}
]);
HTML:
<section class="panel">
<div ng-controller="MainController">
<div class="thumbnail" ng-repeat="tasks in tasklist">
<p>{{ tasks.title }}</p>
</div>
</div>
</section>

You are accessing the property tasklist not the actual tasks. It should be tasklist.tasks
<section class="panel">
<div ng-controller="MainController">
<div class="thumbnail" ng-repeat="tasks in tasklist.tasks">
<p>{{ tasks.title }}</p>
</div>
</div>
</section>
Another way would be to remove the tasks property:
app.controller('MainController', ['$scope', function($scope) {
$scope.tasklist = [
{
title: 'Wash Dog'
},
{
title: 'Email Joe'
}
];
}]);