Related
I am trying to access the student tags array which has an object inside of it (student_tags:tag:"do not contact") Can someone please help me with the syntax on getting this data? I am pretty sure my syntax in retrieving this array is incorrect.
JSON Data being fetched:
{
"id":"e90c4c93-207c-49f7-89c4-eb85b3315dd5",
"created_by_user_id":"8560ed12-2858-4237-bea2-3dcab82637d3",
"date_created":"2019-08-06T22:54:59.583257+00:00",
"person_number":5973,
"first_name":"Test",
"middle_name":"James",
"last_name":"Cook",
"birth_name":null,
"email":"test#gmail.com",
"alt_email":null,
"facebook_url":null,
"linkedin_url":"https://www.linkedin.com/in/test-burns-273a5165/",
"gender":"Male",
"phone_numbers":[
{
"phone_type":"Mobile",
"number":"449288809"
},
{
"phone_type":"Home",
"number":"93938289"
}
],
"is_no_contact":false,
"is_client":false,
"student_detail":{
"onboarding_student_setting_id":"e189187a-cc91-43c6-ac44-635328b1e95a",
"student_onboarding_setting":{
"id":"e189187a-cc91-43c6-ac44-635328b1e95a",
"created_by_user_id":"562a63a2-e24e-4ff7-8358-dfb74ed6c70a",
"title":"High School On-boarding Process",
"description":"High School On-boarding Process",
"is_default":false,
"onboarding_steps":[
{
"step_id":"9cd30560-1c3c-4382-b8a2-505e78b9ce4d",
"set_tags":[
"Student Tag"
],
"set_to_status":"Potential",
"title":"Contact",
"short_title":"Contact",
"is_attachment_required":null
},
{
"step_id":"e6f90546-a516-416c-a880-9adc10358f1d",
"set_tags":[
],
"set_to_status":"Pipeline",
"title":"Program Orientation",
"short_title":"PO",
"is_attachment_required":null
},
{
"step_id":"8660df59-ddd8-4182-b6ca-c44e3de70969",
"set_tags":[
],
"set_to_status":"Confirmed",
"title":"Parental Consent",
"short_title":"Parental Consent",
"is_attachment_required":true
}
],
"is_disabled":false
},
"student_onboarding_history":[
],
"onboarding_steps_complete":null,
"onboarding_percent":null,
"graduating_student_setting_id":null,
"student_graduating_setting":null,
"student_graduating_history":[
],
"graduating_steps_complete":null,
"graduating_percent":null,
"is_active":true,
"date_deactivated":"2019-08-09T03:36:57.977584",
"deactivated_person_id":"562a63a2-e24e-4ff7-8358-dfb74ed6c70a",
"deactviated_notes":null,
"student_status":"Pipeline",
"language_group":null,
"heritage":null,
"date_ics_set":"2019-08-08T04:28:48.832170",
"ics_by_person_id":"562a63a2-e24e-4ff7-8358-dfb74ed6c70a",
"ics_status":"Active",
"ics_id":null,
"ics_start":null,
"ics_end":null,
"ics_notes":null,
"student_tags":[
{
"tag":"Do not contact",
"date_added":"2019-08-13 06:06:13.012817"
}
],
"student_source":"Other",
"date_of_birth":"2019-08-07",
"semester_number_start":null,
"semester_year_start":null,
"semester_number_end":null,
"semester_year_end":null,
"location_address":{
"line_1":"34 Adelaide Avenue",
"line_2":"",
"suburb":"east lindfield",
"postcode":"2322",
"state":"",
"country_code":"AU",
"location_description":"east lindfield, ",
"formatted_location":null,
"latitude":"-33.7691871",
"longitude":"151.1863407"
},
"emergency_first_name":"Someone",
"emergency_last_name":"",
"emergency_phone_numbers":[
],
"emergency_address":{
"line_1":"hi",
"line_2":"",
"suburb":"willoughby",
"postcode":"4154",
"state":"NSW",
"country_code":"AU",
"location_description":"willoughby, NSW",
"formatted_location":null,
"latitude":"-33.804179",
"longitude":"151.2042376"
},
"emergency_relationship":"Auntie",
"university":null,
"campus":null,
"degree_pool_id":[
],
"degree":null,
"degree_major":null,
"high_school":"School",
"high_school_complete":null,
"is_travel_required":null,
"date_alumni_set":null,
"alumni_set_by_person_id":null,
"alumni_company":null,
"alumni_job_title":null,
"alumni_city":null,
"alumni_state":null,
"alumni_country_code":null,
"alumni_notes":null,
"is_at_risk":null,
"date_at_risk_set":null,
"at_risk_by_person_id":null,
"at_risk_context":null,
"at_risk_reasons":null,
"at_risk_semester":null,
"at_risk_year":null,
"at_risk_notes":null,
"quick_notes":null,
"cv_url":null,
"public_summary":null,
"public_profile":null,
"is_graduating":null,
"graduating_by_person_id":null,
"graduating_semester":null,
"graduating_year":null,
"graduating_notes":null,
"advisor_users":[
{
"date_created":"2019-08-06T22:54:59.582970+00:00",
"is_primary":true,
"advisor_person_id":"8560ed12-2858-4237-bea2-3dcab82637d3"
}
]
},
"contact_detail":{
"company_id":null,
"contact_tags":null,
"location_address":{
"line_1":null,
"line_2":null,
"suburb":null,
"postcode":null,
"state":null,
"country_code":null,
"location_description":null,
"formatted_location":null,
"latitude":null,
"longitude":null
},
"job_title":null,
"quick_notes":null,
"is_primary":null,
"is_billing":null,
"is_student_contact":null,
"advisor_users":null
},
"current_placements":null,
"previous_placements":null
}
The function returning the JSON response:
var url = "http://api.com/v1/";
var response = UrlFetchApp.fetch(url, options);
var message = response.getContentText();
var code = response.getResponseCode();
Logger.log(message)
var tags = message["student_tags"][0]
Logger.log(tags)
In response to 'would you know how to use the key/value loop to access the same student tag value ("Do not contact")?', I'm not sure I understand the question, but the below code may be a good place to start. Let me know if I'm way off track...
var tags = message.student_detail.student_tags,
i = 0,
len = tags.length;
for (i; i < len; i++) {
var obj = tags[i];
for (a in obj) {
console.log(a, obj[a])
}
}
I am trying to be able to drop JSON formatted data into a textarea to be able to pull out one piece of data at a time. Currently I am just trying to get the names output to a DIV. This is a static HTML file with one textarea, one button and 1 DIV. I am not getting any output which I do not understand. Any assistance would be greatly appreciated.
HTML
<!DOCTYPE html>
<html>
<head>
<script>
function parser(){
var results = document.getElementById("results");
var information = document.getElementById("TTP");
var data = JSON.parse("information");
results.innerHTML = "";
for(var obj in data){
results.innerHTML += data[obj].user+" is present +"<br />";
}
results.innerHTML = "requesting...";
}
</script>
</head>
<body>
<textarea id="TTP"></textarea>
<div id="results"></div>
<input type="button" onClick="parser()" value="Run"></input>
</body>
</html>
JSON Data
{ "user":"John", "age":22, "country":"United States" },
{ "user":"Will", "age":27, "country":"United Kingdom" },
{ "user":"Abiel", "age":19, "country":"Mexico" },
{ "user":"Rick", "age":34, "country":"Panama" },
{ "user":"Susan", "age":23, "country":"Germany" },
{ "user":"Amy", "age":43, "country":"France" },
{ "user":"Pete", "age":18, "country":"Italy" },
{ "user":"Chris", "age":25, "country":"United States" },
{ "user":"Louis", "age":31, "country":"Spain" },
{ "user":"Emily", "age":38, "country":"Uraguay" },
{ "user":"Shawn", "age":52, "country":"Chile" },
{ "user":"Greg", "age":24, "country":"Romania" }
There are a few issues in your code, the main one being your parsing of information
You're passing the literal string "information" instead of the value of the text box
The other issues are with your string concatenation as pointed out by Nick Parsons, and with the line results.innerHTML = "requesting..."; as this will just override what your for loop has set
function parser() {
var results = document.getElementById("results");
var information = document.getElementById("TTP");
var data = JSON.parse(information.value);
results.innerHTML = "";
for (var obj in data) {
results.innerHTML += data[obj].user + " is present <br/> ";
}
}
<textarea id="TTP"></textarea>
<div id="results"></div>
<input type="button" onClick="parser()" value="Run"></input>
P.S you will have to wrap your dataset in [] to denote it's an array
function parser(){
var results = document.getElementById("results");
var information = document.getElementById("TTP").value; // <-- 1
var data = JSON.parse(information); // <-- 2
results.innerHTML = "";
for(var obj in data){
results.innerHTML += data[obj].user+" is present <br>"; // <-- 3
}
//results.innerHTML = "requesting..."; // <-- 4
}
<textarea id="TTP">[{ "user":"John", "age":22, "country":"United States" },
{ "user":"Will", "age":27, "country":"United Kingdom" },
{ "user":"Abiel", "age":19, "country":"Mexico" },
{ "user":"Rick", "age":34, "country":"Panama" },
{ "user":"Susan", "age":23, "country":"Germany" },
{ "user":"Amy", "age":43, "country":"France" },
{ "user":"Pete", "age":18, "country":"Italy" },
{ "user":"Chris", "age":25, "country":"United States" },
{ "user":"Louis", "age":31, "country":"Spain" },
{ "user":"Emily", "age":38, "country":"Uraguay" },
{ "user":"Shawn", "age":52, "country":"Chile" },
{ "user":"Greg", "age":24, "country":"Romania" }]</textarea>
<div id="results"></div>
<input type="button" onClick="parser()" value="Run"></input>
Changes:
document.getElementById() gets an element, you need its value
"information" is a string, information is the variable you want to parse
" is present +"<br />" was not a correct string
The "requesting..." string overwrote the result, it is commented now
Your JSON is not a JSON, it needs surrounding []-s to become a list
I am getting some dynamic data from Ajax call in JSON format on
var out;
request.done(function( data ) {
out = data;
console.log(out);
});
which looks like
{
"seq":"1",
"node":"1407",
"edge":"1721",
"cost":"0.00155228618815934",
"st_astext":"MULTILINESTRING((-124.339494 49.3269419000001,-124.3387254 49.3269805,-124.338669 49.3270201,-124.3386158 49.3270832000001,-124.3386343 49.3274121000001,-124.3386975 49.3274896,-124.3390742 49.3276439000001,-124.3394701 49.3277238000001,-124.339726 49.3277574000001,-124.3398638 49.3277496000001,-124.3399475 49.3277140000001,-124.3400263 49.3276270000001,-124.3402516 49.3272857000001,-124.340277 49.3271520000001,-124.3402715 49.3270367000001,-124.3402042 49.3269591000001,-124.3401021 49.3269305000001,-124.339494 49.3269419000001))"
}{
"seq":"2",
"node":"2459",
"edge":"43870",
"cost":"0.0014795249102581",
"st_astext":"MULTILINESTRING((-123.4051866 48.4191865000001,-123.4053714 48.4191387000001,-123.405405 48.4190178000001,-123.4050125 48.4186474000001,-123.4047663 48.4185377000001,-123.4045437 48.4185367000001,-123.4044758 48.4185937,-123.4043546 48.4189586000001,-123.404408 48.4190429000001,-123.4051866 48.4191865000001))"
}{
"seq":"3",
"node":"14962",
"edge":"15633",
"cost":"0.00144452021471863",
"st_astext":"MULTILINESTRING((-124.2005178 48.8657682,-124.2008549 48.8656748000001,-124.2011903 48.8656273,-124.2020436 48.8656722000001,-124.2029403 48.8658963,-124.2033335 48.8659029,-124.2034588 48.8658654000001,-124.2034906 48.8658182,-124.2034447 48.8657724,-124.203297 48.8657185000001,-124.203148 48.8656980000001,-124.2027598 48.865705,-124.20221 48.8655579000001,-124.2017332 48.8654932000001,-124.200973 48.8654362,-124.2006816 48.8654025000001,-124.200004 48.8651794,-124.1997069 48.8650816000001,-124.1995273 48.8650453000001,-124.1992556 48.8650290000001,-124.1988955 48.8649418000001,-124.1987556 48.8649332000001,-124.1986996 48.8649719000001,-124.1986801 48.8650336000001,-124.1986764 48.8650454,-124.1987314 48.8651373000001,-124.1988681 48.8651927000001,-124.1992515 48.8652406000001,-124.1995975 48.8653437,-124.2000068 48.8655325,-124.2005013 48.8657606,-124.2005178 48.8657682))"
}{
"seq":"4",
"node":"13891",
"edge":"13862",
"cost":"0.00076542396749831",
"st_astext":"MULTILINESTRING((-124.4606302 49.3438327000001,-124.4605727 49.3436995000001,-124.4604416 49.3435897000001,-124.4602789 49.3435198000001,-124.4601008 49.3434993000001,-124.4599664 49.3435289000001,-124.4598809 49.3436195,-124.4598941 49.3441714000001,-124.4599637 49.3442309000001,-124.4600623 49.3442440000001,-124.4601711 49.3441961,-124.4606302 49.3438327000001))"
}{
"seq":"5",
"node":"3684",
"edge":"28825",
"cost":"0.00117904724673861",
"st_astext":"MULTILINESTRING((-123.3495787 48.4045938,-123.3496211 48.4041484000001,-123.3493846 48.4033146,-123.3492248 48.4032068000001,-123.3490655 48.4031857000001,-123.3489141 48.4032153000001,-123.3486746 48.4033022,-123.3486286 48.4034498,-123.3494207 48.4043084,-123.3495787 48.4045938))"
}{
"seq":"6",
"node":"12168",
"edge":"11270",
"cost":"0.00109953281896407",
"st_astext":"MULTILINESTRING((-123.4652201 48.4475155000001,-123.4648358 48.4482124,-123.4650847 48.4482788,-123.4654424 48.4475732000001,-123.4652201 48.4475155000001))"
}
now I need to load the "st_astext":"MULTILINESTRING of each seq to arrays of arry like
var paths = [
[
[-124.339494,49.3269419000001],
[-124.3387254,49.3269805],
[-124.338669,49.3270201],
...
],
[
[-123.4051866, 48.4191865000001],
[-123.4053714, 48.4191387000001],
[-123.405405, 48.4190178000001],
....
]
];
To accomplish this, you can strip out the "MULTILINE..." portion of your string, and then split that string on a comma to get each set of coordinates. From there, you can split on the space separating the coordinates, and coerce to a Number. Like so:
var data = [{
"seq":"1",
"node":"1407",
"edge":"1721",
"cost":"0.00155228618815934",
"st_astext":"MULTILINESTRING((-124.339494 49.3269419000001,-124.3387254 49.3269805,-124.338669 49.3270201,-124.3386158 49.3270832000001,-124.3386343 49.3274121000001,-124.3386975 49.3274896,-124.3390742 49.3276439000001,-124.3394701 49.3277238000001,-124.339726 49.3277574000001,-124.3398638 49.3277496000001,-124.3399475 49.3277140000001,-124.3400263 49.3276270000001,-124.3402516 49.3272857000001,-124.340277 49.3271520000001,-124.3402715 49.3270367000001,-124.3402042 49.3269591000001,-124.3401021 49.3269305000001,-124.339494 49.3269419000001))"
},{
"seq":"2",
"node":"2459",
"edge":"43870",
"cost":"0.0014795249102581",
"st_astext":"MULTILINESTRING((-123.4051866 48.4191865000001,-123.4053714 48.4191387000001,-123.405405 48.4190178000001,-123.4050125 48.4186474000001,-123.4047663 48.4185377000001,-123.4045437 48.4185367000001,-123.4044758 48.4185937,-123.4043546 48.4189586000001,-123.404408 48.4190429000001,-123.4051866 48.4191865000001))"
},{
"seq":"3",
"node":"14962",
"edge":"15633",
"cost":"0.00144452021471863",
"st_astext":"MULTILINESTRING((-124.2005178 48.8657682,-124.2008549 48.8656748000001,-124.2011903 48.8656273,-124.2020436 48.8656722000001,-124.2029403 48.8658963,-124.2033335 48.8659029,-124.2034588 48.8658654000001,-124.2034906 48.8658182,-124.2034447 48.8657724,-124.203297 48.8657185000001,-124.203148 48.8656980000001,-124.2027598 48.865705,-124.20221 48.8655579000001,-124.2017332 48.8654932000001,-124.200973 48.8654362,-124.2006816 48.8654025000001,-124.200004 48.8651794,-124.1997069 48.8650816000001,-124.1995273 48.8650453000001,-124.1992556 48.8650290000001,-124.1988955 48.8649418000001,-124.1987556 48.8649332000001,-124.1986996 48.8649719000001,-124.1986801 48.8650336000001,-124.1986764 48.8650454,-124.1987314 48.8651373000001,-124.1988681 48.8651927000001,-124.1992515 48.8652406000001,-124.1995975 48.8653437,-124.2000068 48.8655325,-124.2005013 48.8657606,-124.2005178 48.8657682))"
},{
"seq":"4",
"node":"13891",
"edge":"13862",
"cost":"0.00076542396749831",
"st_astext":"MULTILINESTRING((-124.4606302 49.3438327000001,-124.4605727 49.3436995000001,-124.4604416 49.3435897000001,-124.4602789 49.3435198000001,-124.4601008 49.3434993000001,-124.4599664 49.3435289000001,-124.4598809 49.3436195,-124.4598941 49.3441714000001,-124.4599637 49.3442309000001,-124.4600623 49.3442440000001,-124.4601711 49.3441961,-124.4606302 49.3438327000001))"
},{
"seq":"5",
"node":"3684",
"edge":"28825",
"cost":"0.00117904724673861",
"st_astext":"MULTILINESTRING((-123.3495787 48.4045938,-123.3496211 48.4041484000001,-123.3493846 48.4033146,-123.3492248 48.4032068000001,-123.3490655 48.4031857000001,-123.3489141 48.4032153000001,-123.3486746 48.4033022,-123.3486286 48.4034498,-123.3494207 48.4043084,-123.3495787 48.4045938))"
},{
"seq":"6",
"node":"12168",
"edge":"11270",
"cost":"0.00109953281896407",
"st_astext":"MULTILINESTRING((-123.4652201 48.4475155000001,-123.4648358 48.4482124,-123.4650847 48.4482788,-123.4654424 48.4475732000001,-123.4652201 48.4475155000001))"
}];
var paths = data.map(elem => {
var coordsBegin = elem.st_astext.split("((")[1];
var coords = coordsBegin.split("))")[0];
return coords.split(",").map(coord => coord.split(" ").map(Number));
});
console.log(paths);
Assuming the initial data structure is an array of objects, you can loop through it and generate the desired output with Array.prototype.map
const data = [{
"seq":"1",
"node":"1407",
"edge":"1721",
"cost":"0.00155228618815934",
"st_astext":"MULTILINESTRING((-124.339494 49.3269419000001,-124.3387254 49.3269805,-124.338669 49.3270201,-124.3386158 49.3270832000001,-124.3386343 49.3274121000001,-124.3386975 49.3274896,-124.3390742 49.3276439000001,-124.3394701 49.3277238000001,-124.339726 49.3277574000001,-124.3398638 49.3277496000001,-124.3399475 49.3277140000001,-124.3400263 49.3276270000001,-124.3402516 49.3272857000001,-124.340277 49.3271520000001,-124.3402715 49.3270367000001,-124.3402042 49.3269591000001,-124.3401021 49.3269305000001,-124.339494 49.3269419000001))"
}, {
"seq":"2",
"node":"2459",
"edge":"43870",
"cost":"0.0014795249102581",
"st_astext":"MULTILINESTRING((-123.4051866 48.4191865000001,-123.4053714 48.4191387000001,-123.405405 48.4190178000001,-123.4050125 48.4186474000001,-123.4047663 48.4185377000001,-123.4045437 48.4185367000001,-123.4044758 48.4185937,-123.4043546 48.4189586000001,-123.404408 48.4190429000001,-123.4051866 48.4191865000001))"
}, {
"seq":"3",
"node":"14962",
"edge":"15633",
"cost":"0.00144452021471863",
"st_astext":"MULTILINESTRING((-124.2005178 48.8657682,-124.2008549 48.8656748000001,-124.2011903 48.8656273,-124.2020436 48.8656722000001,-124.2029403 48.8658963,-124.2033335 48.8659029,-124.2034588 48.8658654000001,-124.2034906 48.8658182,-124.2034447 48.8657724,-124.203297 48.8657185000001,-124.203148 48.8656980000001,-124.2027598 48.865705,-124.20221 48.8655579000001,-124.2017332 48.8654932000001,-124.200973 48.8654362,-124.2006816 48.8654025000001,-124.200004 48.8651794,-124.1997069 48.8650816000001,-124.1995273 48.8650453000001,-124.1992556 48.8650290000001,-124.1988955 48.8649418000001,-124.1987556 48.8649332000001,-124.1986996 48.8649719000001,-124.1986801 48.8650336000001,-124.1986764 48.8650454,-124.1987314 48.8651373000001,-124.1988681 48.8651927000001,-124.1992515 48.8652406000001,-124.1995975 48.8653437,-124.2000068 48.8655325,-124.2005013 48.8657606,-124.2005178 48.8657682))"
}, {
"seq":"4",
"node":"13891",
"edge":"13862",
"cost":"0.00076542396749831",
"st_astext":"MULTILINESTRING((-124.4606302 49.3438327000001,-124.4605727 49.3436995000001,-124.4604416 49.3435897000001,-124.4602789 49.3435198000001,-124.4601008 49.3434993000001,-124.4599664 49.3435289000001,-124.4598809 49.3436195,-124.4598941 49.3441714000001,-124.4599637 49.3442309000001,-124.4600623 49.3442440000001,-124.4601711 49.3441961,-124.4606302 49.3438327000001))"
}, {
"seq":"5",
"node":"3684",
"edge":"28825",
"cost":"0.00117904724673861",
"st_astext":"MULTILINESTRING((-123.3495787 48.4045938,-123.3496211 48.4041484000001,-123.3493846 48.4033146,-123.3492248 48.4032068000001,-123.3490655 48.4031857000001,-123.3489141 48.4032153000001,-123.3486746 48.4033022,-123.3486286 48.4034498,-123.3494207 48.4043084,-123.3495787 48.4045938))"
}, {
"seq":"6",
"node":"12168",
"edge":"11270",
"cost":"0.00109953281896407",
"st_astext":"MULTILINESTRING((-123.4652201 48.4475155000001,-123.4648358 48.4482124,-123.4650847 48.4482788,-123.4654424 48.4475732000001,-123.4652201 48.4475155000001))"
}];
var paths = data.map(({st_astext}) => {
const [ _ ,numsStr ] = st_astext.match(/\(\((.*)\)\)/);
const arr = numsStr.split(',').map(pair => pair.split(' ').map(Number))
return arr;
});
console.log(paths);
I am learning JS and I'm having an issue.
I have a sample data set: miserables.js that its in this format:
var miserables = {
nodes:[
{nodeName:"Myriel", group:1},
{nodeName:"Napoleon", group:1},
.....
{nodeName:"Mme. Hucheloup", group:8}
],
links:[
{source:1, target:0, value:1},
{source:2, target:0, value:8},
.....
{source:76, target:58, value:1}
]
};
and I'm reading it, just with this
<script type="text/javascript" src="./miserables.js"></script>
and it works perfect.
The issue comes when I want to read directly that information from two csv files:
links1.csv
source target weight
Myriel Napoleon 3
Napoleon Mme. Hucheloup 2
Napoleon Myriel 23
Mme. Hucheloup Myriel 4
... ... ...
nodes2.csv
node group description
Myriel A family A
Napoleon C family B
Mme. Hucheloup C family C
... ... ...
The script that I'm using to do so its as follows, which I can make it work:
<script>
$(document).ready(function () {
var links = [], nodes = [], links_backup = [];
d3.csv('./links1.csv',function(links_csv) {
return {
source:links_csv.source,
target:links_csv.target,
strength:links_csv.strength,
year:links_csv.year,
type:links_csv.type,
}
},function(csv_data) {
$.each(csv_data,function (idx,row) {
links.push(row)
links_backup.push(row)
})
});
d3.csv('./nodes2.csv',function (nodes_csv) {
var row = {
node:nodes_csv.node,
group:nodes_csv.group,
description_n4:nodes_csv.description_n4,
}
if (nodes_csv.hasOwnProperty('weight')) {
row.weight = nodes_csv.weight
}
return row
},function (data) {
var node_groups = {}
$.each(data,function (idx,row) {
nodes.push(row)
if (!node_groups.hasOwnProperty(row.group)) {
node_groups[row.group] = {
fill: getRandomColor()
}
}
})
})
Hello Angular experts,
I have been banging my head for half of the day to make a list of selections where its options can be hide or disable based on other selections. This is the sample coding of the page
https://jsbin.com/lufugo/1/edit?html,js,output
what I want to do is on a particular day if a room is selected, I want to remove that room select option from the other selection box of the same day.
Can some one help me out please.
First of all, I extremely recommend you to use ngOptions instead of ngRepeat. ngOptions was made exactly for this kind of things.
Well, to achieve what you want I think the simplest way is to create a new property (which, in my solution, I called it as isAvailable - boolean -), then you can easily manipulate your items based on this property.
Take a look on my solution:
(function() {
"use strict";
angular.module('app', [])
.controller('mainCtrl', function($scope) {
$scope.roomAllocation = {
"dates":[
{
"date":"2016-07-16",
"dayRooms":[
{
"room":1,
"occupancy":2,
"roomType":"Standard",
"availableRooms":[
{
"id":15,
"roomNumber":200
},
{
"id":16,
"roomNumber":201
},
{
"id":17,
"roomNumber":202
},
{
"id":18,
"roomNumber":203
}
]
},
{
"room":2,
"occupancy":3,
"roomType":"Standard",
"availableRooms":[
{
"id":15,
"roomNumber":200
},
{
"id":16,
"roomNumber":201
},
{
"id":17,
"roomNumber":202
},
{
"id":18,
"roomNumber":203
}
]
}
]
},
{
"date":"2016-07-17",
"dayRooms":[
{
"room":1,
"occupancy":2,
"roomType":"Standard",
"availableRooms":[
{
"id":15,
"roomNumber":200
},
{
"id":16,
"roomNumber":201
},
{
"id":17,
"roomNumber":202
},
{
"id":18,
"roomNumber":203
}
]
},
{
"room":2,
"occupancy":1,
"roomType":"Standard",
"availableRooms":[
{
"id":15,
"roomNumber":200
},
{
"id":16,
"roomNumber":201
},
{
"id":17,
"roomNumber":202
},
{
"id":18,
"roomNumber":203
}
]
}
]
}
]
};
// Function to set all rooms as available on initialization
function set_availables() {
$scope.roomAllocation.dates.forEach(function(date) {
date.dayRooms.forEach(function(dayRoom) {
dayRoom.availableRooms = dayRoom.availableRooms.map(function(avalRoom) {
avalRoom.isAvailable = true;
return avalRoom;
});
});
});
}
set_availables();
$scope.newRoomObject = {};
// Fires on change of the select
$scope.disable_room = function(dateIndex, roomIndex) {
var currDate = $scope.roomAllocation.dates[dateIndex];
// The current number room selected
var selectedRoomNumber = $scope.newRoomObject[currDate.date][roomIndex + 1].roomNumber;
// Setting property isAvaliable to true / false
currDate.dayRooms.forEach(function(value, index) {
if (index != roomIndex) {
value.availableRooms = value.availableRooms.map(function(avalRoom) {
avalRoom.isAvailable = avalRoom.roomNumber != selectedRoomNumber;
return avalRoom;
});
}
});
}
});
})();
div span {
margin-right: 15px;
}
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<div ng-repeat="date in roomAllocation.dates track by $index">
<div ng-repeat="rooms in date.dayRooms track by $index">
<span ng-bind="date.date"></span> <span ng-bind="'Room ' + '#' + rooms.room"></span> <span ng-bind="rooms.roomType"></span> <span ng-bind="'Occ: ' + rooms.occupancy"></span>
<span>
<select ng-options="room as room.roomNumber for room in rooms.availableRooms | filter: { isAvailable: true }" ng-model="newRoomObject[date.date][rooms.room]" ng-change="disable_room($parent.$index, $index)">
<option value="" disabled>Select Room</option>
</select>
</span>
</div>
<hr>
</div>
</body>
</html>
Note: If you have any doubts you can ask me.
I hope it helps!!