This question already has answers here:
How can I display a JavaScript object?
(40 answers)
Closed 7 years ago.
I have an object of objects and I want to iterate through the objects and show them in the browser; I have the following code, but it just shows me [object Object][object Object][object Object]; how can I show the actual objects?
my my_obj looks like:
{
"User": {
"description": "A user."
},
"Media": {
"description": "A media ."
}
}
var output = "";
for (var key in my_obj) {
output += my_obj[key];
}
response.send(output);
Thanks
It looks like this question is essentially a duplicate of yours.
The accepted answer for that question uses the console object to print the contents of the object to the JavaScript debugging console in the browser's developer tools (usually accessible with F12). You can typically interact with the object, expanding and collapsing its properties, in the logged output in the console.
console.log(my_obj);
However, this doesn't provide an easy way to print the contents of the object to the webpage. For that, you can follow the above-linked question's highest-voted answer, which uses the JSON object, specifically it's stringify method.
var my_obj_str = JSON.stringify(my_obj);
This method returns a stringified version of your object (i.e. it will appear like an object literal), which can then either be logged to the console like above (although it would be a string, not an interactive object!), or put into the webpage in whatever manner you like putting strings into webpage content.
You might need to use JSON.stringify() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
Related
We have an internal tooling system that uses JSON to specify various actions, tasks etc. I'm making a single page web application to visualise this information. The web application contains a text area for editing/pasting JSON and another area which renders the JSON into UI elements.
So I want to take JSON from the text area and visualize it. But also, I want the user to be able to interact with this render visualization, making changes/configuring options and have it update the JSON immediately. I guess one could call that two-way binding.
While going from JSON -> HTML DOM elements is easy, I'm not sure how to do the reverse and go DOM -> JSON. Let's say we have some JSON
{"task1" : {
"canFail" : true,
"autoRestart" : false,
"connectionPropertys" : {
... }
}
}
I would visualize task1 as some UI element with check boxes for canFail and autoRestart. I want the user to be able to both
edit the JSON "canFail" value to 'true' or 'false' and have that
immediately render (this is easy - just re-render the entire JSON)
check or uncheck the canFail checkbox and have the JSON be
automatically updated (hard part - where I'm stuck)
In React we pass state/properties down the the children, so the component rending the checkbox(es) would only know about canFail or autoRestart... it might not know about "task1". If the checkbox is changed, sure I can have some handler function fire, but it doesn't actually know what key/value in the JSON this corresponds to (e.g. it knows nothing of task1 and there could be multiple task1s).
Interested to know what a good approach would be here to tackle this.
Thanks :)
I'm a bit amazed I haven't been able to find an explanation for how to do this as it seems like it's fairly elemental to debugging, but I can't find anywhere how to print the attributes of an object in Polymer.
I'm learning Polymer and I keep running into situations where I have an object, but I have no idea what the attributes are of the object. (Ex. I print to the window, and I get [object Object]. I've found some explanations for how to print a list of the keys/attributes of an object (I know how to print the values for those keys if I know what they are), but I have no idea how to get the keys if I don't already know the format of my data. Every example presumes you already know what the attributes are.
I've seen solutions recommending adding a script like:
getKeys : function(o){
return Object.keys(o);
}
And then they recommend something like this:
<template is="dom-repeat" items="{{ item in obj | getKeys}}">
{{item}}
</template>
But I think they must work off maybe an earlier version of polymer. Most are from 2014-ish and I know the library has changed a lot since then.
This is the closest thing I get to an error with this code:
Polymer::Attributes: couldn`t decode Array as JSON
Here's an example post recommending this strategy. I understand I could dig deeper into the documentation and try to understand what response is supposed to be coming back, but I'm more curious what the general strategy is for this situation - I've multiple times wanted to check to see how polymer was modeling something vs how I thought it was.
The post you mention recommends a method that is no longer possible with post-1.0 Polymer, which does not support that syntax of filtering/pipes (as of the current release, 1.5.0).
You could use DevTools to select the Polymer element and then run console.dir($0). This works in the following browsers (and maybe older versions):
Chrome 50
Firefox 45
Safari 9.1
Opera 39
Chrome and Opera display all keys (even inherited ones from HTMLElement) in sorted order, so it can be tedious to scan through the long list of keys for a Polymer-specific property. However, Firefox and Safari list Polymer-specific keys first and then the inherited ones.
One workaround for Chrome/Opera is to use this snippet:
((o) => {
let obj = {};
Object.keys(o).sort().forEach((x) => {
obj[x] = o[x];
});
console.dir(obj);
})($0);
Here's a codepen that logs the attributes of a paper-button. You don't need to click the button. Open the browser's console log (not the Codepen console) to see something like the screenshot below. You can expand the fields in the console log to see the attributes of the Polymer object.
The solution I have been using is the following:
Place a button somewhere on the visible page.
When that button is tapped, print the object to the console.
my-element.html
<button on-tap="show">Click here to see user</button>
...
show: function() {
console.log('user', this.user);
},
...
You can also use console.dir() as follows.
<my-element id="foo"></my-element>
...
bar: function() {
console.dir( this.$.foo );
}
If I'm trying to write a generic test that isn't dependent on labels or other value-specific elements, how do I get that information? Like if I were to tap a tableview cell and need some information from there later. Like to identify which cell was tapped. How could I grab a label from it using an XCUIElement?
The information you can extract from XCUIElement is limited to those in the XCUIElementAttributes protocol. The most notable of these are, identifier, value, and title.
You can set the identifier via -accessibilityIdentifier in your production code. The value property can be set from a couple of different paths, but it's usually the the active state of a control. For example, a picker's selected element.
You can try using the Accessibility Inspector to see what's already set on your element and then using a query to find that element.
You can extract some states for example, accessibilityIdentifier, isHitable, value or whatever but, unfortunately you cannot set/change any of these. So apparently you cannot detect if an XCUIElement is already tapped or not. Thats a big limitation in ui test fw.
Joe was sorta on to the right answer but he left out how to actually get the values for the properties he specified.
Lets assume I want to get the string that gets printed for the nav bar of my app
What I did was I created a XCUIElement for my nav bar:
XCUIApplication *app = [[XCUIApplication alloc] init];
XCUIElement *navBarTitle = [app.navigationBars elementBoundByIndex:0];
I then put a breakpoint after the creation of the navBarTitle object and used the debug console to print out the details of the navBarTitle object:
You see in the print out of the debug console that there is a key called identifier.
To extract that string from that object, I created an NSString object using the following method:
NSString *nameofuser = [navBarTitle valueForKey:#"identifier"];
I used the XCUIElement navBarTitle and then used the method valueForKey. valueForKey extracts the string value for the key identifier.
You can read up about this method here:
NSKeyValueCoding
valueForKey is the KEY to unlocking the answer to this question....pun intended :)
This question already has answers here:
Getting the list of polymer published properties
(2 answers)
Closed 6 years ago.
I'm looking for a way to determine what attributes a polymer element has without interacting with the attributes directly. I stumbled upon this.attributes accidentally and it does contain all the information that I need It's just not very pretty. I was wondering if there was a simple attributes object that existed already. Something simple like this.
{
"src": "http://stackoverflow.com/image.jpg",
"alt": "stackoverflow"
}
Here's how you'd convert it using underscore, it's a little ugly.
this.attr_obj = _.extend.apply(null, _.map(this.attributes, function(attribute){
var temp = {};
temp[attribute.name] = attribute.value;
return temp;
}));
Found the answer in another post.
It's best to use element.publish to get the list of published properties for an element. (In polymer 1.0 element.properties does the same).
element.getAttribute('attributes) won't include the publish properties that are setup in a publish block.
i'm new to android programming and working on a project in which i'm trying to draw a rectangle onto the android canvas depending on the value in json file. Following is the link to my json file
http://smartparkingmanagement.com/parkingwebservice.php
What i'm trying to do will be something like:
if(parkingslotNumber =="SLOT-1" && status = "AVAILABLE"){
canvas.drawRect(10,10,50,40,paint)
}
Have a look at the Creating Custom Views article on the Android Developers site, they explain what you can do with custom Views and how to draw to the canvas.
On a side note, one thing I noticed in your question is you are doing
if(parkingslotNumber == "SLOT-1")
This will return false. You want to call someString.equals(otherString) for String equality comparisons as such:
if("SLOT-1".equals(parkingslotNumber))