Converting JSON object format using angularjs - angularjs

I am new to Angularjs.I want to change the format of the JSON object code which I am getting into some new format.Below is the format.
$scope.filters={"filters":
[{"filterId":"106","filtername":"Service Line","filterValue":"ADI"},
{"filterId":"107","filtername":"Service Line","filterValue":"L"},
{"filterId":"108","filtername":"Service Line","filterValue":"M"},
{"filterId":"109","filtername":"Location","filterValue":"N"},
{"filterId":"110","filtername":"Band","filterValue":"O"}
]};
I want this to be changed into below format using angularjs.
$scope.filters=[{"filters":
{"ServiceLine":["ADI","L","M"],
"Location":["N"],
"Band":["0"]}
}] ;
Can anyone guide me here?

I agree with kachhalimbu that you can use underscore.js or lodash.js and use it's map function to transform you json object to another form.
If you still want to transform without using another framework you can do something like this:
var filterObject = { "filters": {} };
angular.forEach($scope.filters.filters, function(filter) {
if(!filterObject.filters[filter.filtername]) {
filterObject.filters[filter.filtername] = [];
}
filterObject.filters[filter.filtername].push(filter.filterValue)
});
filterObject will contains that format you want to use, after that you can do something like this:
$scope.filters = [];
$scope.filters.push(filterObject);

Related

GetJson with Object.values with commas within text. How to get rid of these commas?

I would like to get a specific value from a JSON with GetJson but it is inserting commas within the value/text. Here is the structure of my JSON:
{"api":
{"results":10,"fixtures":
[{"fixture_id":293298,
"league_id":1251,
"league":
{"name":"CONMEBOL Libertadores",
"country":"World",
"logo":.....
I am trying to get the "name" value i.e. "CONMEBOL Libertadores" instead I'm getting "C,O,N,M,E,B,O,L, ,L,i,b,e,r,t,a,d,o,r,e,s".
$(document).ready(function(){
$.getJSON("proxliberta.json", function(data) {
$.each(data.api.fixtures, function() {
});
console.log(Object.values(data.api.fixtures[1].league.name));
document.getElementById('val').innerHTML = Object.values(data.api.fixtures[1].league.name)
});
});
How can I eliminate these commas within my response? Thanks!
Instead of
Object.values(data.api.fixtures[1].league.name)
try changing to,
data.api.fixtures[1].league.name
Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values

How to use the information of a file readed with sap.ui.unified.FileUploader?

I'm using this namespace to take a File that has information (some Excel tables)and I just want to know how take that information to display it in my view? I know it is something related with a JSON file to save the information or something like that, please help.
This can be achived with JavaScript, but it will require third-party libraries.
In a nutshell, you have to listen to the change event:
<u:FileUploader change="onFileChange" />
In your controller, you can then read the Excel file:
onFileChange: function(oEvent) {
var aFiles = oEvent.getParameter("files");
if (aFiles && aFiles.length) {
this.processFile(aFiles[0]);
}
}
The processFile method depends on what third-party library you will use. In the end, you want to convert the Excel into a JSON and store it into a local JSONModel.
For example, if you use JS-XLSX, it could look like so:
processFile: function(f) {
var oModel = this.getModel("myLocalModel");
var oReader = new FileReader();
oReader.onload = function(e) {
var oWorkbook = XLSX.read(e.target.result, {type: 'array'});
var oSheet = oWorkbook.Sheets[oWorkbook.SheetNames[0]];
var oData = XLSX.utils.sheet_to_json(oSheet);
oModel.setData(oData);
};
oReader.readAsArrayBuffer(f);
}

How to populate angular-bootstrap-nav-tree from Api

I seem to be missing something here:
I'm trying to use https://github.com/nickperkinslondon/angular-bootstrap-nav-tree, however it's not loading.
Treeview:
<abn-tree tree-data="userPermissions" icon-leaf="material-icons https">
</abn-tree>
How I'm trying to load it:
$scope.userPermissions = [];
userService.GetUserPermissions(userLoginId).then(function(response) {
$scope.userPermissions = response.data;
},
function(error) {
$scope.errors = "Oops! Something went wrong... " + error.statusText;
});
I get a No data defined for tree error with this and also with a promise approach:
$scope.userPermissions = userService.GetUserPermissions(userLoginId);
Does anybody have a working example of how to use this control with non-static data? Is there a better treeview control I can use to display 5 deep nested JSON from an api?
Looks like your template is binding to user.userPermissions but your controller is setting the data to $scope.userPermissions. Change your template binding to userPermissions or change your controller to create a $scope.user object and set its userPermissions property.

How to filter a multidimentional JSON Object

I have a Json string which contains many json objects, each json has a key, I use JSON.parse to place the string into an object.
I then extract what I need in the following format
json['product1'][0].name
However, I want to get an array of element from each of the json objects based on the value of another elements. Currently I am using:
for each (var row:Object in json) {
if (row[0][filterElement] == filterValue) {
arr.push(row[0][element]);
}
}
Is this a good approach? I ask because it seems that I am going through the entire json object every time.
If I've understood your question correctly, it sounds like you want to use .map and .filter.
So if we have an object such as...
var obj = {
people: [
{name: 'person1'},
{name: 'person2'},
{name: 'person3'},
{name: 'person4'},
]
};
You can then use .map to create a new array of names...
var names = obj.people.map(function(person){
return person.name;
}); // ['person1', 'person2', 'person3', 'person4']
on this array you can then use .filter...
var filter = 'person2';
var filteredNames = obj.people.map(function(person){
return person.name;
}).filter(function(name){
return name == filter; // if true, will push name into a name into our new array
}); // 'person2'
This is obviously a rudimentary example, but the same concepts will apply for the precise properties which apply in your question. Hope this helps.

add a element to json array with Key/value using angular js

I have a json array object like below
$scope.Json = [{
Id:"5464",
Class:"9",
Rank:"4"
}]
I want to add a item "Name":"Vicky" to the Json. So that my result should be as below.
$scope.Json = [{
Id:"5464",
Class:"9",
Rank:"4",
Name:"Vicky"
}]
I am new to angular, can anyone help on this?
Use Array map() method.
DEMO
var json = [{ Id:"5464", Class:"9", Rank:"4" }];
json.map(function(item) {
item.Name = 'Vicky';
});
console.log(json);
First of all, the object $scope.Json is not a JSON but a string. To get a JSON, you need to parse the string like the following:
$scope.Json = JSON.parse(<string>) ;
Second, your input is a peculiar JSON as it is an array with one element (in its turn having 3 elements. I guess you wanted this:
$scope.Json = JSON.parse({ Id:"5464", Class:"9", Rank:"4" }) ;
Once you have this, you can add the element you want as:
$scope.Json.Name = "Vicky" ;

Resources