I am getting json data from service. this is my json data:
[
{
"id":"1",
"body":"sample text",
"read":"true",
"checked":"true"
},
{
"id":"2",
"body":"sample text",
"read":"true",
"checked":"false"
}
]
I want to read it as id=2,read=true , how to convert this json string format to actual datatype.
You need to loop through your array and process the boolean values that are currently represented as text. In the example below, I've used JSON.parse to process the boolean text and then saved the result back to the read variable. Save applies to id but I've gone for parseInt in this case.
.controller('MyCtrl', function($scope) {
//example mock http call
function getHttpData() {
return [{
"id": "1",
"body": "sample text",
"read": "false",
"checked": "true"
}, {
"id": "2",
"body": "sample text",
"read": "true",
"checked": "false"
}];
}
function getData() {
var data = getHttpData();
//process array as required
data.forEach(function(value) {
value.id = parseInt(value.id);
value.read = JSON.parse(value.read);
});
return data;
}
$scope.data = getData();
});
Fiddle here:
https://jsfiddle.net/tmakin/cvzc4mks/5/
You want to pass your JSON string to the JSON.parse() function. That will return a JavaScript object that you can use normally.
Related
below is part of my JSON response coming from an API
{
"totalCount": 2,
"customAttributes": [
{
"objectType": "OWNER",
"atrributeId": 215,
"attributeName": "DATELICENSEFIRSTISSUED",
"attributeDisplayName": "DATE LICENSE FIRST ISSUED",
"dataType": "DATE",
"inputValues": [],
"isGridEligible": "true",
"isInvoiceEligible": "false"
},
{
"objectType": "LOCATION",
"atrributeId": 217,
"attributeName": "DONOTRENEW",
"attributeDisplayName": "DO NOT RENEWS",
"dataType": "Value List",
"inputValues": [
{
"id": 5,
"value": "VEHICLELISTREQUIRED"
},
{
"id": 6,
"value": "STATESWITHRECIPROCITY"
}
],
"isGridEligible": "true",
"isInvoiceEligible": "false"
}
]
}
Here, I am binding customAttributes as grid data.
this.customFieldsService.getCustomFields(this.columnList, this.pageNumber, this.pageSize, null).subscribe(res => {
if(res){
this.cfData = res;
this.gridData = {
data: this.cfData.customAttributes,
total: this.cfData.totalCount
}
}
});
Here, my problem is with inputValues column, which comes as an array of objects. I need to convert it to comma seaparated values and then bind to grid data like
"inputValues": ["VEHICLELISTREQUIRED" "STATESWITHRECIPROCITY"]
I can ignore the "id" property as we are not using it at angular side. I tried using join method but not able to solve it within the nested array. Please suggest. Thanks.
In typescript it can be done with:
const joined: string = customAttribute.inputValues
.map(x => x.value) // [{value: 'VEHICLELISTREQUIRED'}, {value: 'STATESWITHRECIPROCITY'}]
.join(' ') // "VEHICLELISTREQUIRED" "STATESWITHRECIPROCITY"
const putIntoArray = [joined]; // ["VEHICLELISTREQUIRED" "STATESWITHRECIPROCITY"]
Of course you can put the joined string immediately into an array.
This question already has answers here:
How to get the JSON with duplicate keys completely in javascript
(5 answers)
Closed 4 years ago.
I have been trying to fetch a section of the response json data from an API call in my angular application.
I have tried various combinations but I am only able to fetch the last record and not both the records.
Here is my html
<div ng-controller="MyCtrl">
<li ng-repeat="x in textvalues">
{{ x.event.description }}
</li>
</div>
and the controller code
var myApp = angular.module('myApp', []);
function MyCtrl($scope, $http) {
$http.get('http://www.vizgr.org/historical-events/search.php?', {params: {format: 'json', query:'India', limit:'2'}}).then(function(response) {
$scope.textvalues = response.data;
console.log($scope.textvalues);
});
}
The response from the API call is as follows:
{
"result": {
"count": "2",
"event": {
"date": "-293",
"description": "When an invasion of",
"lang": "en",
"category1": "By place",
"category2": "Persia",
"granularity": "year"
},
"event": {
"date": "-250",
"description": "The Mauryan s",
"lang": "en",
"category1": "By place",
"category2": "India",
"granularity": "year"
}
}
}
And I am trying to print the event description in loop on the UI
Here is my fiddle - http://jsfiddle.net/nirajupadhyay/Jd2Hw/105/
I have tried various combination of the response data but unable to get to both the descriptions.
Kindly help.
I feel this API is somehow massively wrong. A JSON object can never have 2 identical keys with different values in them. If you check the network tab, then you will see that the response has only 1 event key in the object its value is the last value that is returned by the object. So although it might show 2 events in stringified version but it will never hold 2 values to same key in a JSON object.
Read Does JSON syntax allow duplicate keys in an object?
Instead of passing format: json to API, do not pass any param for format. It will give the result in xml format. Then convert this xml format to json format either by some library or the code as shown below.
var myApp = angular.module('myApp', []);
function MyCtrl($scope, $http) {
$http.get('http://www.vizgr.org/historical-events/search.php?', {
params: {
/* format: 'json', */
query: 'India',
limit: '2'
}
}).then(function(response) {
console.log(response.data);
var dom = parseXml(response.data);
var json = xml2json(dom)
console.log(json)
$scope.events = json.result.event;
});
function parseXml(xml) {
var dom = null;
if (window.DOMParser) {
try {
dom = (new DOMParser()).parseFromString(xml, "text/xml");
}
catch (e) { dom = null; }
}
else if (window.ActiveXObject) {
try {
dom = new ActiveXObject('Microsoft.XMLDOM');
dom.async = false;
if (!dom.loadXML(xml)) // parse error ..
window.alert(dom.parseError.reason + dom.parseError.srcText);
}
catch (e) { dom = null; }
}
else
alert("cannot parse xml string!");
return dom;
}
function xml2json(xml) {
try {
var obj = {};
if (xml.children.length > 0) {
for (var i = 0; i < xml.children.length; i++) {
var item = xml.children.item(i);
var nodeName = item.nodeName;
if (typeof (obj[nodeName]) == "undefined") {
obj[nodeName] = xml2json(item);
} else {
if (typeof (obj[nodeName].push) == "undefined") {
var old = obj[nodeName];
obj[nodeName] = [];
obj[nodeName].push(old);
}
obj[nodeName].push(xml2json(item));
}
}
} else {
obj = xml.textContent;
}
return obj;
} catch (e) {
console.log(e.message);
}
}
}
Check js fiddle here.
As Nandita Arora Sharma answered the API response is wrong.
RFC-7159, standard for JSON published by (IETF), states:
" 4. Objects
... single colon comes after each name, separating the name
from the value. A single comma separates a value from a following
name. The names within an object SHOULD be unique."
API Test with Postman. Which renders the JSON and as mentioned and there is only one event. This is possibly the reason why angular can only repeat 1 time
within the raw data has all event object with duplicated keys.
You need to pass $http as a parameter to your controller , you can see the particular error says "$http is not defined" in controller
function MyCtrl($scope,$http) {
WORKING FIDDLE
To answer your actual question, your service returns an object not an array . iT returns an object of object. so you cannot use ng-repeat in this case. it returns on
{"result":{"count":"3","event":{"date":"-250","description":"The
Mauryan ''Lion Capital of Asoka'', is erected as part of a pillar at
Sarnath, Uttar Pradesh in India (approximate date). It is now
preserved at the Sarnath Museum in
Sarnath.","lang":"en","category1":"By
place","category2":"India","granularity":"year"}}}
inorder to access event you can just use
{{textvalues.result.event.description}}
DEMO
The object structure that you are referring to can never exist
{
"result": {
"count": "2",
"event": {
"date": "-293",
"description": "When an invasion of",
"lang": "en",
"category1": "By place",
"category2": "Persia",
"granularity": "year"
},
"event": {
"date": "-250",
"description": "The Mauryan s",
"lang": "en",
"category1": "By place",
"category2": "India",
"granularity": "year"
}
}
}
If any key is repeated in an object, it overrides the previous set value in the JSON object key value pair. What the API should return should be something like given below, then only you can get all event objects.
{
"result": {
"count": "3",
"event": [{
"date": "-250",
"description": "The Mauryan ''Lion Capital of Asoka'', is erected as part of a pillar at Sarnath, Uttar Pradesh in India (approximate date). It is now preserved at the Sarnath Museum in Sarnath.",
"lang": "en",
"category1": "By place",
"category2": "India",
"granularity": "year"
},
{
"date": "-250",
"description": "The Mauryan ''Lion Capital of Asoka'', is erected as part of a pillar at Sarnath, Uttar Pradesh in India (approximate date). It is now preserved at the Sarnath Museum in Sarnath.",
"lang": "en",
"category1": "By place",
"category2": "India",
"granularity": "year"
},
{
"date": "-250",
"description": "The Mauryan ''Lion Capital of Asoka'', is erected as part of a pillar at Sarnath, Uttar Pradesh in India (approximate date). It is now preserved at the Sarnath Museum in Sarnath.",
"lang": "en",
"category1": "By place",
"category2": "India",
"granularity": "year"
}]
}
}
I am new in angularJs, I am trying to have my first steps in developping an application and I am facing a problem.
I am calling an external resource that return an object json via $resource.get(), in the callBack I am getting the correct values, but in the service the values are undefined, the problem is when I am printing the resource in the console the result has the correct values.
my json object :
{
"readOnly": false,
"questions": [
{
"questionId": "0",
"questionTitle": "question0",
"isMondatory": true,
"responseList": [
{
"questionId": "0",
"questionTitle": null,
"responseId": "00",
"responseTitle": "response00"
},
{
"questionId": "0",
"questionTitle": null,
"responseId": "01",
"responseTitle": "response01"
},
{
"questionId": "0",
"questionTitle": null,
"responseId": "02",
"responseTitle": "response02"
},
{
"questionId": "0",
"questionTitle": null,
"responseId": "03",
"responseTitle": "response03"
}
]
},
{
"questionId": "1",
"questionTitle": "question1",
"isMondatory": true,
"responseList": [
{
"questionId": "1",
"questionTitle": null,
"responseId": "10",
"responseTitle": "response10"
},
{
"questionId": "1",
"questionTitle": null,
"responseId": "11",
"responseTitle": "response11"
},
{
"questionId": "1",
"questionTitle": null,
"responseId": "12",
"responseTitle": "response12"
},
{
"questionId": "1",
"questionTitle": null,
"responseId": "13",
"responseTitle": "response13"
}
]
}
my controller is
app.controller('mycontroller', function ($scope,myservice) {
$scope.infos = null;
$scope.infos = myservice.getInfo();
}
my service is :
angular.module('xxxx').factory('myservice', function($window,$resource,$routeParams,$http,apicallservice) {
// Public API here
return {
getInfo : function(){
var result=null;
var url = "myUrl";
result = apicallservice.GetApiCall(url,$routeParams);
console.log(result.readOnly); // print undefined => KO
return result;
},
//.... other functions
my apicallservice :
angular.module('xxxx')
.factory('apicallservice', function ($http,$resource) {
var result;
// Public API here
return {
GetApiCall: function (url,obj) {
// resource
var resource = $resource(url,{param1:obj});
// cal the api
result = resource.get(function(callBack) {
console.log(callBack.readOnly); => print false => OK
return callBack;
}, function(error) {
console.log(error);
return error;
});
return result;
},
PostApiCall : function(url,obj){
result = $http.post(url,obj).then(
function (response) {
console.log(response);
}, function (error) {
console.log(error);
});
}
};
});
please can you help me ?
thanks in advance.
From angularjs api documentation for $resource
It is important to realize that invoking a $resource object method
immediately returns an empty reference (object or array depending on
isArray). Once the data is returned from the server the existing
reference is populated with the actual data. This is a useful trick
since usually the resource is assigned to a model which is then
rendered by the view. Having an empty object results in no rendering,
once the data arrives from the server then the object is populated
with the data and the view automatically re-renders itself showing the
new data. This means that in most cases one never has to write a
callback function for the action methods.
So basically for
$scope.infos = myservice.getInfo();,
result will have an empty object/array reference. Since the call is asynchronous, the next line(console.log(result.readOnly)) gets called immediately and you will get undefined. Only when the underlying get/post call actually completes, variable result will be populated with the value from the server
I found what was going wrong, in the controller I had to add then() :
instead of this :
app.controller('mycontroller', function ($scope,myservice) {
$scope.infos = null;
$scope.infos = myservice.getInfo();
}
do this :
app.controller('mycontroller', function ($scope,myservice) {
$scope.infos = null;
myservice.getInfo().then(function(data) {
$scope.infos = data;
});
}
this resolved the problem.
so I have chatting application, with this JSON:
{
"561c": [{
"from": "561c",
"fromname": "ryan",
"to": "sasa",
"messgae": "hey"
}, {
"from": "5512",
"fromname": "sasa",
"to": "ryan",
"messgae": "hey too"
}]
}
but this JSON will always add up when the users send messages. I want to take the the last value just from "message" to use this value in my Text-to-Speech code, how do I write the code?
and this is my Text-to-Speech:
$scope.speakText = function() {
TTS.speak({
text: ***this place is for the code***,
locale: 'en-GB',
rate: 0.75
}, function () {
// handle the succes case
}, function (reason) {
// Handle the error case
});
};
use forEach loop on the object '561c' like
var messArray = [];
561c.forEach(function(obj){
messArray.push(obj.message)})
var text = messArray.join();
You will have all the message in messArray.
If i have understood your question correct.
//get the last element of array
var lastIndex = 561c.length();
var lastObj = 561c[lastIndex];
//get message from last object of array 561c
var lastMessage = lastObj.message;
and you got what you want(y);
You can use the "pluck" function of underscore.js - http://underscorejs.org/#pluck
_.pluck(your array of JSONs, 'messgae');
You can pass $scope to your function then pass 561c you will get object then you can index message in it
Example :
$scope.chat = {
"561c": [{
"from": "561c",
"fromname": "ryan",
"to": "sasa",
"messgae": "hey"
}, {
"from": "5512",
"fromname": "sasa",
"to": "ryan",
"messgae": "hey too"
}]
}
angular.module('app',[]).controller('myctrl', function($scope, data){
$scope.561c = data.messgae;
}
I am very new to AngularJS and I am trying to learn how to get deeper into a JSON object that has objects inside of objects and sometimes even arrays. This is a "simplified" version I am working with and I hope it will help me get a basic understanding so I can do the rest on my own.
json
values = {
"profile": {
"fields": {
"number-of-fields": "700",
"inside": [
"test1",
"test2"
],
"type": "test",
"values": "450"
}
},
"id": "12312312333645"
}
code
angular.forEach(values, function(value, key) {
console.log(key + ': ' + value);
// I know I need to loop inside of each object I beleieve
});
http://jsfiddle.net/ygahqdge/184/
The basics
Traverse object properties with a dot ., traverse array indexes with an index reference, [0|1|2|etc.].
What about your object?
var yoObject = {
"profile": {
"fields": {
"number-of-fields": "700",
"inside": [
"test1",
"test2"
],
"type": "test",
"values": "450"
}
},
"id": "12312312333645"
}
Get the inside values:
// object object object array
yoObject.profile.fields.inside.map(console.log, console) // ["test1", "test2"]
Get the id:
// object property
yoObject.id // "12312312333645"
Get all properties of the fields object:
Object.keys(yoObject.profile.fields) // ['number-of-fields', 'inside', 'type', 'values']
Get all values of the properies from above:
fields = yoObject.profile.fields
Object.keys(fields).map(key => console.log(fields[key])) // ["700", ["test1", "test2"], "test", "450"] // Note: Order isn't guaranteed
Just play about with things. Throw the object in the console and start to manually traverse it. Then try to loop over things.
Have fun!
Note: I tested none of that! :P
this is a question in regards on the right way to loop deep in JSON
objects – #user2402107
There's no right way. Sometimes you'll need to be fully dynamic, other times you can hardcode paths into nested properties and values.
Fiddle-Diddle
Nest as many times as you need:
angular.forEach(values, (value, key) => {
console.log("Value for", key, ":", value);
angular.forEach(value, (value, key) => {
console.log("Value for", key, ":", value);
angular.forEach(value, (value, key) => {
console.log("Value for", key, ":", value);
})
})
});
You can log the whole object to console. By using F12 tool, you can browse the object in the browser.
console.log(objectName);
angular.forEach works on arrays. lets suppose you have an array of objects as this
var values = [{
"profile": {
"fields": {
"number-of-fields": "700",
"interpertation": [
"whenever this is ready"
],
"type": "test",
"values": "450"
}
},
"id": "12312312333645"
},
{
"profile": {
"fields": {
"number-of-fields": "700",
"interpertation": [
"whenever this is ready"
],
"type": "test",
"values": "450"
}
},
"id": "12312312333645"
}]
you can explore each object and its properties like this
angular.forEach(values, function(value, key) {
console.log(value.profile.fields.values);
});
you can use . notation to access propertes