How to display REST API response in Vue.js - javascript

I am new to Front-end dev, and I want to display below REST API response using Vue.js
Where the domains names will be a DDL, once u select one of them it will show u the list of subdomain in it with their version.
[
{
"subdomains": [
{
"name": "subdomain-1",
"version": "0.4.12"
},
{
"name": "subdomain-2",
"version": "0.4.25"
}
],
"name": "RB"
},
{
"subdomains": [
{
"name": "subdomain-3",
"version": "0.4.2"
},
{
"name": "subdomain-4",
"version": "0.4.5"
}
],
"name": "OB"
}
]

Related

Want to filter the json objects

I am having json objects with parent and child combination. I need to filter only the keys which matches the condition in child key/value pair.
response json is below,
I tried by using lodash filter and pickup and some more thing and result is only getting the child objects. But i need the output with including parent objects as well
"custom": {
"url": "",
"version": ""
},
"apple": {
"path": "www.testing.com",
"version": "4.5"
},
"mango": {
"path": "www.mango.com",
"version": "4.5"
},
"pineapple": {
"path": "www.pineapple.com",
"version": "4.4"
},
"jackfruit": {
"path": "www.jackfruit.com",
"version": "4.3"
}
Here, i need to filter only the objects which has version=4.5 and version="".
i need to filter the above json like below,
"custom": {
"url": "",
"version": ""
},
"apple": {
"path": "www.testing.com",
"version": "4.5"
},
"mango": {
"path": "www.mango.com",
"version": "4.5"
},
Please let me know how to make this possible.
Your question is ambiguity. According to your input/output sample, I guess code below is what you need:
let data = { "custom": {
"url": "",
"version": ""
},
"apple": {
"path": "www.testing.com",
"version": "4.5"
},
"mango": {
"path": "www.mango.com",
"version": "4.5"
},
"pineapple": {
"path": "www.pineapple.com",
"version": "4.4"
},
"jackfruit": {
"path": "www.jackfruit.com",
"version": "4.3"
}}
let result = _.pickBy(data,(v,k)=>v.version === "4.5" || v.version ==="" )
console.log(result)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

Path with '/' in json-server db.json

i use server-json to have a fake API, i have the path "playbook/active" in data.json
"playbook/active": [{
"description": "This playbook will install haproxy",
"name": "Testing playbook 3",
"tag": [
"loadbalancer",
"charge"
],
"path": "/etc/ansible/haproxy.yml",
"type": "action",
"id": "4bb107be-9efe-11e9-b3e5-bc5ff4901aa5"
},
{
"path": "google.com",
"description": "This is the playbook before execution",
"tag": [
"webserver",
"tomcat"
],
"id": "faa746b4-9cb7-11e9-9b94-bc5ff4901aa5",
"name": "mysql"
}
]
but i have this error
Error: Oops, found / character in database property 'playbook/active'.
I change to "playbook/active" but same error
Providing a complete answer (showcase example)
Configuring db.json and routes.json can do the trick for you:
db.json
{
"playbookActive": [
{
"id": 1,
"name": "Active Playbook 1",
"description": "Description 1"
},
{
"id": 2,
"name": "Active Playbook 2",
"description": "Description 2"
}
]
}
routes.json
{
"/playbook/active": "/playbookActive",
"/playbook/active/:id": "/playbookActive/:id"
}
Note: the mapping in routes.json is goes like this: [expanded/endpoint]: aliasEndpoint where aliasEndpoint should match the one from db.json.
package.json
{
...
"scripts": {
"api": "json-server [path-to-db.json] --routes [path-to-routes.json] --no-cors=false"
},
...
}
Verify the routing on start (logs from npm run api):
Resources
http://localhost:3000/playbookActive
Other routes
/playbook/active -> /playbookActive
/playbook/active/:id -> /playbookActive/:id
Home
http://localhost:3000
Examples
GET → http://localhost:3000/playbook/active
Response contains a list with all the active playbooks:
[
{
"id": 1,
"name": "Active Playbook 1",
"description": "Description 1"
},
{
"id": 2,
"name": "Active Playbook 2",
"description": "Description 2"
}
]
GET → http://localhost:3000/playbook/active/2
Response contains the active playbook that matches id=2:
{
"id": 2,
"name": "Active Playbook 2",
"description": "Description 2"
}
Check the error message:
Oops, found / character in database property 'dossier/la'.
/ aren't supported, if you want to tweak default routes, see
https://github.com/typicode/json-server/#add-custom-routes
It seems that slashes are not supported.
The solution is to create a routes.json file containing the mapping for your url.
For example the contents of this file could be:
{
my-awesome-endpoint": "playbook/active"
}
For example:
db.json
"list": [
{
"name": "abcde",
"tel": "123454323",
"id": 5
}
]
routes.json
{
"/v1/list?type=hot": "/list"
}
start command:
npx json-server --watch db.json --routes routes.json

