Accessing json data in javascript strange error - javascript

I am returning json string from web service and I can easily access it but sometime it behave strange and I can not find why.
Here is json string that I am getting through web service
{"current":"2014-10-07T17:53:03+02:00","T1":{"0":[null],"1":[null],"2":[null],"3":[null],"4":[null],"5":[null],"6":[{"name":"ABC","value":63}]},"T2":{"0":[null],"1":[null],"2":[null],"3":[null],"4":[null],"5":[null]},"T3":{"0":[null],"1":[null],"2":[null],"3":[null],"4":[null],"5":[null]},"T4":{"0":[null],"1":[null],"2":[null],"3":[null],"4":[null],"5":[null]},"T5":{"0":[null],"1":[null],"2":[null],"3":[null],"4":[null],"5":[null]}}
I can access them easily and it is working fine except when there is null on 0th position of any T1,T2,T3...etc. It return this error TypeError: Cannot read property '0' of undefined
This is how I am accessing data
if(json.T1 != undefined) {
for (var i = 0; i < len; i++) {
if(json.T1[i][0] == null) {
t1.push(NaN)
}
else
{
t1.push(json.T1[i][0]["value"])
}
}
}
I dont understand why this works in all the cases excpet having null of 0th position of T1, T2...etc

You have to change some things.
Try this way: http://jsfiddle.net/csdtesting/jww96u92/
var k = {
"current": "2014-10-07T17:53:03+02:00",
"T1": {
"0": [null],
"1": [null],
"2": [null],
"3": [null],
"4": [null],
"5": [null],
"6": [{
"name": "ABC",
"value": 63
}]
},
"T2": {
"0": [null],
"1": [null],
"2": [null],
"3": [null],
"4": [null],
"5": [null]
},
"T3": {
"0": [null],
"1": [null],
"2": [null],
"3": [null],
"4": [null],
"5": [null]
},
"T4": {
"0": [null],
"1": [null],
"2": [null],
"3": [null],
"4": [null],
"5": [null]
},
"T5": {
"0": [null],
"1": [null],
"2": [null],
"3": [null],
"4": [null],
"5": [null]
}
};
var t1 = [];
console.log(k);
if (k.T1 != undefined) {
$.each(k.T1, function(i, item) {
if (item[0] == null) {
t1.push(NaN)
} else {
alert("I just put " + item[0]["value"] + "in t1 array!Thanks!");
t1.push(item[0]["value"])
}
console.log(item);
});
console.log(t1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

That's because the len property doesn't represent the right length of the items that are into the T1 object.
Try to get the length by enumerating the T1 object properties.
var len = 0;
for(var item in json.T1){
len++;
}
And then, try the script you provided. This should work.

Related

How can I display this object in react

I have response from the sarver like this :
{
"response_code": 200,
"tickets": {
"3": {
"117": "http://....../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf"
},
"4": {
"118": "http://...../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf"
},
"5": {
"119": "http://...../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf"
},
"6": {
"120": "http://.../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf"
},
"7": {
"121": ""
},
"8": {
"122": "http://..../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf"
},
}
}
}
and I should display these links in the websites as it should be an array, but it's an array
so any clue how can I display these links in react app, or how can I convert it to array, so I can display it easily?
If you just want to convert the tickets object to an array of URLs (ignoring any of those number keys), you can do so using Object.values() and Array.prototype.flatMap()
const obj = {"response_code":200,"tickets":{"3":{"117":"http://....../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf"},"4":{"118":"http://...../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf"},"5":{"119":"http://...../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf"},"6":{"120":"http://.../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf"},"7":{"121":""},"8":{"122":"http://..../upload/iblock/4a5/4a529553152b21109e9aa18fa9d4ea9b.pdf"}}}
const tickets = Object.values(obj.tickets).flatMap(Object.values)
console.log(tickets)

Object value gets incorrect data but the data is still retrievable with the key

I've built a tool where people can import a csv file and then it creates < p > tags on the page based on the imported text.
I'm trying to assign the value from my list of imported data to the model attached to the tag but i always seem to get the LAST value from my imported list.
I've put in some logs to show how it's still able to get the value BUT it is not correct inside the object.
for (var row in $scope.importedData) {
for (var column in $scope.importedData[row]) {
//Imported value shows "Laurent"
console.log($scope.importedData[row][column]);
for (var i in $scope.template.textboxes) {
if ($scope.template.textboxes[i]._id === $scope.importables[column]._id) {
$scope.template.textboxes[i].value = $scope.importedData[row][column];
//Object value shows "Sukh"
console.log($scope.template.textboxes[i]);
//value key shows "Laurent"
console.log($scope.template.textboxes[i].value);
break;
}
}
//Below uses Underscore.js but the result is the same.
//_.findWhere($scope.template.textboxes, {_id: $scope.importables[column]._id}).value = $scope.importedData[row][column];
}
}
here is the output of the console, you can see that the value "Laurent" is preserved, however not inside the object. In the object it's "Sukh", the last value of my imported data:
I have no clue how it is getting the last "row" value.
To my great annoyance, the snippet I made in here works perfectly:
var app = angular.module('app', [])
.controller('ImportCtrl', function ($scope) {
$scope.importedData = {
"0": {"0": "Laurent", "1": "IT", "2": "1234"},
"1": {"0": "Johnny", "1": "Production", "2": "2345"},
"2": {"0": "Beatrice", "1": "Accounting", "2": "4567"},
"3": {"0": "Sukh", "1": "Sales", "2": "5678"}
};
$scope.template = {
"textboxes": [
{
"_id": "tbx0",
"placeholder": "Department",
"value": ""
},
{
"_id": "tbx1",
"placeholder": "Employee ID",
"value": ""
},
{
"_id": "tbx2",
"placeholder": "Name",
"value": ""
}
]
};
$scope.importables = {
"0": {"_id": "tbx2"},
"1": {"_id": "tbx0"},
"2": {"_id": "tbx1"}
}
$scope.enterImportedData = function() {
for (var row in $scope.importedData) {
for (var column in $scope.importedData[row]) {
console.log($scope.importedData[row][column]);
for (var i in $scope.template.textboxes) {
if ($scope.template.textboxes[i]._id === $scope.importables[column]._id) {
$scope.template.textboxes[i].value = $scope.importedData[row][column];
console.log($scope.template.textboxes[i]);
console.log($scope.template.textboxes[i].value);
break;
}
}
//_.findWhere(template.textboxes, {_id: $scope.importables[column]._id}).value = $scope.importedData[row][column];
}
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<span ng-app="app" ng-controller="ImportCtrl">
<button
ng-click="enterImportedData()"
>
Import
</button>
</span>

Parsing JSON - Javascript - Undefined

Here is my JSON:
[
{
"0": "324",
"1": "Cavill ",
"2": "11",
"3": "100018463",
"4": "RAR",
"5": "DummyX",
"6": "DummyY",
"7": "Moretext",
"8": "moretext",
"id": "lol",
"teacher": "Specsavers ",
"rate": "11",
"teacherid": "100018463",
"address": "114 Road X",
"postcode": "WXER 21",
"lat": "51.511871",
"lon": "-0.112934",
"distance": "0.023308985382378217"
}
]
This is held in a variable called "hold".
I am trying to output "teacher" in a div called output1.
Here is my code:
obj = JSON.parse(hold);
document.getElementById("output1").innerHTML = obj[1].teacher;
I keep getting undefined.
I tried changing 1 to 0. Same issue - undefined.
What am I doing wrong here?
How do I access attribute data from each node/branch?
Index starts from 0 and in your data index 1 is undefined.
obj = JSON.parse(hold);
document.getElementById("output1").innerHTML = obj[0].teacher;
//------------------------------------------------^^^------
Make sure hold is actually a JSON string. And the way you are accessing the parsed json is wrong, it should be 0 since there's only one json string.
var hold = '[ { "0": "324","1": "Cavill ","2": "11", "3": "100018463", "4": "RAR", "5": "DummyX","6": "DummyY","7": "Moretext", "8": "moretext","id": "lol","teacher": "Specsavers ", "rate": "11","teacherid": "100018463", "address": "114 Road X", "postcode": "WXER 21","lat": "51.511871","lon": "-0.112934", "distance": "0.023308985382378217" }]';
var obj = JSON.parse(hold);
document.getElementById('output1').innerHTML = obj[0].teacher;
<div id="output1"></div>
Array index starts from 0. So in your parsed json, obj[0] represents the first element. As there is no second element obj[1] will be undefined.
Use obj[0] instead obj[1].
Working Code:
var hold = '[{ "0": "324", "1": "Cavill ", "2": "11", "3": "100018463", "4": "RAR", "5": "DummyX", "6": "DummyY", "7": "Moretext", "8": "moretext", "id": "lol", "teacher": "Specsavers ", "rate": "11", "teacherid": "100018463", "address": "114 Road X", "postcode": "WXER 21", "lat": "51.511871", "lon": "-0.112934", "distance": "0.023308985382378217"}]';
var obj = JSON.parse(hold);
document.getElementById("output1").innerHTML = obj[0].teacher;
<div id="output1"></div>

how to get keys from object list in json string in javascript

[null, {
"display_with": "7",
"id": "1",
"image": "/images/salt_sugar.png",
"name": "Salt and Sugar",
"subcategories": {
"1": true,
"6": true,
"7": true
}
}, {
"display_with": "6",
"id": "2",
"image": "/images/tea_and_coffee.png",
"name": "Tea and Coffee",
"subcategories": {
"8": true,
"9": true,
"124": true
}
}]
In the above string i want 1, 6, 7 and 8, 9, 124 from second and third record respectively.
This is my logic.
recvCategories = JSON STRING
for (var j=0; j<recvCategories.length; ++j){
var category = recvCategories[j];
if (category != undefined){
var subcategories = [];
int size = Object.keys(category.subcategories).length;
for (var property in object) {
if (object.hasOwnProperty(property)) {
// do stuff
}
}
}
}
How to print 1, 6, 7 and 8, 9, 124 in // do stuff ??
Assuming your data is named data this should do it.
var keys = [];
data.forEach(d => {
if (d.subcategories)
for (var key in d.subcategories)
keys.push(key);
})
It may look simple however by using a for(var x in y) will actually iterate the properties of an object and return the propertyNames.
So in the example we call the .forEach() method in an array and then iterate each key of subcategories pushing them into a new array.
Something like,
for( i in aList) {
console.log(keys(aList[i] && aList[i].subcategories))
}
// []
// [1, 6, 7]
// [8, 9, 124]
Few pointers in your code:
This condition: if (category != undefined) will not validate null and code will throw on object.something
Object.keys(category.subcategories).length; will break if you do not have property subcategories in object. You can try something like this (Object.keys(category.subcategories) || []).length
Also if you create your own custom object, then it makes sense to use object.hasOwnProperty, but if you are reading form JSON, you can rely on Object.keys
You can also try something like this:
function getSubCategoriesKeys(d){
return d.reduce(function(p,c){
if(!isEmpty(c) && typeof(c) === "object" && c.hasOwnProperty("subcategories")){
p = p.concat(Object.keys(c.subcategories))
}
return p;
}, [])
}
function isEmpty(o){
return o === undefined || o === null || o.toString().trim().length === 0
}
var data = [null, {
"display_with": "7",
"id": "1",
"image": "/images/salt_sugar.png",
"name": "Salt and Sugar",
"subcategories": {
"1": true,
"6": true,
"7": true
}
}, {
"display_with": "6",
"id": "2",
"image": "/images/tea_and_coffee.png",
"name": "Tea and Coffee",
"subcategories": {
"8": true,
"9": true,
"124": true
}
}]
var keys = getSubCategoriesKeys(data);
console.log(keys)
Reference
what is property in hasownproperty

Javascript Sort key value pair object based on value

I have an object like below. Trying to rearrange it in ascending order based on value. Similar to Javascript array sort method.
var masterList = {
"1": "google",
"2": "yahoo",
"3": "msn",
"4": "stackoverflow",
"5": "github",
"6": "jsfiddle",
"7": "amazon",
"8": "ebay"
}
Please let me know the better solution...
JavaScript objects have no order. Even though most browsers do iterate in the same order the properties were created, there's no guarantee, so sorting is not supported on objects.
See here for more info: Does JavaScript Guarantee Object Property Order?
You might also be interested in what John Resig has got to say on the matter.
If you need a sort-able list, you'll have to store it as an array of objects:
var masterList = [
{ key: 1, val: "google" },
{ key: 2, val: "yahoo" },
{ key: 3, val: "msn" },
{ key: 4, val: "stackoverflow" },
{ key: 5, val: "github" },
{ key: 6, val: "jsfiddle" },
{ key: 7, val: "amazon" },
{ key: 8, val: "ebay" }
];
Then, to sort them, just use the regular array's sort method:
masterList = masterList.sort(function (a, b) {
return a.val.localeCompare( b.val );
});
Here's the fiddle: http://jsfiddle.net/ASrUD/
var obj = {
"1": "google",
"2": "yahoo",
"3": "msn",
"4": "stackoverflow",
"5": "github",
"6": "jsfiddle",
"7": "amazon",
"8": "ebay"
};
var arr = [];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
arr.push(obj[key]);
}
}
alert(arr.sort());
This will sort your values in ascending order. let me give sometime will revert you with how to convert that to an object.
var masterList = {
"2": "yahoo",
"3": "msn",
"4": "stackoverflow",
"5": "github",
"6": "jsfiddle",
"7": "amazon",
"8": "ebay",
"1": "google",
}
var masterList_ = {}
Object.keys(masterList).sort().forEach(a=>masterList_[a]=masterList[a])
console.log(masterList_)

Categories