Inside the body tag of this html file, I have a button that clicking it should result in getting contents of colors.json into console.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script type="primary" src="colors.json"></script>
<script type="text/javascript">
function load() {
var someData_notJSON = JSON.parse(data);
console.log(someData_notJSON[0].red);
}
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'colors.json', true);
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
callback(xobj.responseText);
}
};
xobj.send(null); //line 24
}
function init() {
loadJSON(function(response) {
var actual_JSON = JSON.parse(response);
console.log(actual_JSON);
});
}
</script>
<title></title>
</head>
<body>
<button type="button" name="button" onclick=" init()">Click me</button>
</body>
</html>
And here is the colors.json file:
{
"colors": [
{
"color": "black",
"category": "hue",
"type": "primary",
"code": {
"rgba": [255,255,255,1],
"hex": "#000"
}
},
{
"color": "white",
"category": "value",
"code": {
"rgba": [0,0,0,1],
"hex": "#FFF"
}
},
]
}
On page load I get this error: Uncaught SyntaxError: Unexpected token :
Do you know what causes this issue?
It could be that you have an unnecessary comma at the end of your array:
{
"colors": [
{
"color": "black",
"category": "hue",
"type": "primary",
"code": {
"rgba": [255,255,255,1],
"hex": "#000"
}
},
{
"color": "white",
"category": "value",
"code": {
"rgba": [0,0,0,1],
"hex": "#FFF"
}
}
]
}
{
"colors": [
{
"color": "black",
"category": "hue",
"type": "primary",
"code": {
"rgba": [255,255,255,1],
"hex": "#000"
}
},
{
"color": "white",
"category": "value",
"code": {
"rgba": [0,0,0,1],
"hex": "#FFF"
}
}
]
}
Can you remove the last comma and try it out.
Related
I am trying to echo the user selected option from given set of user rating drop down using messageBack or imBack (whichever is possible). Since, I am only able to add a static text as value in messageBack value field
"actions": [
{
"type": "Action.Submit",
"title": "OK",
"data": {
"msteams": {
"type": "imBack",
"value": "User selected option"
}
}
}
]
Is there a way that I can get the value from choiceset and show is using messageBack on MS Teams?
You can refer to complete JSON here:
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"color": "Accent",
"text": "Rate your experience!"
},
{
"type": "TextBlock",
"separator": true,
"text": "Please rate your experience! Your feedback is very appreciated and will help improve your experience in the future. ",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "CompactSelect",
"label": "What color do you want? (compact)",
"style": "compact",
"isRequired": true,
"errorMessage": "This is a required input",
"placeholder": "Please choose",
"choices": [
{
"title": "⭐⭐⭐⭐⭐",
"value": "⭐⭐⭐⭐⭐"
},
{
"title": "⭐⭐⭐⭐",
"value": "⭐⭐⭐⭐"
},
{
"title": "⭐⭐⭐",
"value": "⭐⭐⭐"
},
{
"title": "⭐⭐",
"value": "⭐⭐"
},
{
"title": "⭐",
"value": "⭐"
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK",
"data": {
"msteams": {
"type": "imBack",
"value": "User selected option"
}
}
}
]
}
#user30 - Could you please check this Code?
var InputChoices = new List<AdaptiveChoice> {
new AdaptiveChoice() { Title = "Red",
Value = "Red" },
new AdaptiveChoice() { Title = "Green",
Value = "Green" },
new AdaptiveChoice() { Title = "White",
Value = "White" },
new AdaptiveChoice() { Title = "Black",
Value = "Black" }
};
return new AdaptiveCard()
{
Body = new List<AdaptiveElement>()
{
new AdaptiveColumnSet()
{
Columns=new List<AdaptiveColumn>()
{
new AdaptiveColumn()
{
Items=new List<AdaptiveElement>()
{
new AdaptiveTextBlock()
{
Text="Colors",
Id="colorCodeId",
Spacing=AdaptiveSpacing.None,
Wrap=true
}
}
},
new AdaptiveColumn()
{
Items=new List<AdaptiveElement>()
{
new AdaptiveChoiceSetInput()
{
Id="colorCodeId",
Spacing=AdaptiveSpacing.None,
Choices=new List<AdaptiveChoice>(InputChoices),
Style=AdaptiveChoiceInputStyle.Compact
}
}
}
}
},
},
Actions = new List<AdaptiveAction>()
{
new AdaptiveSubmitAction
{
Type = AdaptiveSubmitAction.TypeName,
Title = "Submit"
},
},
}
I need to filter in the console.log the data that I get from the json that I show in the image. How could I do it?
Code
This is my .JSON
[
{
"category": "FORMULARIOS",
"items": [
{
"label": "Botones",
"url": "ui-botones"
},
{
"label": "Inputs",
"url": "ui-inputs"
}
]
},
{
"category": "CORREOS",
"items": [
{
"label": "Facturas",
"url": "ui-facturas"
},
{
"label": "Movimientos",
"url": "ui-movimientos"
}
]
},
{
"category": "ALERTAS",
"items": [
{
"label": "Toast",
"url": "ui-toast"
},
{
"label": "Toolips",
"url": "ui-toolips"
}
]
}
]
You can do like this:
var yourJSON ="......";
var newData = filterData('CORREOS');
function filterData(catalogyName) {
return yourJSON.filter(object => {
return object['category'] == catalogyName;
});
}
console.log(newData);
I have the following json
{
"records": [
{},
{},
{},
{},
{},
{},
{},
{},
{
"id": "recoEidAQO7qiu7M9",
"fields": {
"Room": "Exterior",
"img": [
{
"id": "attVi68pAaCpX1fDQ",
"url": "https://dl.airtable.com/7munMtXcSK6WHDtMFEqA_IMG_0877%20New%20paint%20(1024x768).jpg",
"filename": "IMG_0877 New paint (1024x768).jpg",
"size": 566394,
"type": "image/jpeg",
"thumbnails": {
"small": {
"url": "https://dl.airtable.com/uFr8bJcSqyPFoe6n91EA_small_IMG_0877%20New%20paint%20(1024x768).jpg",
"width": 48,
"height": 36
},
"large": {
"url": "https://dl.airtable.com/zfgQJqL7Si2Vi9kZe3Bx_large_IMG_0877%20New%20paint%20(1024x768).jpg",
"width": 512,
"height": 512
}
}
}
]
},
"createdTime": "2016-08-16T21:29:37.000Z"
}
]
}
I'm attempting to use lodash. I'm trying get the url for the value 'Exterior' so that with jquery I can concatenate and build the following
$('wrapper').css('background-image' , 'url('+url+')')
Thanks in advance
You can use a combination of find and get in order to get the url:
var obj = _.find(json.records, function(el) {
return _.get(el, 'fields.Room') === 'Exterior';
});
var url = _.get(obj, 'fields.img[0].url');
var json = {
"records": [
{},
{},
{},
{},
{},
{},
{},
{},
{
"id": "recoEidAQO7qiu7M9",
"fields": {
"Room": "Exterior",
"img": [
{
"id": "attVi68pAaCpX1fDQ",
"url": "https://dl.airtable.com/7munMtXcSK6WHDtMFEqA_IMG_0877%20New%20paint%20(1024x768).jpg",
"filename": "IMG_0877 New paint (1024x768).jpg",
"size": 566394,
"type": "image/jpeg",
"thumbnails": {
"small": {
"url": "https://dl.airtable.com/uFr8bJcSqyPFoe6n91EA_small_IMG_0877%20New%20paint%20(1024x768).jpg",
"width": 48,
"height": 36
},
"large": {
"url": "https://dl.airtable.com/zfgQJqL7Si2Vi9kZe3Bx_large_IMG_0877%20New%20paint%20(1024x768).jpg",
"width": 512,
"height": 512
}
}
}
]
},
"createdTime": "2016-08-16T21:29:37.000Z"
}
]
};
var obj = _.find(json.records, function(el) {
return _.get(el, 'fields.Room') === 'Exterior';
});
var url = _.get(obj, 'fields.img[0].url');
console.log(url);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
I am trying to create a file explorer kind of project. I am using angularjs for this. The thing is I am having trouble to get the data from the json file which I created manually.
My json data
[
{
"id": 0,
"name": "Nature",
"images": [
{
"id": 0,
"src": "images/nature/01.jpg",
"thumb": "images/nature/01-thumb.jpg",
"name": "Nature View"
},
{
"id": 1,
"src": "images/nature/02.jpg",
"thumb": "images/nature/02-thumb.jpg",
"name": "Nature View"
},
{
"id": 2,
"src": "images/nature/03.jpg",
"thumb": "images/nature/03-thumb.jpg",
"name": "Nature View"
},
{
"id": 3,
"src": "images/nature/04.jpg",
"thumb": "images/nature/04-thumb.jpg",
"name": "Nature View"
}
]
},
{
"id": 1,
"name": "Lanscape",
"images": [
{
"id": 0,
"src": "images/landscape/01.jpg",
"thumb": "images/landscape/01-thumb.jpg",
"name": "Landscape View"
},
{
"id": 1,
"src": "images/landscape/02.jpg",
"thumb": "images/landscape/02-thumb.jpg",
"name": "Landscape View"
},
{
"id": 2,
"src": "images/landscape/03.jpg",
"thumb": "images/landscape/03-thumb.jpg",
"name": "Landscape View"
},
{
"id": 3,
"src": "images/landscape/04.jpg",
"thumb": "images/landscape/04-thumb.jpg",
"name": "Landscape View"
}
]
},
{
"id": 2,
"name": "Movies",
"images": [
{
"id": 0,
"src": "images/movies/01.jpg",
"thumb": "images/movies/01-thumb.jpg",
"name": "Ipsum View"
},
{
"id": 1,
"src": "images/movies/02.jpg",
"thumb": "images/movies/02-thumb.jpg",
"name": "Ipsum View"
},
{
"id": 2,
"src": "images/movies/03.jpg",
"thumb": "images/movies/03-thumb.jpg",
"name": "Ipsum View"
},
{
"id": 3,
"src": "images/movies/04.jpg",
"thumb": "images/movies/04-thumb.jpg",
"name": "Ipsum View"
}
]
}
]
It is a file explorer so thought it should have category name and it will have images in it. That's the reason this structure.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'home.html',
controller: 'mainCtrl'
}).
when('/:id', {
templateUrl: 'detail.html',
controller: 'detailCtrl'
}).
otherwise({
redirectTo: '/'
});
});
app.controller('mainCtrl', function($http, $scope) {
$http.get('data.json').success(function (data) {
$scope.mainData = data;
});
});
app.controller('detailCtrl', function($http, $scope, $routeParams) {
$scope.id = $routeParams.id;
$http.get('data.json').success(function (data) {
angular.forEach(data, function (temp) {
$scope.mainData = temp.images;
});
});
});
home.html
<ul ng-repeat="data in mainData">
<li>{{data.name}}</li>
</ul>
detail.html
<div ng-repeat="data in mainData">
<h1>{{data.name}}</h1>
<img src="{{data.thumb}}" />
</div>
When I loop into images the data is displayed same for every id. What I am trying is when I click on nature I want the nature images and it's data to be displayed. I have created a plunkr http://plnkr.co/edit/aR7PM2KQw7XsCtGTYvtI?p=preview
Please help me with this as I'm having trouble understanding this one.
The problem is the detailCtrl you are allways setting mainData to last element. Quick Fix:
app.controller('detailCtrl', function($http, $scope, $routeParams) {
$scope.id = $routeParams.id;
$http.get('data.json').success(function (data) {
$scope.mainData = data[$scope.id].images;
});
});
Plunker Edited: http://plnkr.co/edit/3G2TFGvgfW4EihhS4oo4?p=preview
Extended Edit:
This works but is not the way to work in angular, you should wrap your data access into a factory, and then resolve the data model in the router before loading the view. Right now you are fetching the data each time, when you should only do this one time.
I need to get all the data from my json FB file.
Some insertion for example, few fields have "likes" but others dont.
I need to check if the field "like" exists
An example of my data is this:
{
"userdata":
[
{
"id": "xxxxxxxxxxxxxxxxxxxx",
"from": {
"name": "my name",
"id": "xxxxxxxxxxxxxxxxxxxx"
},
"message": "Hello",
"actions": [
{
"name": "Comment",
"link": "https://www.facebook.com/"
},
{
"name": "Like",
"link": "https://www.facebook.com/"
}
],
"privacy": {
"description": "Friends",
"value": "ALL_FRIENDS",
"friends": "",
"networks": "",
"allow": "",
"deny": ""
},
"type": "status",
"status_type": "mobile_status_update",
"application": {
"name": "Graph API Explorer",
"id": "xxxxxxxxxxxxxxxxxxxx"
},
"created_time": "2013-12-25T15:22:43+0000",
"updated_time": "2013-12-25T15:22:43+0000",
**"likes"**: {
"data": [
{
"id": "xxxxxxxxxxxxxxxxxxxx",
"name": "friend1"
},
{
"id": "xxxxxxxxxxxxxxxxxxxx",
"name": "friend2"
}
],
"paging": {
"cursors": {
"after": "xxxxxxxxxxxxxxxxxxxx==",
"before": "xxxxxxxxxxxxxxxxxxxx=="
}
}
}
},
{
"id": "xxxxxxxxxxxxxxxxxxxx",
"from": {
"name": "name3",
"id": "xxxxxxxxxxxxxxxxxxxx"
},
"to": {
"data": [
{
"name": "my name",
"id": "xxxxxxxxxxxxxxxxxxxx"
}
]
},
"message": "hello again! ",
"actions": [
{
"name": "Comment",
"link": "https://www.facebook.com/xxxxxxxxxxxxxxxxxxxx"
},
{
"name": "Like",
"link": "https://www.facebook.com/xxxxxxxxxxxxxxxxxxxx"
}
],
"privacy": {
"value": ""
},
"type": "status",
"application": {
"name": "Facebook for iPad",
"namespace": "fbipad_",
"id": "xxxxxxxxxxxxxxxxxxxx"
},
"created_time": "2013-12-17T20:34:04+0000",
"updated_time": "2013-12-17T20:34:04+0000"
}
]
}
I use the following code but I get only the first insertion and not both because the second does not have the field "likes".
<script>
$(document).ready(function(){
});
$("#loaduserdata").click(function(){
$("#userdata tbody").html("");
$.getJSON("js.json", function(data){
$.each(data.userdata, function(i,user){
var tblRow =
"<tr>"
+"<td>FEED FROM: "+user.from.name+"</td>"
+"<td>MESSAGE: "+user.message+"</td>"
+"<td>created_time: "+user.created_time+"</td>"
+"<td>updated_time: "+user.updated_time+"</td>"
+ "<td>LIKES TO" + (typeof user.likes.data == "undefined" ? "" : user.likes.data.map(function(item) { return " "+item.name; }).join(", ")) + "</td>"
+"</tr>"
$(tblRow).appendTo("#userdata tbody");
});
}
);
});
</script>
HELP please.
You forgot to check if user.likes exists and only check for user.likes.data, but that check already throws an error because you try to access the property data on an undefined object.
function getLikesFromUser(user) {
if (user.likes && user.likes.data) {
return user.likes.data.map(function(item) {
return item.name;
}).join(", ");
} else {
return "";
}
}
Fixed Example on Plunker