Extract information from json

So I have the following object from my controller, which has a name, a list of beans and a list of operations:
{
"name": "Charge",
"beans": [
],
"operations": [
{
"name": "getSize",
"returnType": "java.lang.Integer",
"description": "empty description",
"parameters": [
]
},
{
"name": "truncate",
"returnType": "java.lang.Void",
"description": "empty description",
"parameters": [
]
},
{
"name": "count",
"returnType": "java.lang.Integer",
"description": "empty description",
"parameters": [
{
"name": "javaCode",
"type": "java.lang.String",
"value": null
}
]
},
{
"name": "update",
"returnType": "java.lang.Integer",
"description": "empty description",
"parameters": [
{
"name": "javaSelectCode",
"type": "java.lang.String",
"value": null
},
{
"name": "javaUpdateCode",
"type": "java.lang.String",
"value": null
}
]
},
{
"name": "delete",
"returnType": "java.lang.Integer",
"description": "empty description",
"parameters": [
{
"name": "javaCode",
"type": "java.lang.String",
"value": null
}
]
},
{
"name": "dump",
"returnType": "java.lang.Void",
"description": "empty description",
"parameters": [
{
"name": "javaSelectCode",
"type": "java.lang.String",
"value": null
},
{
"name": "destinationPath",
"type": "java.lang.String",
"value": null
}
]
},
{
"name": "select",
"returnType": "java.lang.String",
"description": "empty description",
"parameters": [
{
"name": "javaCode",
"type": "java.lang.String",
"value": null
}
]
}
],
"$$hashKey": "object:620"
}
Basically I want to display all the operations from this object in a dropdown menu.
So I was thinking of having something like:
<div ng-repeat="operation in object.operations">
{{operation.name}}
</div>
Except the code above doesn't display anything on the screen, no errors in the console, nothing.
Any help would be much appreciated!
EDIT:
Javascript service:
app.controller('selectAll', ['$http', '$scope' , '$rootScope', function ($http, $scope, $rootScope) {
$scope.response;
$scope.operations;
$rootScope.$on("invokeSelectAll", function(){
$scope.invokeSelectAll();
});
$scope.invokeSelectAll = function(){
$scope.response = $http.post('/invoke/selectAll/', $rootScope.dataObj);
$scope.object = JSON.stringify($rootScope.object);
console.log(" object operation from selectAll " + $scope.object);
$scope.response.then(function(data) {
$scope.responses = data.data ? data.data : "Select Operation not supported on this bean";
});
}
}]);
Screenshot of dev console:
https://imgur.com/a/8WAAL
Use JSON.stringify() to create a JSON string from a JavaScript object.
Use JSON.parse() to parse a JSON string to a JavaScript object.
In your case, you need to use JSON.parse() because you get a JSON string from the server and want to parse it to a JavaScript object.
$scope.object = JSON.parse($rootScope.object);
you are using JSON.stringify which is used to change javascript object to string and store it as a string only.
You should Parse the data with JSON.parse(), and the data becomes a JavaScript object. and you can easily use that in ng-repeat.
Try it ,It will work fine

