My JSON has Accounts, Contacts, and Ticket information within it. It will output the Account and Contact as a dropdown using ng-repeat to give the user their options. This works perfectly, until either Account or Contact have only one value.
HTML
<select class="form-control input-sm"
id="accountSelect" ng-model="option.account"
ng-options="account.id as account.name for account in accounts | orderBy: 'name'">
</select>
JavaScript
$scope.accounts = info.Account.Account;
Example of JSON (simplified)
{
"Account":{
"Account":{
"id":1234567,
"name":"Account Name",
"phone":"123-456-7890"
},
"count":1
},
"Contacts":{
"Contacts":[
{
"id":1234,
"name":"Smith, John",
"accountID":1234567
},
{
"id":56789,
"name":"Smith, Jane",
"accountID":1234567
}
],
"count":2
}
}
For me, the select options are all populated by undefined values. If there are more than one Account, this works fine. Why is that?
Your Account.Account is an object not array.
your account should be an array.
Like:
"Account":{
"Account":[{
"id":1234567,
"name":"Account Name",
"phone":"123-456-7890"
}],
"count":1
}
Related
Sorry, the title isn't worded very well. I'm using a category choose to choose a category from an API. I currently get the list of categories, filter through their names, and display them in the category chooser. When the user clicks submit, I want the to parse through the API and find the id associated with that category name. Here's an example output from the API:
{
"_id": "5c2fde414502d923ceafaa30",
"title": "Category 2",
"description": "My second category, testing 123",
"createdAt": "2019-01-04T22:29:21.047Z",
"updatedAt": "2019-01-04T22:29:21.047Z",
"__v": 0
},
Here's the code I use for the Category Chooser:
JS:
$.getJSON("http://localhost:2672/categories", function (json) {
$('#category-chooser').empty();
$('#category-chooser').append($('<option>').text("Choose a Category"));
$.each(json, function (i, obj) {
$('#category-chooser').append($('<option>').text(obj.title));
});
});
HTML
<select id="category-chooser" class="form-control" name="category">
<option selected="selected">blank</option>
</select>
If you store the json returned from getJSON somewhere outside the callback, your submit button would fire off something like below:
function getCategoryId(){
const categoryChooser = document.getElementById('category-chooser');
const categorySelected = categoryChooser.value;
json.forEach(entry => {
if(entry.title === categorySelected){
return entry["_id"];
}
});
}
I have a auto search module with below json structure. I need to loop through aray of json objects and use key and value as per requirements.
I have tried below code. But with provided json object, I am able to retrieve key, but not value.
lets say, for firt, Json object, I need to retrieve 'Product Apple'., but I`m getting only link.
I tried response.data[key][0] ,but getting full json object. May I Know where I have done wrong.
I have updated plunker below
[{
"/folder1/folder2/folder3/product-1": "Product Apple"
},
{
"/folder1/folder2/folder3/product-2": "Product samsung"
},
{
"/folder1/folder2/folder3/product-3": "Product lenovo"
},
{
"/folder1/folder2/folder3/product-4": "Product Asus"
},
{
"/folder1/folder2/folder3/product-5": "Product Acer"
},
{
"/folder1/folder2/folder3/product-6": "Product Vivo"
},
{
"/folder1/folder2/folder3/product-7": "Product Oppo"
}
]
code here
Since this is marked as duplicate post., I have gone through the provided solution and found that the duplicate post has solution via javascript. But I`m looking to iterate through angularjs 'ng-repeat'.
Please find plunker below for solution I have got
[code here][1]
code here
You probably want to assign that structure to a variable, and then run an *ngFor on it, like this:
// in the component file
let results = [
{
"/folder1/folder2/folder3/product-1":"Product Apple"
},
{
"/folder1/folder2/folder3/product-2":"Product samsung"
},
{
"/folder1/folder2/folder3/product-3":"Product lenovo"
},
{
"/folder1/folder2/folder3/product-4":"Product Asus"
},
{
"/folder1/folder2/folder3/product-5":"Product Acer"
},
{
"/folder1/folder2/folder3/product-6":"Product Vivo"
},
{
"/folder1/folder2/folder3/product-7":"Product Oppo"
}
]
// in the view
<ng-container *ngFor="let result of results">
view logic goes here
</ng-container>
I have two json:
all_users
"all_users":
{
"4":{
"user_id":4,
"user_name":"Miranda"
},
"7":{
"user_id":7,
"user_name":"seconduser"
}
And tickets
"tickets":
[{
"ticket_id" : 12,
"created_by" : 7,
"assigned_to": 6
}]
Now, from the json tickets, I need to search who created a ticket, i.e created_by. But, since this is id, I am not able to search it directly using name.
After doing my bit of research, I implemented this:
<input id="created-by-input" type="text" ng-model="search.created_by" placeholder="Created by" typeahead="user.user_id as user.user_name for user in transformationFunction(all_users, $viewValue) | filter:{user_name:$viewValue}" class="form-control">
And the scope:
$scope.transformationFunction = function(object) {
var newArray = [];
for(var key in object) {
newArray.push({user_id: key, user_name: object[key].user_name});
}
return newArray;
console.log(newArray)
};
However, when I am searching, I get all the relevant users when I start typing. Also, when I click on them, the search filter works and shows me the result. But, when I click on the users in the dropdown while searching, the text field shows me the ID and not the user name.
For example: I start typing Mira, the dropdown shows Miranda, when I click on it, the text field shows me 4.
What am I missing out in here??
If you would store your users as an array
e.g.
$scope.users = [{
id: 1,
name: "Fancyname"
},
{
id: 2,
name: "Fancyname2"
}]
You could use the .map function like this:
var index = $scope.users.map(function(x) {return x.id; }).indexOf(idYourAreLookingFor);
var user= $scope.users[index];
Hi I'm relatively new to AngularJs. I know the basics and the essentials. However I'm trying to implement a search function for my website. It works...but not in the way I'd like it to.
Currently...there's a search box with data shown below it...and that's even before I've entered the data. As I type in the search box...it narrows down to the appropriate name. Pretty standard stuff. It's very similar to this jsfiddle:example jsfiddle
<body ng-app="personApp">
<div class="container">
<header></header>
<div ng-controller="PersonListCtrl">
<div class="bar">Search:
<input ng-model="query">
</div>
<ul class="">
<li ng-repeat="person in persons | filter:query">{{person.name}}</li>
and
var personApp = angular.module('personApp', []);
personApp.controller('PersonListCtrl', function ($scope, $http) {
$http.get('data/persons.json').success(function (data) {
$scope.persons = data;
});
$scope.persons = [{
"name": "Mike Doe"
}, {
"name": "Jhon Doe"
}, {
"name": "Sam Doe"
}, {
"name": "Sam Doe"
}, ];
});
I don't want this to happen. It's already searching through json file by default. I don't want any names visible until I enter a keyword and it shows the required information matching that keyword.
Is it possible to prevent this from happening while maintaining the same functionality?
If you are looking to hide the list of people when there is nothing being search then just use a ng-show on the list of people.
Something like this:
<ul class="" ng-show="query">
<li ng-repeat="person in persons | filter:query">{{person.name}}</li>
This will show the list only when query is true. query is false when its empty.
Updated Fiddle - http://jsfiddle.net/rCrGP/23/
...while maintaining model bindings?
I have a select menu like so:
<select class="form-control" ng-model="activeTask" ng-options="task.title for task in tasks"> </select>
That populates some text like so:
<span>{{activeTask.title}}</span>
The Projects resource grabs some json here (which is working fine):
function TimerCtrl($scope, Projects) {
$scope.projects = Projects.get({}, {isArray:true}, function(projects) {
$scope.tasks = $scope.projects[0].tasks;
$scope.activeProject = $scope.projects[0];
$scope.activeTask = $scope.tasks[0];
});
}
This is the Projects service (which is working fine as well):
angular.module('projectServices', ['ngResource']).
factory('Projects', function($resource) {
return $resource('data/projects.json', {}, {
get: {method:'GET', isArray:true}
});
});
and this is the JSON (which is also fine):
[
{
"title":"Chores",
"url_title":"chores",
"category":"Home",
"tasks": [
{"title":"Cleaning", "url_title":"cleaning"},
{"title":"Yard Work", "url_title":"yard_work"},
{"title":"Walking the Dogs", "url_title":"url_title"}
]
},
{
"title":"Personal Website",
"url_title":"personal_website",
"category":"Work",
"tasks": [
{"title":"Design", "url_title":"design"},
{"title":"Front End Dev", "url_title":"front_end_dev"},
{"title":"Node Dev", "url_title":"node_dev"},
{"title":"PHP Dev", "url_title":"php_dev"}
]
}
]
Everything works fine with the numeric values that Angular automatically creates.
My problem is...the values need to be the url-friendly string task.url_title but the option text should be task.title.
Any help would be greatly appreciated. I want to go drink a beer!
So, here's the solution I went with:
I used the task object itself as the value like so:
<select class="form-control" ng-model="activeTask" ng-options="task as task.title for task in tasks">
This allowed me to easily bind the span value to display the task title, not url_title:
<span>{{activeTask.title}}</span>
Thanks to #sza for his pointing me in the right direction. His suggestions are in the comments of the correct answer.
You can change the comprehension expression to
ng-options="task.url_title as task.title for task in tasks"
Working Demo
You need to use ng-options="...". Also use ng-model="..." or otherwise it won't work.
Here's the breakdown of it:
<select ng-options="ITEM.VALUE as ITEM.LABEL for ITEM in ITEMS" ng-model="val">
<option>placeholder value which goes at the top of the element</option>
</select>