We Keep Coding

How to fetch the label from API name in Aura Component Controller

I have written a Apex class which return the list of objects in a String to be add in the drop down list in the AURA cmp Now I want to change the API name to label in the JS controller itself so is there any to fetch the Label from the API name.
doInit: function(component, event, helper) {
var action = component.get("c.getAllObjects");
var inputIndustry = component.find("InputAccountIndustry");
var opts=[];
action.setCallback(this, function(a) {
opts.push({
class: "optionClass",
label: "--- None ---",
value: ""
});
for(var i=0;i< a.getReturnValue().length;i++){
console.log(a.getReturnValue()[i]);
var labelReference = $A.getLabel("$Label.c.---" + a.getReturnValue()[i]);
console.log('label is ' + labelReference);
opts.push({"class": "optionClass", label: a.getReturnValue()[i], value: a.getReturnValue()[i]});
}
inputIndustry.set("v.options", opts);
});
$A.enqueueAction(action);
},

How to get iti__dial-code in intl-tel-input?

I want just to get only country code with plus in html input, this intl-tel-input now working, that showing specific country code number example. I don`t want this , what i need is just to show automatically iti__dial-code (country code) .
How can i solve this issue ?
var input = document.querySelector("#phone");
intlTelInput(input, {
customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
return "(201) 555-0123" ;
},
});
window.intlTelInput(input, {
initialCountry:"auto",
geoIpLookup: function(success, failure){
$.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) {
var countryCode = ('+' && resp && resp.country) ? resp.country : "";
success(countryCode);
});
},
dropdownContainer: document.body,
utilsScript: "Project A_files/utils.js",
});

You need to get instance of input and then get it's country data.
var iti = window.intlTelInputGlobals.getInstance(input);
var countryData = iti.getSelectedCountryData();
Country data will return something like:
{
name: "Afghanistan (‫افغانستان‬‎)",
iso2: "af",
dialCode: "93"
}
Get the dialcode by:
var dialCode = countryData["dialCode"];
Refered from the official documentation of the library at https://github.com/jackocnr/intl-tel-input

Using php array in javascript to populate a 'select' ajax

I have a multidimensional array of stores and states, which makes a json as follows:
<?php
$list[$store][$state] = $city;
echo json_encode ($list);
{"store 1": {"state x": "city 1", "state y": "city 2"}, "store 2": {"state z": "city 3"}}
?>
I need to create a select that changes the second select according to what was chosen, using the data of the array in question.
Something like this http://www.daviferreira.com/blog/exemplos/cidades/index.php
How can I handle this data in php for javascript?
And how can I separate them to use them in each select?
I've already tried:
var list = JSON.parse ("<? php echo json_encode($list)?>");
But it did not work :(
EDIT The structure of the selects should look like this.
{"store 1": {"state x": "city 1", "state y": "city 2"}, "store 2": {"state z": "city 3"}}
First select
Store 1
Store 2
if store 1 selected
Second select
State x
State y
if store 2 selected
Second select
State z
Something like that

You can simply do this using jQuery:
$(document).ready(function(){
var list = <?= json_encode($list); ?>;
var storeSelect = $("<select></select>");
storeSelect.attr('id', 'storeSelect');
for(var item in list)
{
storeSelect.append('<option value="' + item + '">' + item + '</option>');
}
$('#theForm').append(storeSelect);
var storeStates = $("<select></select>");
storeStates.attr('id', 'storeState');
$('#theForm').append(storeStates);
$('#storeSelect').change(function ()
{
var storeName = $(this).val();
for(var item in list[storeName])
{
storeStates.html('<option value="' + item + '">' + item + '</option>');
}
});
$('#storeSelect').change();
});
It simply uses loops to create the select menu. And uses the onChange event to manipulate the values.

Here's how to do it using jQuery. If you're using plain JS, converting it is an exercise for the reader.
var list = <?php echo json_encode($list); ?>;
$.each(list, function(store) {
$("#store_menu").append($("<option>", {
value: store,
text: store
}));
});
$("#store_menu").change(function() {
var store = $(this).val();
$("#state_menu").empty();
$.each(list[store], function(state) {
$("#state_menu").append($("<option>", {
value: state,
text: state
}));
});
});

How to add data to an array from text box/s?

I'm fairly stuck on this, I'm playing catchup on course work.
How do I go about adding values to an array using string from text boxes on the page?
var book = [
{
"name":"Book 1",
"publisher":"Publisher 1",
"isbn":"ISBN 1"
},
{
"name":"Book 2",
"publisher":"Publisher 2",
"isbn":"ISBN 2"
},
{
"name":"Book 3",
"publisher":"Publisher 3",
"isbn":"ISBN 3"
},
];
book.push({"name":"Moby Dick","publisher":"Ryan Spain","isbn":"00147097"});
I know I can push it into the array but I want to add values to name, publisher and isbn from values attained from text boxes in HTML.

EDIT: Adding information
Imagine you have three inputs with the following ids "name", "publisher", "isbn".
var name = document.getElementById('name');
var pub = document.getElementById('publisher');
var isbn = document.getElementById('isbn');
You could add a button when the user is ready to add a book to your list:
<button id="add">Add</button>
var button = document.getElementById('add');
Then you could add an onclick:
button.onclick = function(){
book.push({'name': name.value, 'publisher': pub.value, 'isbn':isbn.value});
}
Getting information:
Is how you would do it.
book[0].name = "Book test";
You could loop through all your books and update them one by one:
for(var i = 0; i < book.length; i++){
book[i].name = "Book " + i;
//etc
}

Properly using the data-bind visible property

I have a view that displays data from a foreach loop in different categories depending on the type. Each category will contain a number of users - I created an object that will check to see if the number of users in a category are more than 10 then the text for the visible bind will show. And for the category that doesn't have more than 10 it will not show the text.
My question: if the first category doesn't have 10 it won't show text does that mean that it won't also show text for the remaining categories?
Help with: the visible binding is not working even though a category would contain more than 10 and not sure why.
Here is my JSFiddle: http://jsfiddle.net/xNdJk/1/
JavaScript:
var userViewModel = function (data) {
var _self = this;
_self.Name = ko.observable(data.Name);
_self.Letter = ko.observable(data.Letter);
_self.ShowLetter = ko.computed(function () {
return (roleViewModel.UserCount > 13);
});
};
var typeViewModel = function (data) {
var _self = this;
_self.ContentType = ko.observable(data.ContentType);
_self.Name = ko.observable(data.Name);
_self.Rank = ko.observable(data.Rank);
_self.UserCount = ko.observable(data.UserCount);
_self.Users = ko.observableArray([]);
};
View:
<div class="collapse in" data-bind="template: { name: 'list', foreach: $data.Users }">
</div>
<div id="letter" data-bind="visible:ShowLetter, text: Letter"></div>

You are mixing classes and instances, you have created a secondModel class but you never instance it, here is a working example
http://jsfiddle.net/xNdJk/2/
var viewModel = function(){
this.Letter = ko.observable('Hello, World!');
this.secondModel = new secondModel();
this.shouldShowMessage = ko.computed(function() {
return (this.secondModel.UserCount() > 13);
}, this);
}
var secondModel = function(){
var self = this;
self.UserCount = ko.observable(153);
}