Access JSON Child Node via Variable - JSON2HTML

i got the following transform template:
var transform = {'<>':'li','html':'${name} - ${version} - ${licenseSources.package.sources[0].license}'};
now i want to transform a JSON into a HTML with json2html:
var html = json2html.transform(data,transform);
JSON looks like this:
{
"id": "xxx",
"name": "xxx",
"version": "0.0.14-SNAPSHOT",
"repository": "xxx",
"directory": "./",
"type": "(none)",
"licenseSources": {
"package": {
"sources": [{
"license": "BSD",
"url": "(none)"
}
]
},
"license": {
"sources": [{
"filePath": "xxx",
"text": "xxx"
}, {
"filePath": "xxx",
"text": "xxx"
}
]
},
"readme": {
"sources": [{
"filePath": "xxx",
"text": "xxx"
}
]
}
}
}
I want to access licenseSouce.package.sources.license = "bsd" over the transform variable. But i can't figure out the notation.
Can someone help?
Thx in advance
I figured it out:
${licenseSources.package.sources.0.license}

Show latest facebook post on website

I'm having trouble in showing the latest post of my Facebook page in my website without using PHP since the website is not hosted in an Apache server.
What I've done till now:
Created a Facebook app and generated an Access token.
Access to Facebook Developer Graph explorer, and used GET method
https://developers.facebook.com/tools/explorer?method=GET&path=nextgenerationmorocco%2Ffeed%3Flimit%3D1&version=v2.0
The result after clicking on Graph Explorer submit button:
{
"data": [
{
"id": "421944571240838_501444706624157",
"from": {
"category": "Organization",
"category_list": [
{
"id": "162237190493977",
"name": "Computer Training"
},
{
"id": "108472109230615",
"name": "Computer Services"
}
],
"name": "Next Generation I.T.",
"id": "421944571240838"
},
"message": "Inscriptions ouvertes pour la formation symfony2\nProfil du formateur : Ingénieur d'état, 5 ans d'expérience.",
"picture": "https://fbexternal-a.akamaihd.net/safe_image.php?d=AQCyB9kEztxV2fnb&w=154&h=154&url=http%3A%2F%2Fngitmaroc.com%2Fimg%2Fportfolio%2Fformation-web-1.jpg",
"link": "http://ngitmaroc.com/formation-web.html",
"name": "Formation Web",
"caption": "ngitmaroc.com",
"description": "Formation programmation/développement site application web php5 symfony2 Maroc Oujda",
"icon": "https://fbstatic-a.akamaihd.net/rsrc.php/v2/yD/r/aS8ecmYRys0.gif",
"privacy": {
"value": ""
},
"type": "link",
"status_type": "shared_story",
"created_time": "2014-06-01T12:17:22+0000",
"updated_time": "2014-06-01T12:17:22+0000",
"likes": {
"data": [
{
"id": "1459899217586855",
"name": "Nassira Said"
},
{
"id": "1484688285098548",
"name": "Mohamed Tizaoui"
},
{
"id": "1458333711077710",
"name": "Hasnae Lazaar"
},
{
"id": "574623632656391",
"name": "KaOûtar OuJdiia"
}
],
"paging": {
"cursors": {
"after": "NTc0NjIzNjMyNjU2Mzkx",
"before": "MTQ1OTg5OTIxNzU4Njg1NQ=="
}
}
}
}
],
"paging": {
"previous": "https://graph.facebook.com/v2.0/421944571240838/feed?limit=1&since=1401625042",
"next": "https://graph.facebook.com/v2.0/421944571240838/feed?limit=1&until=1401625041"
}
}
How can I use Javascript to fetch these information and show them on my website : "message", "from", "created_time"? Any help will be highly appreciated since I'm new to Javascript and Facebook developers!
You alternatively may use Facebook Likebox plugin to show your recent posts in your website.

Categories