I'm very much at the beginning of my journey with Vue and JSON and I'm trying the following as an example.
I'm getting data from tastedive.com like so:
https://tastedive.com/api/similar?q=cannibal+corpse
Which gives me this:
{
"Similar": {
"Info": [
{
"Name": "Cannibal Corpse",
"Type": "music"
}
],
"Results": [
{
"Name": "Death",
"Type": "music"
},
{
"Name": "Deicide",
"Type": "music"
},
{
"Name": "Carcass",
"Type": "music"
},
{
"Name": "Slayer",
"Type": "music"
},
{
"Name": "Morbid Angel",
"Type": "music"
},
{
"Name": "Sepultura",
"Type": "music"
},
{
"Name": "Nile",
"Type": "music"
},
{
"Name": "Dying Fetus",
"Type": "music"
},
{
"Name": "Behemoth",
"Type": "music"
},
{
"Name": "Six Feet Under",
"Type": "music"
},
{
"Name": "Lamb Of God",
"Type": "music"
},
{
"Name": "Vader",
"Type": "music"
},
{
"Name": "Bloodbath",
"Type": "music"
},
{
"Name": "Amon Amarth",
"Type": "music"
},
{
"Name": "Obituary",
"Type": "music"
},
{
"Name": "Aborted",
"Type": "music"
},
{
"Name": "Immortal",
"Type": "music"
},
{
"Name": "Dark Funeral",
"Type": "music"
},
{
"Name": "Kreator",
"Type": "music"
},
{
"Name": "Decapitated",
"Type": "music"
}
]
}
}
Using the following in a file called app.js
const vm = new Vue({
el: '#app',
data: {
results: []
},
mounted() {
axios.get("https://tastedive.com/api/similar?q=cannibal+corpse")
.then(response => {this.results = response.data.results})
}
});
And my HTML looks like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, world!</title>
</head>
<body>
<div class="container-xxl">
<h1>Hello, world!</h1>
</div>
<div class="container" id="app">
<div class="" v-for="result in results">
<div class="card">
<div class="card-divider">
{{ result.name }}
</div>
<div class="card-section">
<p>{{ result.type }}.</p>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="app.js"></script>
</body>
</html>
However, I'm not getting any results to the page.
Any guidance or help on what I'm doing wrong would be much appreciated. Thanks.
EDIT:
The main issue was pathing
response.data.results
Should've read:
response.data.Similar.Results
To reflect the JSON structure.
As noted in a comment below, I am getting CORS errors. I signed up for an API Key which hasn't fixed that issue. I have contacted tastedive.com asking them if they have any guidance on how to resolve this. I am using a browser plugin to get round the issue locally (https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc)
Thanks for everyone's help.
I've updated the original question with the answer.
Related
I am trying to dynamically render a spec (Specification) of a collection from an RPC. Can't get it to work. Here I have attached the code of both 'module->mappable parameters' and the 'remote procedure->communication' here.
module -> mappable parameters
[
{
"name": "birdId",
"type": "select",
"label": "Bird Name",
"required": true,
"options": {
"store": "rpc://selectbird",
"nested": [
{
"name": "variables",
"type": "collection",
"label": "Bird Variables",
"spec": [
"rpc://birdVariables"
]
}
]
}
}
]
remote procedure -> communication
{
"url": "/bird/get-variables",
"method": "POST",
"body": {
"birdId": "{{parameters.birdId}}"
},
"headers": {
"Authorization": "Apikey {{connection.apikey}}"
},
"response": {
"iterate":{
"container": "{{body.data}}"
},
"output": {
"name": "{{item.name}}",
"label": "{{item.label}}",
"type": "{{item.type}}"
}
}
}
Thanks in advance.
Just tried the following and it worked. According to Integromat's Docs you can use the wrapper directive for the rpc like so:
{
"url": "/bird/get-variables",
"method": "POST",
"body": {
"birdId": "{{parameters.birdId}}"
},
"headers": {
"Authorization": "Apikey {{connection.apikey}}"
},
"response": {
"iterate":"{{body.data}}",
"output": {
"name": "{{item.name}}",
"label": "{{item.label}}",
"type": "{{item.type}}"
},
"wrapper": [{
"name": "variables",
"type": "collection",
"label": "Bird Variables",
"spec": "{{output}}"
}]
}
}
Your mappable parameters would then look like:
[
{
"name": "birdId",
"type": "select",
"label": "Bird Name",
"required": true,
"options": {
"store": "rpc://selectbird",
"nested": "rpc://birdVariables"
}
}
]
Needing this myself. Pulling in custom fields that have different types but would like them all to show for the user to update customs fields or when creating a contact be able to update them. Not sure if best to have them all show or have a select drop down then let the user use the map for more than one.
Here is my response from a Get for custom fields. Could you show how my code should look. Got little confused as usualy look for add a value in the output and do you need two separate RPC's in integromat? Noticed your store and nested were different.
{
"customFields": [
{
"id": "5sCdYXDx5QBau2m2BxXC",
"name": "Your Experience",
"fieldKey": "contact.your_experience",
"dataType": "LARGE_TEXT",
"position": 0
},
{
"id": "RdrFtK2hIzJLmuwgBtAr",
"name": "Assisted by",
"fieldKey": "contact.assisted_by",
"dataType": "MULTIPLE_OPTIONS",
"position": 0,
"picklistOptions": [
"Tom",
"Jill",
"Rick"
]
},
{
"id": "uyjmfZwo0PCDJKg2uqrt",
"name": "Is contacted",
"fieldKey": "contact.is_contacted",
"dataType": "CHECKBOX",
"position": 0,
"picklistOptions": [
"I would like to be contacted"
]
}
]
}
I have a JSON data:
{
"orderTotal_1": {
"fields": {
"button": {
"actionDialog": null,
"actionUrl": null,
"clicked": false,
"enable": true,
"text": "LANJUTKAN KE PEMBAYARAN",
"textColor": null
},
"payment": {
"pay": "Rp1.953.800",
"taxTip": "Termasuk PPN, jika berlaku.",
"title": "Total"
},
"timestamp": 1522355946093
},
"id": "1",
"tag": "orderTotal",
"type": "biz"
},
"rightContainer_10010": {
"fields": {
"css": {
"backgroundColor": null,
"floatPosition": "right",
"marginTop": null,
"width": "388px"
}
},
"id": "10010",
"tag": "rightContainer",
"type": "container"
},
"toPayBtn_10021": {
"fields": {
"clicked": false,
"enable": true,
"text": "LANJUTKAN KE PEMBAYARAN"
},
"id": "10021",
"tag": "toPayBtn",
"type": "biz"
},
"voucherInput_1": {
"fields": {
"buttonText": "GUNAKAN",
"placeHolder": "Masukkan Kode Voucher",
"status": "default"
},
"id": "1",
"tag": "voucherInput",
"type": "biz"
}
}
I want to get toPayBtn_10021 but the number 10021 is dynamic. So it can be toPayBtn_34 toPayBtn_21 etc.
This is the output that I want to achieve:
"toPayBtn_10021": {
"fields": {
"clicked": false,
"enable": true,
"text": "LANJUTKAN KE PEMBAYARAN"
},
"id": "10021",
"tag": "toPayBtn",
"type": "biz"
}
This is what I have tried:
jq '.toPayBtn*'
But it results in:
jq: error: syntax error, unexpected $end (Unix shell quoting issues?) at <top-level>, line 1:
.toPayBtn*
jq: 1 compile error
exit status 3
Regex doesn't seem to work with jq How do I fix it ?
with_entries( select(.key | test("^toPayBtn_")) )
produces the output you want. You might want to tweak the regex.
This is angular filter example search text in search box it will only show object which have a search key.
<html ng-app="app">
<head>
<title>App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<style>
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div ng-controller="ctrl">
<input type="text" ng-model="search" placeholder="Search">
{{search}}
<table class="table table-bordered">
<thead>
<tr>
<th>OBJECT</th>
</tr>
</thead>
<h4>{{displayById}}</h4>
<tbody>
<tr ng-repeat="x in jsonData | filter: search">
<td>{{x}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var ngmodule = angular.module("app", []);
ngmodule.controller("ctrl", ["$scope", "$log","$timeout",
function ($scope, $log, $timeout) {
$scope.init = function(){
console.log("$timeout")
}
$timeout($scope.init);
$scope.jsonData = [{
"orderTotal_1": {
"fields": {
"button": {
"actionDialog": null,
"actionUrl": null,
"clicked": false,
"enable": true,
"text": "LANJUTKAN KE PEMBAYARAN",
"textColor": null
},
"payment": {
"pay": "Rp1.953.800",
"taxTip": "Termasuk PPN, jika berlaku.",
"title": "Total"
},
"timestamp": 1522355946093
},
"id": "1",
"tag": "orderTotal",
"type": "biz"
},
"rightContainer_10010": {
"fields": {
"css": {
"backgroundColor": null,
"floatPosition": "right",
"marginTop": null,
"width": "388px"
}
},
"id": "10010",
"tag": "rightContainer",
"type": "container"
},
"toPayBtn_10021": {
"fields": {
"clicked": false,
"enable": true,
"text": "LANJUTKAN KE PEMBAYARAN"
},
"id": "10021",
"tag": "toPayBtn",
"type": "biz"
},
"voucherInput_1": {
"fields": {
"buttonText": "GUNAKAN",
"placeHolder": "Masukkan Kode Voucher",
"status": "default"
},
"id": "1",
"tag": "voucherInput",
"type": "biz"
}
}];
}]);
</script>
</body>
</html>
I have a SQL database, and I am building a webform/webservice to extract data using ASP.NET and visualizing with using D3plus. Moreover, I am using bootstrap to structure my webform. I am trying to have two rows, and would like less white space between them. Additionally, the boxplot doesn't work if I am using values other than year (i.e. string building names. I am sure that I only need a small tweak, but can't figure it out.
I am currently working on the webservice and would greatly appreciate the community's feedback on the webform. Thank you very much for your time! Here is my sample code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="vetWebform.aspx.cs" Inherits="vetApp.vetWebform" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet"/>
<script src="scripts/d3.js"></script>
<script src="scripts/d3plus.js"></script>
<style>
.row {
font-size: 30px;
padding-top: 10px;
margin-bottom: 0px
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="row"> Report from:
<asp:TextBox ID="TextBox3" runat="server" columns="6" style="border:1px solid #ff0000"></asp:TextBox>
To
<asp:TextBox ID="TextBox4" runat="server" columns="6" style="border:1px solid #ff0000"></asp:TextBox>
</div>
<div class="row">
<div class="col-lg-6">
<div id="viz"></div>
</div>
<div class="col-lg-6">
<div id="exports"></div>
</div>
</div>
<script>
var data = [
{"building": "mmb", "name":"alpha", "value": 15},
{ "building": "mmb", "name": "alpha", "value": 34 },
{ "building": "ssb", "name": "alpha2", "value": 17 },
{ "building": "ssb", "name": "alpha2", "value": 65 },
{ "building": "ssb", "name": "beta", "value": 10 },
{ "building": "gcc", "name": "beta", "value": 10 },
{ "building": "gcc", "name": "beta2", "value": 40 },
{ "building": "mmb", "name": "beta2", "value": 38 },
{ "building": "lmd", "name": "gamma", "value": 5 },
{ "building": "lmd", "name": "gamma", "value": 10 },
{ "building": "mmb", "name": "gamma2", "value": 20 },
{ "building": "mmb", "name": "gamma2", "value": 34 },
{ "building": "ssb", "name": "delta", "value": 50 },
{ "building": "ssb", "name": "delta", "value": 43 },
{ "building": "gcc", "name": "delta2", "value": 17 },
{ "building": "gcc", "name": "delta2", "value": 35 }
]
var visualization = d3plus.viz()
.container("#viz")
.data(data)
.type("box")
.id("name")
.x("building")
.y("value")
.time(false)
.height(400)
.ui([{
"label": "Visualization Type",
"method": "type",
"value": ["scatter","box"]
}])
.draw()
</script>
<script>
// sample data array
var trade_data = [
{"usd": 34590873460, "product": "Oil"},
{"usd": 12897429187, "product": "Cars"},
{"usd": 8974520985, "product": "Airplanes"},
{"usd": 9872342, "product": "Apples"},
{"usd": 6897234098, "product": "Shoes"},
{"usd": 590834587, "product": "Glass"},
{"usd": 987234261, "product": "Horses"}
]
// instantiate d3plus
var visualization = d3plus.viz()
.container("#exports")
.data(trade_data)
.type("tree_map")
.id("product")
.size("usd")
.height(400)
.labels({ "align": "left", "valign": "top" })
.draw()
</script>
</form>
</body>
</html>
Here is a screenshot:
I can speak to your bootstrap question, but the code you posted for the D3plus box plot works for me in the current release (v1.9.7).
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 was write the code for displaying country details, but i didnot get the complete details from the json, why is this happen, is there any wrong with the syntax? I got only country name and population from the output.
<!DOCTYPE HTML>
<html ng-app='myApp'>
<head>
<title>search using filters</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
<script src="//ajax.googleapis.com/
ajax/libs/angularjs/1.2.12/angular-route.js"> </script>
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.css" />
<script type="text/javascript">
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider)
{
$routeProvider.
when('/',{
templateUrl:'partial2.html',
controller:'MyCtrl'
}).
when('/:countryName',{
templateUrl:'partial1.html',
controller:'oCtrl'
}).
otherwise({
redirectTo:'/'
});
});
myApp.controller('MyCtrl',function($scope,$http) {
$http.get('/Zjs/data/countries.json').success(function(data){
$scope.countries=data;
});
});
myApp.controller('oCtrl',function($scope,$routeParams,$http)
{
$scope.name=$routeParams.countryName;
$http.get('/Zjs/data/countries.json').success(function(data){
$scope.country=data.filter(function(entry){
return entry.name===$scope.name;
})[0];
});
});
</script>
</head>
<body>
<div class="container" ng-view></div>
</body>
</html>
//partial1
<h1>{{country.name}}</h1>
<ul>
<li>Image:<img ng-src="{{country.Image}}" width="300" height="300"></img></li>
<li>Population:{{country.population | number }}</li>
<li>Capital: {{country.cap}}</li>
</ul>
//partial2
<ul>
<li ng-repeat="con in countries"><a href="#/{{con.name}}" >{{con.name}}</a></li>
<ul>
//countries.json
[
{"name":"india", "population":12345682700,
"cap":"New Delhi",
"Image":"http://www.dollsofindia.com/
images/products/nature-posters/village-scene-DH52_l.jpg"},
{"cap":"Tokyo","name":"japan", "population":1382700,
"Image":"file:///C:/Users/USER/Pictures/er/gettt/3.jpg"
},
{"name":"South korea", "population":13700,
"cap":"Seoul","Image":"C:\Users\USER\Pictures\er\gettt\6.jpg"},
{"name":"iran", "population":132700,
"cap":"Tehran","Image":"C:\Users\USER\Pictures\er\gettt\9.jpg"},
{"name":"russia", "population":1485682700,
"cap":"Moscow","Image":"C:\Users\USER\Pictures\er\gettt\11.jpg"}
]
You have got unescaped backslashes in your json file, I would start by eliminating those and see where that takes you, when I tried your code, resolving that worked for me at least.
[
{
"name": "india",
"population": 12345682700,
"cap": "New Delhi",
"Image": "http://www.dollsofindia.com/images/products/nature-posters/village-scene-DH52_l.jpg"
},
{
"cap": "Tokyo",
"name": "japan",
"population": 1382700,
"Image": "file:///C:/Users/USER/Pictures/er/gettt/3.jpg"
},
{
"name": "South korea",
"population": 13700,
"cap": "Seoul",
"Image": "file:///C:/Users/USER/Pictures/er/gettt/6.jpg"
},
{
"name": "iran",
"population": 132700,
"cap": "Tehran",
"Image": "file:///C:/Users/USER/Pictures/er/gettt/9.jpg"
},
{
"name": "russia",
"population": 1485682700,
"cap": "Moscow",
"Image": "file:///C:/Users/USER/Pictures/er/gettt/11.jpg"
}
]
your json was not a valid one.. so please use this
[
{
"name": "india",
"population": 12345682700,
"cap": "New Delhi",
"Image": "http://www.dollsofindia.com/images/products/nature-posters/village-scene-DH52_l.jpg"
},
{
"cap": "Tokyo",
"name": "japan",
"population": 1382700,
"Image": "file: ///C: /Users/USER/Pictures/er/gettt/3.jpg"
},
{
"name": "Southkorea",
"population": 13700,
"cap": "Seoul",
"Image": "file: ///C: /Users/USER/Pictures/er/gettt/6.jpg"
},
{
"name": "iran",
"population": 132700,
"cap": "Tehran",
"Image": "file: ///C: /Users/USER/Pictures/er/gettt/9.jpg"
},
{
"name": "russia",
"population": 1485682700,
"cap": "Moscow",
"Image": "file: ///C: /Users/USER/Pictures/er/gettt/11.jpg"
}
]
you can test your json data is valid or not by using http://jsonlint.com