Hi I'm a beginner at programming. I'm trying to put data from a json file into a variable
I want to have AngularJS put text into a html document like this
{{ data.text }}
And the text is based off of a json file I have in the app.js, so I set data using JQuery:
myApp.controller('Ctrl', function ($scope, $http) {
$.getJSON("../static/file.json", function(data) {
$scope.data = data;
});
But nothing shows up initially. When I log $scope.data, it turns out to be undefined. But I know that my json file is correct because if I put all this code in some method that is called like
$scope.foo = function(){$.getJSON("../static/file.json", function(data) {
$scope.data = data;
});}
and have some button activate this, it'll work fine. But I want this to be there initially.
try
$.getJSON("/static/file.json", function(data) {
$scope.data = data;
});
then it load file from web http://xxx/static/file.json, not file system.
Related
My goal is to create a function to shows hearthstone cards from the game. My API is working and I am fetching the data from the API, no problem here. The problem I run into is to show the result in my HTML page.
I've tried different object calls within the angular tag {{ }}, but the closest I've gotten is giving me the result of [[Object Object]].
Right now I am working on getting the API and HTML page to work correctly, so everything is in sync, so I am not looking for a full solution on a search engine through the data, just so that it syncs with my HTML page and shows the data I am calling (specific hardcoded data location).
This is all the code inside the controller:
var produkterControllers = angular.module('produkterControllers', []);
produkterControllers.controller('minApiFunktionController', function myController($scope, $http, $q) {
var fetchPromise = fetch("https://omgvamp-hearthstone-v1.p.rapidapi.com/cards", {
"method": "GET",
"headers": {
"x-rapidapi-host": "omgvamp-hearthstone-v1.p.rapidapi.com",
"x-rapidapi-key": "8ad5a16c67mshed80ba15c31ab54p141ec5jsnfbff6480fd40"
}
})
var angularPromise = $q.when(fetchPromise);
angularPromise.then(function (response) {
var test = response.json;
return response.json();
}).then(function (data) {
console.log('this is the data, ', data);
$scope.cards = data;
});
});
This is the code inside index.html that's supposed to show the result (relevant to quesiton)
<div ng-controller="minApiFunktionController">
<ul>
<li ng-repeat="item in cards">
<p>
<span>{{item.Basic.cardId}}</span>
</p>
</li>
</ul>
</div>
Just to clarify I got the controller imported and the index.html is including the module,
show this code to clarify that the controller is connected to my index.html page.
<html ng-app="produkterControllers">
maybe $scope.cards is not array, and not show in ng-repeat
I have retrieved one json file in my login controller whose values I'm using in all the html files of my application but now I want to use the same JSON object in module.js files on all other pages.... can someone please suggest me how to fix this..This is the function which I've written in my controller, in which I want to use translation value in different page's module.js file.
Thanks in advance!!
function getTranslation(filname) {
var languageFilePath = 'app/pages/translations/translation_' + filname + '.json';
$resource(languageFilePath).get(function (data) {
$scope.translation = data;
});
}
I am working on single page application, which is implementing based on Angular JS, JavaScript, JSON. I am calling one API then I am getting response and this response I want pass as a parameter in function call. I am sharing my code:
abc.JS
Rh.get('------API URL----').then(function(response){
var data=response;
var item = '<a class="btn btn-xs" ng-click="sendDataPost('+"'"+JSON.stringify(data)+"'"+')" >'
'</a>'
})
$scope.sendDataPost = function (data) {
alert("--");
console.log(data);
}
When I click on anchor tag then sendDataPost function is call and comes into the function definition($scope.sendDataPost). only [object Object] is showing in console. I am not able to pass JSON Data as a parameter. I have seen one link but still I am not able to do because in this link using onclick, but I am using ng-click.
How to pass a json object in js funcion as a function parameter?
I am sharing my sample URL.
JSON SAMPLE URL.
http://www.json-generator.com/api/json/get/cgwLpLgbyq?indent=2
I editing my question. I solve when I am parsing the data in parameter, It is breaking. I am sharing screen shot
sendDataPost parameter is breaking in console and breaking html page. All json data display in HTML page. How can I pass the response data successfully with function parameter.
Why not you try to holding value in scope variable this below?
$scope.result = [];
Rh.get('------API URL----').then(function(response){
$scope.result = response;
})
$scope.sendDataPost = function (data) {
console.log(data);
}
in HTML
ng-click="sendDataPost(result)"
Please help me to write textbox value / data into existing JSON file. I have tried with code below but unable with this. I am able to write in "textarea" but not in existing JSON file please let me know how to refer existing JSON file here and write data on that file.
var app = angular.module('myApp', []).controller('myCtrl', function ($scope) {
$scope.person = {};
$scope.getJSON = function () {
console.log("Creating a JSON");
$scope.jsonString = angular.toJson($scope.person, true);
};
});
My JSON file existing in dir: DataBase/DataBase.json
Most browsers don't allow javascript to access file system, most probably you would not be able to do this. I could suggest you to send your json data to a backend and rewrite file there.
Keep your json file inside mongodb or sqlite,then you can do all curd operation in the Json data
Im trying to figure something out. If I want to load JSON data from a local file in my angular app, is there a way for me to include or to read the file in angular, or do I need to use some file API to read from the file and store the objects in a array. ty
you can use $http for loading json data from json file
var name = angular.module("app", []);
name.controller("ctrlu", ['$scope','$http', function($scope, $http)
{
$http.get('js/data.json').success (function(data){
$scope.guitarVariable = data;
});
}]
);
Note:you don't need to include(reference) json file in index.html page