Stuck in a problem where I have list of lists and i want to re-order the lists of list through drag and drop my model is
{
"selected": null,
"lists": {
"A": [
{
"data": "code"
},
{
"data": "code enable"
},
{
"data": "code disable"
}
],
"B": [
{
"data": "code"
},
{
"data": "code enable"
},
{
"data": "code disable"
}
],
"C": [
{
"data": "code"
},
{
"data": "code decode"
},
{
"data": "code decode"
}
]
}
}
Now I want to re-order this model in such a way that if i drag the lists C to lists A it should replace the div new model will be
{
"selected": null,
"lists": {
"C": [
{
"data": "code"
},
{
"data": "code decode"
},
{
"data": "code decode"
}
],
"B": [
{
"data": "code"
},
{
"data": "code enable"
},
{
"data": "code disable"
}
],
"A": [
{
"data": "code"
},
{
"data": "code enable"
},
{
"data": "code disable"
}
],
}
}
app.html
<div ng-repeat="list in models.lists" class="col-md-6">
<div class="panel panel-info" ng-repeat="data in lists">
<div class="panel-heading">
<h3 class="panel-title">List {{data.data}}</h3>
</div>
</div>
</div>
app.js
$scope.models = {
selected: null,
lists: {"A": [], "B": [],"C":[]
};
// Generate initial model
Related
I have a challenge, i am trying to bind my object data on the screen that will eventually loop when there are more items added. How do i make the brackets dissapear during render Any help please
new Vue({
el: "#app",
data: {
box: [
{
"Title": "Welcome!",
"Topics": [
{
"Title": "Overview of Courses"
},
{
"Title": "tETS 1"
},
{
"Title": "TEST 3"
},
{
"Title": "TEST 4"
},
{
"Title": "TEST 5"
}
],
"Description": {
"Text": "",
"Html": ""
}
},
{
"Title": "Module 500: test test",
"Modules": [
{
"Title": "GRADE WORK",
"Modules": [],
"Topics": [
{
"Title": "1.1 [Assignments] SET UP",
"Description": {
"Html": "<div class=\"container\">\n<h2>Description</h2>\n<p>Pick two differently shaped objects that are white.</div>"
}
}
],
"LastModifiedDate": "2020-10-30T01:20:30.627Z",
"Description": {
"Text": "",
"Html": ""
}
},
{
"Title": "act gas",
"Modules": [],
"Topics": [
{
"Title": "Introduction"
}
],
"LastModifiedDate": "2020-10-30T01:20:30.780Z",
"Description": {
"Text": "",
"Html": ""
}
}
],
"Topics": [
{
"Title": "Intro"
}
],
"LastModifiedDate": "2020-10-30T01:20:30.273Z",
"Description": {
"Text": "",
"Html": ""
}
}
]
},
methods: {
toggle: function(todo){
todo.done = !todo.done
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>Todos:</h2>
<div v-for="box_data in box" :key="box_data.id">
<strong><span class="text-center bold"> {{ box_data.Title}} </span></strong>
<ul v-for="topics in box_data.Topics" :key="topics.id">
<li> {{ topics }} </li>
</ul>
</div>
</div>
You're currently rendering the entire topics object, but you only need the Title property of that object, so update your string interpolation to render that specific property:
<ul v-for="topics in box_data.Topics" :key="topics.id">
👇
<li> {{ topics.Title }} </li>
</ul>
new Vue({
el: "#app",
data: {
box: [
{
"Title": "Welcome!",
"Topics": [
{
"Title": "Overview of Courses"
},
{
"Title": "tETS 1"
},
{
"Title": "TEST 3"
},
{
"Title": "TEST 4"
},
{
"Title": "TEST 5"
}
],
"Description": {
"Text": "",
"Html": ""
}
},
{
"Title": "Module 500: test test",
"Modules": [
{
"Title": "GRADE WORK",
"Modules": [],
"Topics": [
{
"Title": "1.1 [Assignments] SET UP",
"Description": {
"Html": "<div class=\"container\">\n<h2>Description</h2>\n<p>Pick two differently shaped objects that are white.</div>"
}
}
],
"LastModifiedDate": "2020-10-30T01:20:30.627Z",
"Description": {
"Text": "",
"Html": ""
}
},
{
"Title": "act gas",
"Modules": [],
"Topics": [
{
"Title": "Introduction"
}
],
"LastModifiedDate": "2020-10-30T01:20:30.780Z",
"Description": {
"Text": "",
"Html": ""
}
}
],
"Topics": [
{
"Title": "Intro"
}
],
"LastModifiedDate": "2020-10-30T01:20:30.273Z",
"Description": {
"Text": "",
"Html": ""
}
}
]
},
methods: {
toggle: function(todo){
todo.done = !todo.done
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>Todos:</h2>
<div v-for="box_data in box" :key="box_data.id">
<strong><span class="text-center bold"> {{ box_data.Title}} </span></strong>
<ul v-for="topics in box_data.Topics" :key="topics.id">
<li> {{ topics.Title }} </li>
</ul>
</div>
</div>
I have a problem pointing dataTable to the right spot in the JSON. I receive a nested array:
{
"status": "ok",
"count": "7",
"msg ": "Operation Successful",
"data": [{
"contactHasServiceArea": true,
"issueCategories": [{
"id": "8",
"description": "Finance"
},
{
"id": "9",
"description": "Housing"
},
{
"id": "10",
"description": "International"
}
],
"cases": [{
"id": 31645,
"client_name": "Matthew",
"issue": "Assessment Completion",
"referral": null,
"opened_date": "10\/07\/2017",
"case_status": "Open"
}, {
"id": 31668,
"client_name": "Fanky ",
"issue": "Complex",
"referral": null,
"opened_date": "01\/07\/2017",
"case_status": "Open"
}]
}]
}
How do I point to the "cases" object? I'm sure this is simply, but I'm confused by the many options in the dataTables config.
I tried variations of data, dataSrc as well as data.cases or just cases, etc.
Thanks
$('#cases_table').DataTable( {
"ajax": "ajax/getCases",
"dataSrc" : "data.cases",
"data" : "cases",
"columns": [
{ "data": "client_name" },
{ "data": "issue" },
{ "data": "referral" },
{ "data": "opened_date" },
{ "data": "case_status" }
]
} );
You can configure like this:
$('#cases_table').DataTable( {
"ajax": {
"url": "ajax/getCases",
"dataSrc" : "data.cases"
},
"columns": [
{ "data": "client_name" },
{ "data": "issue" },
{ "data": "referral" },
{ "data": "opened_date" },
{ "data": "case_status" }
]
} );
datasrc points into the returns json. Remove the data option.
I received the JSON response from the server mentioned below.
{
"employeeId": null,
"id": "DB06442E-2993-4FE8-B496-5A0CF61C8342",
"message": null,
"objects": [
{
"Children": [],
"Fields": [
{
"Key": "CallID",
"Value": 1000
},
{
"Key": "CallDate",
"Value": "Sep 9 2016 10:14AM"
},
{
"Key": "ClientName",
"Value": ""
},
{
"Key": "AssetName",
"Value": "Automatic Cold Cranking Simulator"
},
{
"Key": "CallCategory",
"Value": "Corrective Maintenance"
}
],
"Type": 8
},
{
"Children": [],
"Fields": [
{
"Key": "CallID",
"Value": 1000
},
{
"Key": "CallDate",
"Value": "Sep 9 2016 10:20AM"
},
{
"Key": "ClientName",
"Value": ""
},
{
"Key": "AssetName",
"Value": "Auto Mini Pour Point Tester "
},
{
"Key": "CallCategory",
"Value": "Preventive Maintenance"
}
],
"Type": 8
},
{
"Children": [],
"Fields": [
{
"Key": "CallID",
"Value": 1000
},
{
"Key": "CallDate",
"Value": "Sep 9 2016 10:23AM"
},
{
"Key": "ClientName",
"Value": ""
},
{
"Key": "AssetName",
"Value": "Balance - Citizon CX 220"
},
{
"Key": "CallCategory",
"Value": "Calibration"
}
],
"Type": 8
},
{
"Children": [],
"Fields": [
{
"Key": "CallID",
"Value": 1001
},
{
"Key": "CallDate",
"Value": "Sep 9 2016 10:26AM"
},
{
"Key": "ClientName",
"Value": ""
},
{
"Key": "AssetName",
"Value": "Others"
},
{
"Key": "CallCategory",
"Value": "Installation"
}
],
"Type": 8
}
],
"success": true
}
Can you please explain me bit more as per my json structure.
myhtml.html
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="item in callItems" type="item-text-wrap" ng-click="doTask()">
<h3 style="color:black;">{{item.CallID}}</h3>
<h3 style="color:black;">{{item.CallDate}}</h3>
<p style="color:black;">{{item.ClientName}}</p>
<p style="color:black;">{{item.AssetName}}</p>
<p style="color:black;">{{item.CallCategory}}</p>
</ion-item>
myjs.js
$http.post("http://testCrm.com/GetAllObjects",
{"objectId":null,"objects":null,"searchParams":null,"sessionId":"DB06442E-2993-4FE8-B496-5A0CF61C8342","type":8})
.success(function(data) {
alert("SUCCESS!");
$rootScope.callItems = data;
console.log($rootScope.callItems);
})
.error(function(data) {
alert("ERROR");
alert(data);
});
As per my code I can able to get the response But How can i parse the value in View ?
you can follow this also
<div ng-repeat="(key, value) in item.Fields">
<h3 style="color:black;"> {{value.Value}}</h3>
</div>
<button ng-click=something($index,item.Fields[0].Value)>check it</button>
</div>
js
add the below function and see u will get a alert with index
$scope.something=function(a,b){
alert(a);//alerts index
alert(b);//alerts CaalID of that index
}
working codepen
new requirments
this might not be the best solution but it's a working demo. i think you need to change the json object structure again and re create it according to your requirement.
<div ng-repeat="item in callItems.objects">
<div ng-repeat="fi in item" >
<div ng-repeat="kk in fi">
<h3 style="color:black;" ng-if="kk.Key == 'CallID'">{{kk.Value}}</h3>
<h3 style="color:black;" ng-if="kk.Key == 'CallDate'">{{kk.Value}}</h3>
<h3 style="color:black;" ng-if="kk.Key == 'ClientName'">{{kk.Value}}</h3>
<h3 style="color:black;" ng-if="kk.Key == 'AssetName'">{{kk.Value}}</h3>
<h3 style="color:black;" ng-if="kk.Key == 'CallCategory'">{{kk.Value}}</h3>
</div>
</div>
I have the following collection:
"items": [{
"id": 1,
"title": "Montrachet",
"imageUrl": "http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"imageUrls": [
"http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"http://media.riepenau.com/wines/17973_b.jpg",
"http://lorempixel.com/400/400/food/3"
],
"properties": [
{"description" : "Kırmızı Şaraplar Desc"},
{"region" :"Bordeaux"},
{"age": "16"},
{"producer" :"Kayra"},
{"grapeType":"Espadeiro"}
],
"priceGlass": "1",
"priceBottle": "2",
"year": "1999"
},
{
"id": 2,
"title": "Montrachet2",
"imageUrl": "http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"imageUrls": [
"http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"http://media.riepenau.com/wines/17973_b.jpg",
"http://lorempixel.com/400/400/food/3"
],
"properties": [
{"description" : "Kırmızı Şaraplar Desc"},
{"region" :"Bordeaux"},
{"age": "16"},
{"producer" :"Kayra"},
{"grapeType":"Chardonnay"}
],
"priceGlass": "1",
"priceBottle": "2",
"year": "1999",
}
]
I want to grab unique grapeTypes from that collection. The returning array shold be ["Chardonnay","Espadeiro"]
What is the best way to do it with lodash?
I think this combination of pluck, map and filter should do it:
var result = _.chain(obj.items).pluck('properties').map(function(obj) {
return _.filter(obj, function(prop) {
return prop.grapeType;
})[0].grapeType;
}).uniq().value();
console.log(result);
Check the demo run below.
// Code goes here
var obj = {
items: [{
"id": 1,
"title": "Montrachet",
"imageUrl": "http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"imageUrls": [
"http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"http://media.riepenau.com/wines/17973_b.jpg",
"http://lorempixel.com/400/400/food/3"
],
"properties": [{
"description": "Kırmızı Şaraplar Desc"
}, {
"region": "Bordeaux"
}, {
"age": "16"
}, {
"producer": "Kayra"
}, {
"grapeType": "Espadeiro"
}
],
"priceGlass": "1",
"priceBottle": "2",
"year": "1999"
},
{
"id": 2,
"title": "Montrachet2",
"imageUrl": "http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"imageUrls": [
"http://winebuff.com.hk/products_image/3376-Ramonet-ChassagneMontrachetBlanc.jpg",
"http://media.riepenau.com/wines/17973_b.jpg",
"http://lorempixel.com/400/400/food/3"
],
"properties": [{
"description": "Kırmızı Şaraplar Desc"
}, {
"region": "Bordeaux"
}, {
"age": "16"
}, {
"producer": "Kayra"
}, {
"grapeType": "Chardonnay"
}
],
"priceGlass": "1",
"priceBottle": "2",
"year": "1999",
}
]
};
var result = _.chain(obj.items).pluck('properties').map(function(obj) {
return _.filter(obj, function(prop) {
return prop.grapeType;
})[0].grapeType;
}).uniq().value();
document.write(JSON.stringify(result));
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.js"></script>
UPD. If grapeType can be missing from properties then the script should be
var result = _.chain(obj.items).pluck('properties').map(function(obj) {
return (_.filter(obj, function(prop) {
return prop.grapeType;
})[0] || {}).grapeType;
}).compact().uniq().value();
Here's one way to do it with lodash:
_(items)
.pluck('properties')
.map(function(item) {
return _.find(item, _.ary(_.partialRight(_.has, 'grapeType'), 1));
})
.pluck('grapeType')
.uniq()
.value();
First, you get the properties arrays using pluck(). Next, you use find() to get the first object in this array that has a grapeType property. This is done using has(), and partially-applying the argument to build the callback function.
Next, you use pluck() again to get the actual property values. Finally, uniq() ensures there are no duplicates.
I have the following object in my AngularJS Controller:
{"team":"1","name":"abc","age":"20"},
{"team":"1","name2":"def","age2":"21"},
{"team":"2","name":"ghi","age":"22"},
{"team":"2","name2":"jkl","age2":"23"},
I need to group the items into one array object, by the team key.
{
"team": [
{"name1":"abc","age1":"20", "name2":"def", "age2":"21"},
{"name1":"ghi","age1":"22", "name2":"jkl", "age2":"23"}
]
}
So I can later use the information like $scope.data.team[1].name2
EDIT: One Team always consists of 4 players by the way.
How would I do this?
edit: working plunkr for your needs: http://plnkr.co/edit/zxoOYV?p=preview
you should rearrange your structure. i.e. you could go for something like this:
{"team": [
{"players": [
{"name" : "abc", "age": 20},
{"name" : "def", "age": 34},
]},
{"players": [
{"name" : "abc", "age": 20},
{"name" : "def", "age": 34},
]}
]}
if you use this structure in your controller:
$scope.team = {...}
and use it in your html like:
<div ng-controller="TeamController">
<div ng-repeat="players in team">
<div ng-repeat="player in players">
<div>Name: {{player.name}}</div>
<div>Name: {{player.age}}</div>
</div>
</div>
</div>
so, for your example, i got the angular-schema-form working.
with the above structure the schema looks like this:
[
{
"type": "help",
"helpvalue": "<h4>Tabbed Array Example</h4><p>Tab arrays can have tabs to the left, top or right.</p>"
},
{
"key": "team",
"type": "tabarray",
"add": "New",
"remove": "Delete",
"style": {
"remove": "btn-danger"
},
"title": "value.name || 'Team '+$index",
"items": [
{
"key": "team[].players",
"title": "Players",
"items": [
{
"key": "team[].players[].name",
"title": "Name"
},
{
"key": "team[].players[].age",
"title": "Age"
}
]
}
]
},
{
"type": "submit",
"style": "btn-default",
"title": "OK"
}
]
and the corresponding schema:
{
"type": "object",
"title": "Team",
"properties": {
"team": {
"type": "array",
"items": {
"type": "object",
"properties": {
"players": {
"type": "array",
"maxItems": 4,
"items": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"age": {
"type": "integer"
}
},
"required": [
"name",
"age"
]
}
}
},
"required": [
"players"
]
}
}
}
}