Related
I have 2 endpoints, and each of them returns a JSON (actually 3 but let's make it simple). I can't combine them on the server side because I don't have access to it.
I need to display the data in an Ext.grid.Panel which accepts only one Store object. I tried making a model for each JSON and then somehow combining them, but I failed. So I'm thinking of joining them with a where clause, and I need to match the id from one JSON to bar_id from another JSON. For example like this:
{ "success": true,
"total": 3,
"message": "Data loaded",
"data": [
{"id": "1", "object_name": "foo1", "bar_id": 1},
{"id": "2", "object_name": "foo2", "bar_id": 2},
{"id": "3", "object_name": "foo3", "bar_id": 3}
]
}
And the other one:
{ "success": true,
"total": 5,
"message": "Data loaded",
"data": [
{"id": "1", "bar_name": "bar1"},
{"id": "2", "bar_name": "bar2"},
{"id": "3", "bar_name": "bar3"}
]
}
And I want to combine them like this:
[
{"id": "1", "object_name": "foo1", "bar_id": 1, "bar_name": "bar1"},
{"id": "2", "object_name": "foo2", "bar_id": 2, "bar_name": "bar2"},
{"id": "3", "object_name": "foo3", "bar_id": 3, "bar_name": "bar3"}
]
So I need something like: where FirstModel.bar_id equals SecondModel.id. Then I need to make a Store from this JSON. As you can see, I'm just starting with Ext JS.
Cao Urose,
Use one model based on combining your two response data arrays. Combining your two arrays is more a js issue than it is extjs issue. When you join your two data arrays, it will be straightforward to create a model and load your store.
I have external JSON file call datas. This is the body of that JSON file.
[
{"value": "1", "text": "aaa"},
{"value": "2", "text": "bbb"},
{"value": "3", "text": "ccc"},
{"value": "4", "text": "ddd"},
{"value": "5", "text": "eee"},
{"value": "6", "text": "fff"},
{"value": "7", "text": "ggg"},
{"value": "8", "text": "hhh"},
{"value": "9", "text": "iii"},
{"value": "10", "text": "jjj"}
]
I want to filter data from this JSON file according to following array "b" values.(b0, b1, b3 etc)
$scope.array = {"badge":"1,2,5,7","id":"0","b0":"1","b1":"2","b2":"5","b3":"7"}
Example:
This array have b0, b1, b2 and b3 those values are 1, 2, 5 and 7. Therefor I want to get only 1, 2, 5, 7 values arrays from datas JSON file and display text values of this array.
This array can be change with same format. Therefor I want to consider b+"number" parameters.
Example 1:
$scope.array = {"badge":"1,2,3,9","id":"0","b0":"1","b1":"2","b2":"3","b3":"9"}
Example 2:
$scope.array = {"badge":"1,2,7","id":"0","b0":"1","b1":"2","b2":"7"}
Example 3:
$scope.array = {"badge":"1,2,5,7,8,9","id":"0","b0":"1","b1":"2","b2":"5","b3":"7","b4":"8","b5":"9"}
I get that JSON external file using angularjs like this,
$http.get("/json/datas.json").success(function(data) {
$scope.datas= data;
});
Values are display using repeat.
<div ng-repeat="data in datas">
<span ng-bind-html="data.text"></span>
</div>
Display HTML body only
aaa
bbb
eee
ggg
One way to do it is to filter, map, and/or reduce the array that has the "bX" values to create a lookup table of IDs, then filter the main data array based on that lookup table. Except that that "array" isn't an array, it is a plain object, so you can't use array methods on it directly. So I'm calling Object.keys() to get its keys in an array, and then I've chosen to use .reduce() to create the lookup table based on the keys that have the right format:
var data = [ {"value": "1", "text": "aaa"}, {"value": "2", "text": "bbb"}, {"value": "3", "text": "ccc"}, {"value": "4", "text": "ddd"}, {"value": "5", "text": "eee"}, {"value": "6", "text": "fff"}, {"value": "7", "text": "ggg"}, {"value": "8", "text": "hhh"}, {"value": "9", "text": "iii"}, {"value": "10", "text": "jjj"} ]
var $scope = {} // demo $scope object
$scope.array = {"badge":"1,2,5,7","id":"0","b0":"1","b1":"2","b2":"5","b3":"7"}
var bVals = Object.keys($scope.array).reduce(function(a, c) {
if (/^b\d+$/.test(c))
a[$scope.array[c]] = true
return a
}, {})
console.log(bVals)
var filteredData = data.filter(function(v) { return bVals[v.value] })
console.log(filteredData)
You can use javascript prototype functions map and find to filter the data.
First get the batch properties to an array and map the array to find the relevant values
$scope.array = {"badge":"1,2,3,9","id":"0","b0":"1","b1":"2","b2":"3","b3":"9"}
var batchArr = $scope.array.badge.split(',');
$scope.result = batchArr.map(o=> $scope.datas.find(k=> k.value == o))
angular.module("app",[])
.controller("ctrl",function($scope,$sce){
$scope.datas = [
{"value": "1", "text": "aaa"},
{"value": "2", "text": "bbb"},
{"value": "3", "text": "ccc"},
{"value": "4", "text": "ddd"},
{"value": "5", "text": "eee"},
{"value": "6", "text": "fff"},
{"value": "7", "text": "ggg"},
{"value": "8", "text": "hhh"},
{"value": "9", "text": "iii"},
{"value": "10", "text": "jjj"}
]
$scope.array = {"badge":"1,2,3,9","id":"0","b0":"1","b1":"2","b2":"3","b3":"9"}
var batchArr = $scope.array.badge.split(',');
$scope.result = batchArr.map(o=> $scope.datas.find(k=> k.value == o))
console.log($scope.result)
$scope.trust = function(html){
return $sce.trustAsHtml(html);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div ng-repeat="data in result">
<span ng-bind-html="trust(data.text)"></span>
</div>
</div>
I would like to filter my JSON array according to JSON array. I have following JSON array.
$scope.datas = [
{"value": "1", "text": "aaa"},
{"value": "2", "text": "bbb"},
{"value": "3", "text": "ccc"},
{"value": "4", "text": "ddd"},
{"value": "5", "text": "eee"},
{"value": "6", "text": "fff"},
{"value": "7", "text": "ggg"},
{"value": "8", "text": "hhh"},
{"value": "9", "text": "iii"},
{"value": "10", "text": "jjj"}
];
I want to filter this data according to my next JSON array.
$scope.array = {"badge":"1,2,3,9"};
This array can be change with same format.
Example 1:
$scope.array = {"badge":"1,2,3,9"}
Example 2:
$scope.array = {"badge":"1,2,7"}
Example 3:
$scope.array = {"badge":"1,2,5,7,8,9"}
I want to filter datas JSON array according to array of badge.
Display HTML body only
aaa bbb eee ggg
My code is working but older IE are not working because of it has find function.
$http.get("datas.json").success(function(data) {
$scope.spitedata = response.data.badge.split(',');
$scope.badgers = $scope.spitedata.map(function(o){ return data.find(function(k){return k.value == o})});
});
I'm looking to return a new JS object from an existing JS object, after filtering for some result.
Say I have the following JS object:
{ "Examples" :
[ { "id": 1, "name": "Tim", "answer": "yes"},
{ "id": 2, "name": "Jon", "answer": "no"},
{ "id": 3, "name": "Don", "answer": "yes" ] }
I want to filter through this object for all yes answers and return an object that looks like this:
{ "Examples" :
[ { "id" : 1, "name": "Tim", "answer": "yes"},
{ "id" : 3, "name": "Don", "answer": "yes"} ] }
First: that's a JavaScript object, not a JSON object. JSON is a serialization scheme.
You can filter the array with .filter():
var obj = { "Examples" :
[ { "id": 1, "name": "Tim", "answer": "yes"},
{ "id": 2, "name": "Jon", "answer": "no"},
{ "id": 3, "name": "Don", "answer": "yes" ] };
obj.Examples = obj.Examples.filter(function(entry) {
return entry.answer === "yes";
});
I am working in an AngularJS controller, trying to get the current month's name, this is my code:
$scope.months = {};
$scope.currentMonth = new Date().getMonth() + 1;
$http.get("json/months.json").success(function (data) {
$scope.months = data;
});
console.log($scope.months);
$scope.currentMonthName = $scope.months[0].name;
//Rest of file
This is my JSON file:
[
{"id": "0", "name": "January" },
{"id": "1", "name": "February"},
{"id": "2", "name": "March"},
{"id": "3", "name": "April"},
{"id": "4", "name": "May"},
{"id": "5", "name": "June"},
{"id": "6", "name": "July"},
{"id": "7", "name": "August"},
{"id": "8", "name": "September"},
{"id": "9", "name": "October"},
{"id": "10", "name": "November"},
{"id": "11", "name": "December"}
]
However my $scope.currentMonth is throwing an error 'TypeError: Cannot read property 'name' of undefined'. What I make of this is that he did not even retrieve the JSON file correctly (undefined), however after logging this file to console I can see that he did retrieve it correctly, which leaves me to wonder what I did wrong?
The $http query is asynchronous.
So try this (you need to set the assignment in the query callback) :
$scope.months = {};
$scope.currentMonth = new Date().getMonth() + 1;
$http.get("json/months.json").success(function (data) {
$scope.months = data;
console.log($scope.months);
$scope.currentMonthName = $scope.months[0].name;
});
I think you'll need to parse it before you use it.
$http.get("json/months.json").success(function (data) {
data = JSON.parse(data);
$scope.months = data;
});
JSON is just a string. Use JSON.parse("json") to convert it to an actual object.