We Keep Coding

$scope.someVariable can't be touched

I'm new to AngularJS so my mistake might be anywhere in my code and I can't find it. I'm using $HTTP GET method to retrieve data that's located in some server /page. After retrieving that data (which is JSON) I want to play with that string to retrieve the data properly, like name: number: and so on. But the thing is once I put that data into $scope.listOfCompanyUsers I can't touch it. If I try to $scope.listOfCompanyUsers.slice(..) or if I try any other string function on that object my entire webpage crashes. I "alert()"'d the $scope.listOfCompanyUsers and the result is:
<pre>[
{
"admin": true,
"id": 123,
"username": "someName",
"last_name": "someLastName",
"name": "John Doe"
}
]</pre><br>
What I wanted to do is remove the pre and br tags from that string so I have a pure JSON string that I could play with but again any function I try on $scope.listOfCompanyUsers crashes my site. What do I do? I tried var someOtherVariable = $scope.listOfCompanyUsers but that variable doesn't work later. I'm adding parts of my code because my mistake might be somewhere else.
Controller:
$http({
method: 'GET',
url: '/someURL'
}).then(function successCallback(response) {
$scope.listOfCompanyUsers = response.data;
},
function errorCallback(response) {
alert(response.status);
});
Later on the same controller:
.
.
$scope.someFunction = function () {
.
.
else {
alert("Maximum of 9 other passengers!");
alert($scope.listOfCompanyUsers);
// In this alert I could see the $scope.listOfCompanyUsers as mentioned above
}
};
My target right now is to have a var objectOfUsers = [{admin: true, id:123, username: "name", last_name: "test", name: "something"}, {next user.}, .] but because I can't touch the $scope.listOfCompanyUsers I'm stuck.

The problem is that the server is adding some extra tags to the response that shouldn't be in there:
<pre>[
{
"admin": true,
"id": 123,
"username": "someName",
"last_name": "someLastName",
"name": "John Doe"
}
]</pre><br>
Edit your server-side code, to remove: <pre> and </pre><br>.
Then the call will work.

Is your response a string? If your response has HTML tags, then that is not valid JS object format. It looks like you have a Javascript array with one object, enclosed by some HTML tags.
Therefore you won't be able to access anything within this using the object reference notation (.) until you treat it like a string and use String.prototype.replace and replace the tags, and then do a JSON.parse on the remaining string to convert it into an object

Very strange server response, so possible solutions are:
Change server response to standard JSON without unwanted <pre>
If You can not change response remove not wanted part of response using regular expression in JS. Working example how do that:
var response='<pre>[{"admin": true, "id": 123, "username": "someName","last_name": "someLastName", "name": "John Doe"}]</pre><br>';
var goodResponse=response.match(/>([^<]*)</)[1];//remove not wanted signs
var parsedGoodResonse=JSON.parse(goodResponse);
console.log(parsedGoodResonse);//here we have parse js array
In parsedGoodResonse You have object which can be "touched" so exactly what You need.

The problem with the extra tags is not on your code, it's on the server-side. You should check the code on the server and find the reason for those extra tags. They can't be there because they are making the response an invalid JSON.

Getting fewer/matching objects from json file

My json file looks like this:
[
{
"id" : "1",
"type" : "hardware"
},
{
"id" : "2",
"type" : "software"
}
]
Now when I run following code :
$http({
method: 'get',
url: '/tools.json'
}).success(function(data, status, headers, config) {
///whatever
})
I get these two objects for rederning via ng-repeat, that's fine.
Now, I want to create filters in my app, like display only "Hardware" or "Software", for this, which is the best way to achieve this, is there a way where I can just get Hardware typed objects from JSON itself? (querying JSON and get matching objects) and how can I do that? What should I change in code in-order to do this or should I use Angular filters to render Hardware types after getting entire JSON.
I don't have much experience in Angular, let me know if there is any other way I can achieve what I want.
Thanks in advance.

It's your choice completely.
Ideally, your backend should be returning the JSON filtered by the query.
If you want instant-responsiveness, you may use Angularjs's filters to do the filtering for you on the same data which you'd fetch once from the server. This also has an added benefit of doing full-text search, which is really neat.

If you just want to filter the JSON data, you could use the reduce method as follows:
var hardware = data.reduce(function(result, current) {
if(current.type === 'hardware') {
result.push(current);
}
return result;
}, []);
Fiddle available here.

