Develop Reference

How to get the object and display in html javascript

I would like to know how to iterate over object array in javascript.
I have an array sample in which property options should be displayed in lit-HTML for every object
var sample = [{
"trans": [{
"id": "trans",
"fee": 20,
"options": ["credit", "debit"]
}],
"insta": [{
"id": "insta",
"fee": 30,
"options": ["bank", "credit"]
}]
}]
render(){
sample.map((r)=>{
<select>
r.options.map((e)=>
return html`
<option>${e.options}</option>
`
)
</select>
}
}

I think what you need here is something like this (you are missing the return in the render function):
var sample=[{
"trans":[{
"id": "trans",
"fee": 20,
"options": ["credit", "debit"]
}],
"insta":[{
"id": "insta",
"fee": 30,
"options":["bank", "credit"]
}]
}]
render(){
return sample.map((r)=>{
<select>
r.options.map((e)=>
return html`
<option>${e.options}</option>
`
)
</select>
}
}

you are applying Array.map to r.options, so each element is already a single option, so you need to simply invoke
r.options.map( e => html`<option>${e}</option>`)

e is already the value of the options array element, you don't need to use e.options. So it should just be
<option>${e}</option>
You also need to loop over r.trans.options and r.insta.options.
render(){
sample.map((r)=>{
<select>
r.trans.options.map((e)=>
return html`
<option>${e}</option>
`
)
</select>
<select>
r.insta.options.map((e)=>
return html`
<option>${e}</option>
`
)
</select>
}
}

How to select json items base on their parent in vue.js

I'd like to have two select boxes for users to mention their location data.
When user chooses the province Bar from the first select box, the second selct box should be populated with the cities of the province:
Here is the json data:
Provinces: [
{
"Province": "Foo",
"Cities": [
{
"name": "Fooland"
},
{
"name": "Fooville"
}
} ,
{"Province": "Bar",
"Cities": [
{
"name": "Barland"
},
{
"name": "Barville"
},
{
"name": "Barak"
}
}
]
The province select box works fine:
<select v-model="province">
<option v-for="(p, index) in provinces" :key="index" >{{ p.Province }}</option>
selected: {{province}},
</select>
But I can not get the cities of Bar in the second select box:
<select v-model="city">
<option v-for="(c, index) in provinces.province.Cities" :key="index">{{ c.name }}</option>
</select>
Appreciate your hints on how to fix this?

TLDR: Change the first <select>'s value to be the selected province object (which contains Cities), and use that value to populate the second <select>'s options.
The value of <select> is the value of the selected <option>. if you don't explicitly specify a value for an <option>, the default value is the <option>s inner text (standard behavior). So, you can assign a value that is different from the <option> label, and the value can be an object:
<option :value="myOptionValue">My Option Label</option>
Thus, you can assign the underlying province object model (i.e., p in this case) to the <option>s in the provinces <select>:
<option :value="p" v-for="(p, index) in provinces">
Notice the :value="p", where p is the province object, containing Cities.
After selecting the province, province can be used in the cities <select> to populate its <options> with city names:
<select v-model="city">
<option v-for="(c, index) in province.Cities" :key="index">{{ c.name }}</option>
</select>
const Provinces = [
{
"Province": "Foo",
"Cities": [
{ "name": "Fooland" },
{ "name": "Fooville" }
]
},
{
"Province": "Bar",
"Cities": [
{ "name": "Barland" },
{ "name": "Barville" },
{ "name": "Barak" }
]
}
];
new Vue({
el: '#app',
data() {
return {
province: '',
city: '',
provinces: Provinces
}
},
watch: {
province(newValue) {
// reset city when province changes
this.city = '';
}
}
})
<script src="https://unpkg.com/vue#2.5.17"></script>
<div id="app">
<select v-model="province">
<option value="" disabled>Select province</option>
<option v-for="(p, index) in provinces" :value="p" :key="index">{{ p.Province }}</option>
</select>
<select v-model="city" :disabled="!province">
<option value="" disabled>Select city</option>
<option v-for="(c, index) in province.Cities" :key="index">{{ c.name }}</option>
</select>
</div>

Get Id of selected item in datalist

I am having an input element and a datalist for suggestions. I am feeding the an array of object to datalist for suggestions which looks like this
[
{
"id": "9cb98eab-7cd4-47d0-8b30-5512a826a3c0",
"type": "Person",
"name": "Shahrukh Khan"
},
{
"id": "8133586f-ef81-4200-96e8-aff71858ade4",
"type": "Person",
"name": "B. Jayashree"
},
{
"id": "f9d186d9-5fb9-484b-93c7-274d0ca75eb7",
"type": "Person",
"name": "B. Jayashree"
},
{
"id": "b39279f5-e7d4-4013-a785-ce88013d9a76",
"type": "Person",
"name": "E T Mohammed Basheer"
},
{
"id": "8ea077b0-609e-45c6-a839-7735a87557d7",
"type": "Person",
"name": "E. T. Mohammed Basheer"
}
]
I want to know the id of selected option of datalist. I know how to get the value (via value of input element). But I don't want the value of selected item, I want the id.
Here is my input and datalist element
<div>
<Input className="add-tag-name-input" id="name-field" list='languages' onChange={this.onNameValueChanged.bind(this)}/>
<datalist id='languages'>
{this.state.existing_faces && this.state.existing_faces.map((item,i)=>{
return <option value= {item.name} />
})}
</datalist>
</div>
Consider existing_faces as the array I have shown above. How can I get the id of selected option. (There is an id in each object in above array)

Pass the selected item as complete object. Not just the name. Only display the name. In your code you only return the name. But you could return the item or the item.id. The value should be the item. You can still display the name of the item. But passed the object for handling.
Like (Pseudo code):
<option value=item>{item.name}</option>
Or only the id:
<option value={item.id}>{item.name}</option>
Maybe you have to adjust a bit to conform with your code. but the main message is, that you can set a tag value and pass the item as object as option value.
<option value={what-ever-you-want}>{what-the-user-will-see}</option>
Working native HTML example:
<select onchange="console.log(this.value)">
<option value="id-1">Name 1</option>
<option value="id-2">Name 2</option>
<option value="id-3">Name 3</option>
<option value="id-4">Name 4</option>
</select>
Will print the id of the selected item in console of the browser. (Press F12 or Ctrl + Shift + i to show the console)

You could put the id from the array as a value in the JSX.
<option value= {item.name} data-id={item.id} />

Filter JSON based on selected dropdown option

I have a JSON file with a list of countries which has 2 keys: "name" and "areacode". I have dropdown with a list of options that has a value attr witch is the same as the "name" key in the JSON file.
Long story short: I want to display the "areacode" value in the json file when the selected option in the dropdown matches the "name" value in the JSON file
UPDATE
I have pasted the code here: http://codepen.io/sarfehjou/pen/RpKMWE
The only difference is that in my solution I have to get the JSON file by a url
HTML
<select>
<option value="Afghanistan GLOBAL">Afghanistan GLOBAL</option>
<option value="Albenter code hereania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
</select>
Script
var list = {
"countries": [
{
"name": "Afghanistan GLOBAL",
"areacode": ""
},
{
"name": "Albania",
"areacode": ""
},
{
"name": "Algeria",
"areacode": ""
},
{
"name": "American Samoa",
"areacode": ""
},
{
"name": "Andorra",
"areacode": ""
}
]
}

Your question is quite vague as already established, i.e. not sure what you need to do with area code and stuff? anyway this is what i could work out:
basically added an event listener on the select and whenever you change it, looks up the value from list (the list can be from the server or cached).
Have a look, if you get more ideas asks some more.
var list = {
"countries": [
{
"name": "Afghanistan GLOBAL",
"areacode": "8787"
},
{
"name": "Albania",
"areacode": "446"
},
{
"name": "Algeria",
"areacode": "212"
},
{
"name": "American Samoa",
"areacode": "767"
},
{
"name": "Andorra",
"areacode": "5454"
}
]
}
var countrySelect = document.getElementById('countrySelect');
countrySelect.addEventListener('change', function(e) {
console.log(this.value);
console.log(findAreaCode(this.value));
});
function findAreaCode(name) {
var resultItems = list.countries.filter(function(currentItem) {
return currentItem.name == name;
})
console.log(resultItems[0]);
return resultItems[0]? resultItems[0].areacode: 'N/A';
}
<select id="countrySelect">
<option value="Afghanistan GLOBAL">Afghanistan GLOBAL</option>
<option value="Albenter code hereania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
</select>

I have pasted the code her: http://codepen.io/sarfehjou/pen/RpKMWE
The only different is that in my solution I have to get the json file by a url
<select>
<option value="Afghanistan GLOBAL">Afghanistan GLOBAL</option>
<option value="Albenter code hereania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
</select>
var list = {
"countries": [
{
"name": "Afghanistan GLOBAL",
"areacode": ""
},
{
"name": "Albania",
"areacode": ""
},
{
"name": "Algeria",
"areacode": ""
},
{
"name": "American Samoa",
"areacode": ""
},
{
"name": "Andorra",
"areacode": ""
}
]
}

To answer your question, you can do this,
$.getJSON("http://api/somejsonfile/",function(data){
// Initializing an empty array
var options=[];
// Running a loop on the response JSON and adding the options to a string array
$.each(data.countries,function(id,eachcountry){
options.push("<option value='"+eachcountry.areacode+"'>"+eachcountry.name+"</option>");
});
// Joining the string and replacing it inside the select element
$(".dropdown").html(options.join(""));
});
This is a rough implementation so there might be some syntactical issues!!
Adding a simple example
$(document).ready(function(){
// This is a sample country code JSON from Github
$.getJSON("https://gist.githubusercontent.com/Goles/3196253/raw/9ca4e7e62ea5ad935bb3580dc0a07d9df033b451/CountryCodes.json",function(data){
// Initializing an empty array
var options=[];
// Running a loop on the response JSON and adding the options to a string array
$.each(data,function(id,eachcountry){
options.push("<option value='"+eachcountry.dial_code+"'>"+eachcountry.name+"</option>");
});
// Joining the string and replacing it inside the select element
$(".dropdown").html(options.join(""));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dropdown">
<option value="">Select</option>
</select>

ng-repeat not working when given a dynamic index in an array

I have this array in $scope.types (example data) :
[
{
"id": 1,
"description": "Cat",
"property_type": [
{
"id": 1,
"description": "Nickname",
},
{
"id": 2,
"description": "Age",
},
{
"id": 3,
"description": "Color",
}
]
}
]
I want to populate a ng-repeat with the properties of the type. Here's what I did :
<div ng-repeat="property in types[parseInt($('#select_type').val())].property_type">
{{property.description}}
</div>
This code doesn't show anything. However, if I replace $('#select_type').val() with 0, which is the offset of the object in the array, it works. What I don't understand is that if I look in the console what's the value of $('#select_type').val(), I get "0"... so it should work, unless there's something I don't get right with Angular (which is probably the case here).
If it can help, here's my select :
<select ng-options="type.id as type.description for type in types" ng-model="current_data.object_type_id" id="select_type">
<!-- Generated by ng-options, not hardcoded -->
<option value="0" selected="selected">Cat</option>
<option value="1">Dog</option>
</select>
Have any idea?

Try to use the following code:
<div ng-repeat="property in current_data.property_type">
{{property.description}}
</div>
<select ng-options="type.description for type in types" ng-model="current_data" id="select_type">
<option value="">select</option>
</select>

Try this on your ng-repeat
<div ng-repeat="property in types[current_data.object_type_id].property_type">
{{property_type.description}}
</div>