I am showing the information in the table using angularjs,html.
I want to strike through the ID displayed in the second column of the table whose status is "delivered" given in productstatus of $scope.items.
Demo : http://plnkr.co/edit/m0x5TQNY4QprCF5CqRSn?p=preview&preview
I tried as below , but unable to show strikethrough for productID's 10,12 in row1 and 11A,100AX in row3:
<a ng-repeat="pid in item.productid.split(',')" href="https://urladdr/associateid={{associateNum}}" target="_blank">
<span data-ng-class="item.productstatus.split(',')[$index] === 'delivered' ? 'strikethrough' : 'null'">{{pid}}
</span><span ng-if="$index+1 != item.productid.split(',').length">;</span>
</a>
json object:
$scope.items = [{
"name":"John",
"product":"Laptop",
"productid":"10,11X,12",
"standing": true,
"productstatus":{"10":"delivered","11x":"Shipped","12":"delivered"}
},{
"name":"Rob",
"product":"Mobile",
"productid":"13PX",
"standing": true,
"productstatus":{"13PX":"Shipped"}
},{
"name":"Dan",
"product":"Laptop",
"productid":"",
"standing": true,
"productstatus":null
},{
"name":"Robert",
"product":"Laptop",
"productid":"11A,100AX",
"standing": true,
"productstatus":{"11A":"delivered","100AX":"delivered"}
}]
You're trying to split a json object which you can't do. If productstatus is changed to a string you can keep your code as is. Otherwise you'll want to do a ng-repeat with key/value pairs. (i.e. ng-repeat="(key, prop) in item.productstatus" or use the key directly i.e. data-ng-class="item.productstatus[pid] === 'delivered' ? 'strikethrough' : 'null'"
The following works for me if you want to copy and replace your code:
<a ng-repeat="pid in item.productid.split(',')" href="https://urladdr/associateid={{associateNum}}" target="_blank">
<span data-ng-class="item.productstatus[pid.trim()] === 'delivered' ? 'strikethrough' : 'null'">{{pid}}
</span><span ng-if="$index+1 != item.productid.split(',').length">;</span>
</a>
Updated: added trim() based on comments.
Pay attention that your data structure of item.productstatus is an Object and not Array.
Therefore you should change the usage to something like that: item.productstatus[pid].
http://plnkr.co/edit/s7ySyexnVrhzSXkY
Pro TIP: Use the map to boolean option of ng-class directive, it is more cleaner.
ng-class="{className: item.productstatus[pid] === 'delivered'}"
The result of the evaluation can be a string representing space delimited class names, an array, or a map of class names to boolean values. In the case of a map, the names of the properties whose values are truthy will be added as css classes to the element.
Related
i want to create football matches using this JSON:
export const teams: Array<any> = [
{
name: 'A',
teams: [
{
name: 'France',
},
{
name: 'Portugual',
},
{
name: 'india',
},
{
name: 'china',
}
]
},
]
so for example i want to make matches france vs india than france vs china .
so i am using Angular 8 , and i have some issues if anyone can help me in that code .
HTML:
<div class="col-3" *ngFor="let group of group1">
<h5>{{ group }}</h5>
</div>
TypeScript:
this.group1 = this.teams;
this.teams.forEach((item, index) => {
this.groupList.push(item.name);
item.teams.forEach((item, index) => {
this.group1.push(item.name);
});
});
What I believe you want to do is display a list of all possible matches within this JSON, and I assume that since the teams array is in it's own array of objects with a name tag, that there may be separate groups of matches that you wish to display.
I have created a Stackblitz project you can view here to see my implementation of what I believe it is you are looking for.
I will explain my code below.
HTML:
<div class="col-3" *ngFor="let group of groupList">
<h5>{{ group }}</h5>
</div>
I wasn't sure what the difference between 'group1' and 'groupList' were supposed to be in your code, so I have selected groupList as my display value, and use 'group1' as a property in the TS.
TS:
for (let teamGroup of this.group1) {
this.groupList.push("Group: " + teamGroup.name); // show the group
for (let team1 of teamGroup.teams) {
for (let team2 of teamGroup.teams) {
// iterate over every possibility of two teams facing each other
if (
this.groupList.indexOf(
String(team1.name + " vs. " + team2.name)
) === -1 &&
this.groupList.indexOf(
String(team2.name + " vs. " + team1.name)
) === -1
) {
// filter out matchups already pushed to the array
if (team1.name !== team2.name) {
// filter out self-matches
this.groupList.push(team1.name + " vs. " + team2.name);
}
}
}
}
}
In the Stackblitz implementation, I'm using 'teams' as a property of my component, assigned to the JSON you provided, but you can get this JSON dynamically and use this code, just make sure to assign the value to the 'group1' property.
The 'groupList' property is an empty array, which we will .push() the values we wish to display to. By looping over the 'teams' array within the first (and only) entry in your JSON, we can decide on a display format for the string (I have chosen 'Team1 vs. Team2') and compare all possible matchups between two teams within the group against entries in 'groupList'. If the matchup does not exist, we will push the matchup to 'groupList'.
The end result is this:
Results
I hope this was what you were looking for. I would have asked a clarifying question in the comments first, but I'm too new to the website to be able to.
Using Schema JSON, I have this drop down list that has data populated into it. Each item in the drop down list has a value. How do I get that value and populate data into a different text box?
For example, let's say the drop down looks like:
A
B
C
D
If the user selects "A", how do I find that the user selected "A"? Or even get the selected value 1? And then getting the selected value, a textbox under will say "Correct" or "Incorrect".
Here's what I'm working with:
vm.sf.form = [
{
type: 'fieldset',
title: 'Some Title',
items: [
{ key: "Answers", title: "Choose One", type: 'select', onChange: "itemSelected(form.titleMap)", titleMap: getTitleMap()},
{ key: "isCorrect" title: "Your Answer is: ", type: 'string', readonly: true}
]
}];
The "onChange: "itemSelected(form.titleMap)" calls a function itemSelected, which is where I would like to have the functionality check what is selected.
The form.titleMap returns "A, B, C, D" but not the actual selected value.
The function for itemSelected looks like this:
$scope.itemSelected = function (value) {
var answer = value;
if (answer == 'A'){
//set isCorrect to say "Correct" in the text box...
}
}
The itemSelected function just test code for now..
In this function, "value" returns "A, B, C, D" instead of the actual selected value, since I am passing in the titleMap. How do I pass in the selected value? And then how do I change the textbox text to say "Correct" or "Incorrect"?
I figured it out when I changed the form.titleMap to "this". It helped me map around the form to find the actual value that was selected. When I found the actual selected value, it was easy to do the rest.
I hope this helps others that may have the same issue...
I have something like this in my table "superheroes":
name | attributes
Batman | {"dead": false, "orphan": true, "billionaire": true, "goodboy" : true}
how can I return all attributes that are true?
I know how to retrieve the value of specific attribute such as
select json_extract((SELECT attributes from superheroes where name = 'Batman'),'$.orphan')
this will return true, which is correct. But I need to find all attributes that are true. Is there a way in MySQL?This is just example, but real situation is little bit too much complicated... Thanks in advance.
I think the closest to what you want is JSON_SEARCH()
SELECT JSON_SEARCH(attributes, 'all', 'true')
FROM superheroes
WHERE name = 'Batman';
However, for this to work, the values have to be strings, not booleans, because JSON_SEARCH treats the search string as a LIKE pattern to match against strings, not a JSON value. So the JSON has to be:
{"dead": "false", "orphan": "true", "billionaire": "true", "goodboy" : "true"}
DEMO
I am converting a shopping basket to an immutable structure.
Is there an easy way with immutablejs to see if an immutable object already exists within an immutable list EXCEPT for one object property 'quantity' which could be different? List example:
[{
id: 1,
name: 'fish and chips',
modifiers: [
{
id: 'mod1',
name: 'Extra chips'
}
],
quantity: 2
},{
id: 2,
name: 'burger and chips',
modifiers: [
{
id: 'mod1',
name: 'No salad'
}
],
quantity: 1
}]
Now, say I had another object to put in the list. But I want to check if this exact item with modifiers exists in the list already? I could just do list.findIndex(item => item === newItem) but because of the possible different quantity property then it wont work. Is there a way to === check apart from one property? Or any way to do this without having to loop through every property (aside from quantity) to see if they are the same?
Currently, I have an awful nested loop to go through every item and check every property to see if it is the same.
Well this should work-
list.findIndex(item => item.delete("quantity").equals(newItem.delete("quantity"))
The equals method does deep value comparison. So once you delete the quantity, you are comparing all values that matter.
PS: please ignore code formatting, I am on SO app.
PPS: the above code is not optimal, you should compare a pre-trimmed newItem inside the arrow function instead of trimming it there.
Im new to angularJS and web designing as a whole. Im trying to get a data field(or element) from a JSON. For example, this is what the JSON looks like
{
"Name":"Raymond Eugene Monce",
"Dateofbirth":"1924-0308T00:00:00Z",
"Ethnicity":"Caucasian",
"Languages":["{English}"],
},
and I'm trying to get the "Name" data field. This is what my .js file looks like,
var profile = angular.module('profile', ['ui.bootstrap','ngResource']);
profile.controller("profileController", ["$scope","$resource", function($scope, $resource) {
// get the user id
$scope.userid = sessionStorage["cerestiuserid"];
// json we get from server
$scope.apicall = sessionStorage["cerestihome"]; // NEED TO CHANGE API
// grabs the user we want
$scope.userResource = $resource($scope.apicall + "/api/userprofile/",
{Userid:21},
{'get':{method: 'POST'}}
);
// fetch JSON
$scope.userResource.get(function(result) {
// get the name field
$scope.name = result;
sessionStorage["name"] = JSON.stringify(result);
});
and my .html file,
<div ng-controller = "profileController" style="float:left">
<!-- profile pic -->
<div class="pull-left">
<div class="container-fluid">
<div class="profile">
<div class="row">
<div class="center-block">
<div class="profilePic">
<img ng-src="{{profilePic()}}" class="img-responsive">
<!-- name field -->
<label class="caption">
<h4>{{name.name}}</h4>
</label>
</div>
Again, Im not having problems with the Database or API calls. I just want to know how I can get and display the name field of the JSON. Thanks.
strelok2010's comment above should work although that depends on if your result really looks like the one defined at the top of your question.
Your result seems to be a normal javascript object not JSON. (yeah they are different, and that confused me when I learned it.) I assume that because you stringify the result from a javascript object into JSON. Therefore if that is working right your result is either a javascript object or an array of javascript objects. I'm assuming an array. You might want to check though.
I noticed your earlier post had a related problem.
In that one you were asking to access a property of an object that was in an array. In that case it was result as well. Here was the answer from your previous question
var result = [{"name": "Jason"
"date of birth": "february 23, 2985"
....
}];
var firstResultsName = result[0].name;
There are two things I am unsure of due to the inconsistency between this and your last question.
First your name property in your results object is spelled with a capital N here as opposed to a lower case n in your last question.
Keep in mind that capitilization matters in javascript.
Second your result in your last question was an array of objects and in this it seems to be just an object.
So depending on which one it is will determine your solution. So instead of writing every possible solution I'll show you how to determine the solution.
Remember we are dealing with a normal array of javascript objects. I'll try to go into detail so it's extra clear (sorry I heard you were new to web developement, I'm assuming JavaScript too.), but sorry if it's a little too detailed. I will also be breaking it into parts to go deeper into the array of objects that I'll use in my example, but traversing into the data structure can all be done in a single line as I will show.
You can only do actions on the 'outermost-form' (by the way 'outermost-form' is just a term I'll use for clarification it's not really a technical term.) and work your way into the collection (object/array/string)
As an example we have an array of people, with the array being the 'outermost-form'
var people = [
{
"name": "Bob",
"occupation": "Architect",
"date of birth": "01/23/83"
},
{
"name": "Timothy",
"Occupation": "Accountant",
"date of birth": "02/23/78"
}
];
If we saw the value of people at this moment it not surprisingly be.
[
{
"name": "Bob",
"occupation": "Architect",
"date of birth": "01/23/83"
},
{
"name": "Timothy",
"Occupation": "Accountant",
"date of birth": "02/23/78"
}
]
Start with the Array
Since it's an array as the 'outermost-form' we can get one of its values using an index. Just like any other array. Just for a bit of contrast I'll show you how what we are doing is similar to any other array by showing an example of an array by itself
// simple array example
var array = ["foo", "bar", "baz"];
array[0] // returns "foo"
// more simple array example, but less practical (it's more just for showing how javascript can work.)
["foo", "bar", "baz"][2] // returns "baz"
Back to our main example. Let's make a variable person and store our first person in the people array in that value.
var person = people[0];
Now if saw our person variable it would equal the following
{
"name": "Bob",
"occupation": "Architect",
"date of birth": "01/23/83"
}
You can see just like the normal array it grabs the first item in the array. You can see how we are slowly traversing into our people data structure. (that being an array of objects.)
Enter the Object
Okay so now we have the person object, but we want the name of that person so since we are dealing with an object we have to access its properties we can do this with either 'dot notation', e.g. <object>.<property>, or 'bracket notation' which can be done with either a variable or a string for the property name. e.g. <object>.["<property>"] or <object>.[<variable>]
So just as a side example I will show you what it normally takes to get the value of a property of an object just so you can compare and see there's no 'magic' going on. Keep in mind javascript is case-sensitive. Also javascript objects properties can go with or without surrounding quotes unlike JSON. One last thing having a space in the property name forces us to use quotes, and also forces us to access that property via bracket notation.
var result;
var obj = { foo: 1, Bar: 2, "foo bar": 3 };
var randomVarName = "Bar"; // notice the capital B in Bar is important since it was declared that way.
result = obj.foo; // result equals 1
result = obj[randomVarName]; // result equals 2
result = obj["foo bar"]; // result equals 3
Back again to our main train of thought. So we have traversed into our people array to find the person object now let's get their name.
var name = person.name;
The value of name would be.
"Bob"
You can do with that what you wish. You could have also used any of the previous ways to get an objects property including bracket notation.
Do Everything we just did in a Single Line
So to write that all in one line you would just write
people[0].name
Apply to your Question
So to apply to your question if your result looks like this
var result = [
{
"name": "Jason"
"date of birth": "february 23, 2985"
....
}
];
Then you need this to get the name
result[0].name
If it's just this
var result = {
"name": "Jason"
"date of birth": "february 23, 2985"
....
}
Then you just need
result.name
As asked in the comment if you want to get the date of birth property out of the object you need to use bracket notation to get the element out of an object. Bracket notation is one of the two object property accessors the other being dot notation. I covered both at the enter the object section. It can be used at anytime, but is usable in some cases that dot notation does not work.
An example and quote from MDN:
get = object[property_name];
object[property_name] = set;
property_name is a string. The string does not have to be a valid identifier; > it can have any value, e.g. "1foo", "!bar!", or even " " (a space).
So since certain character like spaces can't be used in dot notation bracket notation must be used in those special cases when those characters are present.
Below is the bracket notation of the date of birth.
result["date of birth"]
Like I said before it can be used anywhere, but generally dot notation is preferred for its brevity. So just to show that, we will show the name field being accessed using bracket notation:
result["name"]
One additional reason you may want to use bracket notation is for its ability to use variables like so.
var prop_name = "date of birth";
result[prop_name];
which actually if you understand the principle of that example the MDN example might make more sense.
If you have a question feel free to leave me a comment.