The ideal place for this filtering would be on backend, given the type. But for some reason, if you want to do this on browser, you can use a simple for loop to filter objects with type hardware. A cleaner way of doing this would be with underscore. Include underscore source file in your project and do _.filter function to filter the objects you want. You can read more about filter function here: http://underscorejs.org/#filter

Select a node with namespace in jQuery

I'm using YQL to fetch data using JSONP, and it returns a string of XML. I parse it using $.parseXML and put it inside the jQuery selector and try to select a node. However, it contains a namespace (for example, yweather:) and jQuery seems to not working as it should be.
From other SO answers they suggested that doing \\: will solve it. It does, but only when the data I received is XML (mine is with JSONP.)
$.ajax({
url: "http://query.yahooapis.com/v1/public/yql",
data: {
q: "select item from weather.forecast where location=48907",
format: "jsonp"
},
dataType: "jsonp"
}).success(function(data){
var xml = $.parseXML(data.results[0]);
console.log($("yweather\\:condition", xml));
});
It didn't match anything.

Could not figure out why it is not working, also other answers suggested escaping : with \\. But it is not working. So I have tried in this way and it is working. This is also equal to jQuery's find method and it is working demo
Code is
var xml = $.parseXML(data.results[0]);
xml = $(xml).find('channel item');
var weatherList = xml.find('*').filter(function(){
return this.tagName === "yweather:condition";
});
console.log(weatherList);
Hope this helps.

getJSON() - how to remove AND-sign in front of data param?

I'm doing the following jQuery call:
$.getJSON(
"http://localhost:9000/user?name=",
"test",
function(data) {
alert(data.aaData[0]);}
);
but it doesn't work because the data param "test" will be "&test" in the actual call (at least that's what firebug tells me).
I'm a total beginner with JavaScript and jQuery, can anyone tell me how to remove the &-sign in front of the data param?
So that the actual call is http://localhost:9000/user?name=data and not http://localhost:9000/user?name=&data

You could pass the data as an object, like this:
$.getJSON(
"http://localhost:9000/user",
{ name: "test" },
function(data) {
alert(data.aaData[0]);
}
);
The data-object will then be converted to a string and URL-encoded before it is added to the URL. From the jQuery documentation of .getJSON():
If the value of the data parameter is an object (map), it is converted
to a string and url-encoded before it is appended to the URL.

You have to set the get variables to be sent in the correct way:
$.getJSON("http://localhost:9000/user", "name=test", function(data) {
alert(data.aaData[0]);
});

Changing the sequence

I am trying to upload a file into my amazon account using the dojo.io.send.However, it's failing to do so .
This is error which i get to see when i run through the firebug.
<Error>
<Code>InvalidArgument</Code>
<Message>Bucket POST must contain a field named 'key'. If it is specified,
please check the order of the fields.</Message>
<ArgumentValue></ArgumentValue>
<ArgumentName>key</ArgumentName>
I figured out the reason and apparently the "Key" field is below to the
"File" field because of that it is ignoring below ones and throwing up the
error .
In order to rectify this issue, i need to have dojo.io.send() to send the
param's list in the following way:-
key uploads/${filename}
AWSAccessKeyId
policy
signature
Content-Type plain/text
file
I tried my luck by playing with the below code but it always put the file
field on the top.
I would appreciate if anybody can help me out in changing the sequence.
Code Snippet:-
var jsonpArgs =
{
url: "https://s3.amazonaws.com/<Bucketname>",
form : dojo.byId("Myform"),
//MyForm has an attribute
//as file which takes the file name from the user to upload.
handleAs: "json",
content:
{
"key":"*******",
"AWSAccessKeyId":"****",
"policy" :"***********",
"signature":"*******",
"Content-Type":"plain/text"
},
error: function(error)
{
},
};
dojo.io.iframe.send(jsonpArgs);
},
Appreciated,

The cause is that Dojo just iterate all the properties in the JSON object and generate the POST request body from it. Since the order of iteration is undetermined, you can not guarantee that the key property always is the first one.
The solution is to generate the POST body yourself. You can get the POST body string using:
"key=" + encodeURIComponent(key) + "&" + dojo.objectToQuery({AWSAccessKeyId : "", policy :""})
By doing this, the key is always the first one in the post body.
When sending the request, do not use content property, use rawBody instead. If you're using older version of Dojo, maybe you can use dojo.rawXhrPost and using postData property in the request.