Hello guys i got a problem, i cant display my graph it will become like this
As u can see there i also print console log.Nothing error occur.
Below is my index.php
<!DOCTYPE html>
<html>
<head>
<title>Line</title>
</head>
<body>
<div class="chart-container">
<canvas id="line-chartcanvas"></canvas>
</div>
<script src="js/Chart.bundle.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/chartmain.js"></script>
</body>
</html>
My chartmain.js
$(function(){
$.ajax({
url:"http://localhost/Media/chart.php",
type: "GET",
success : function (data) {
var count = [];
var displayLink = [];
for(var i in data){
count.push ("Player" + data[i].count);
displayLink.push(data[i].displayLink);
}
var chartdata = {
labels: displayLink,
datasets : [
{
data: displayLink,
label : 'Score',
backgroundColor:
"#F1c40F"
}
]
};
var ctx =$("#line-chartcanvas");
var barGraph = new Chart(ctx,{
type: 'bar',
data: chartdata
});
console.log(data);
},
error : function (data) {
console.log(data);
},
});
});
My Json Array
[
{
"count": "3",
"displayLink": "www.bharian.com.my"
},
{
"count": "1",
"displayLink": "www.hmetro.com.my"
},
{
"count": "6",
"displayLink": "www.nst.com.my"
},
{
"count": "1",
"displayLink": "www.sinarharian.com.my"
},
{
"count": "1",
"displayLink": "www.utusan.com.my"
}
]
I think perhaps it cant read my data from JSON but in console log it read
Thanks for helping me, already found the answer, I cant get data from JSON but i can data from MySQL
Related
Jquery UI autocompletion does not work with my JSON file. I want to display the values of the name key. Can you help me?
cluster.json :
[
{
"name": "A128",
"ra": "24.97",
"dec":"12.210"
},
{
"name": "AB 1317",
"ra": "22.55",
"dec": "37.124"
},
{
"name": "UBA 133",
"ra": "35.6",
"dec": "16.44"
},
{
"name": "UGC 69",
"ra": "35.6",
"dec": "16.44"
}
and Jquery in HTML:
$('#name').autocomplete({
source : function(request, response) {
$.ajax({
url :'cluster.json',
dataType : 'json',
data : request,
success: function(data) {
response($.map(data, function(item) {
return item.name;
}));
}
});
}
});
When I enter a character there is this error message in the console:
Erreur d’analyse XML : erreur de syntaxe
Emplacement : file:///C:/Users/xxxx/xxxxx/json/cluster.json?term=A
Numéro de ligne 1, Colonne 3 :
Thank you for your help.
Consider the following:
var myData = [];
$.getJSON("cluster.json", function(data){
myData = $.map(data, function(v, k){
return v.name;
});
});
$('#name').autocomplete({
source: myData
});
If you want to filter the results on your own, you can do that in a number of ways.
This will filter the results based on the input. The final code would look like:
var myData = [];
$.getJSON("cluster.json", function(data){
myData = $.map(data, function(v, k){
return v.name;
});
});
$('#name').autocomplete({
source : function(request, response) {
response($.ui.autocomplete.filter(myData, request.term));
});
Both of these examples, I gather all the data first as I assume it's going to be the static data in the JSON file. You could get the data in the source function if you want.
Full Example
var jData = [{
"name": "A128",
"ra": "24.97",
"dec": "12.210"
},
{
"name": "AB 1317",
"ra": "22.55",
"dec": "37.124"
},
{
"name": "UBA 133",
"ra": "35.6",
"dec": "16.44"
},
{
"name": "UGC 69",
"ra": "35.6",
"dec": "16.44"
}
];
$(function() {
var myData = $.map(jData, function(v, i) {
return v.name;
});
$('#name').autocomplete({
source: myData
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
<label for="name">Name: </label>
<input id="name">
</div>
Hope that helps.
I have just added jqTree to my ASP MVC app. I need to display a TreeView in my view:
#{
ViewBag.Title = "Tree";
}
<h2>#ViewBag.Title</h2>
<div id="tree1" data-url="/Home/Nodes"></div>
#section scripts {
<script language="javascript" type="text/javascript">
$(function () {
$('#tree1').tree();
});
</script>
}
My data is in a JSON file (~/App_Data/Roles.json):
{
"id": 1,
"label": "Role1",
"children": [
{
"id": 2,
"label": "Role2",
"children": [
{
"id": 3,
"label": "Role3",
"children": [
]
},
{
"id": 4,
"label": "Role4",
"children": [
]
}
]
}
]
}
How do I load the json file in the controller action method to display corresponding TreeView in the view?
public ActionResult Nodes()
{
var roles = // load json file
return Json(roles, JsonRequestBehavior.AllowGet);
}
You can pass the json from JSON file(~/App_Data/Roles.json) and create the tree in the following way:
Add the below code in your view:
<div id="tree1"></div>
#section scripts {
<script language="javascript" type="text/javascript">
$.ajax({
type: 'POST', // we are sending data so this is POST
traditional: true,
url: '/Home/Nodes', // controller/action name
success: function (d) {
$('#tree1').tree({
data: [jQuery.parseJSON(d)]
});
}
});
</script>
}
Create a Nodes() function in your HomeController as:
public ActionResult Nodes()
{
string roles = string.Empty;
using (StreamReader r = new StreamReader(Server.MapPath("~/App_Data/Roles.json")))
{
roles = r.ReadToEnd();
}
return Json(roles, JsonRequestBehavior.AllowGet);
}
And you will be able to view your tree. Please let me know if you face any issues.
<html>
<head>
<meta charset="utf-8">
<title>React component</title>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div id="myContent"></div>
<script type="text/jsx">
var ChatMessagesLists = React.createClass({
getInitialState: function() {
return {data: {chat_messages:[]}};
},
render: function(){
return
(
<div className="chatLstsWrapper">
<h1>Chat Messages</h1>
<ChatMessagesData data={this.state.data} />
</div>
)
},
componentDidMount: function(){
$.ajax({
url: 'jsontextfile.json',
dataType: 'json',
success: function(data){
this.setState({data: {chat_messages:[]}});
}
});
}
});
var ChatMessagesData = React.createClass({
render:function(){
console.log(this.props.data.chat_messages);
return(
<ul className="chatLsts">
{
this.props.data.chat_messages.map(function(chatmessages){
return <li>{chatmessages.from_account_id}</li>
})
}
</ul>
)
}
})
React.render(<ChatMessagesLists />,document.getElementById("myContent"));
</script>
</body>
</html>
JSON File
{
"message": "List of chat messages",
"data": {
"since_index": 1,
"before_index": 2,
"chat_messages": [
{
"text": "Load more",
"type": "text",
"key": "8ff134e7-e302-445b-903e-0038097c8a29"
},
{
"text": "my test data",
"type": "text",
"key": "3c7c3065-3701-4350-a64a-8a52f9fe1578"
},
{
"text": "My message",
"type": "text",
"key": "40f7c342-a019-44c3-ad2b-8b2ae018972b"
}
],
"max_results": 20
},
}
While loading the data getting below error. Can anyone please suggest where am i wrong
Error: Invariant Violation: ChatMessagesLists.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
Hy,
Have you tried:
var ChatMessagesData = React.createClass({
render:function(){
var items = this.props.data.chat_messages.map(function(chatmessages){
return <li>{chatmessages.from_account_id}</li>;
})
return(
<ul className="chatLsts">
{
items
}
</ul>
);
});
PS: In Ajax callback, you not update the state:
success: function(data){
this.setState({data: {chat_messages: data}});
}
This is the JSON file ..
Using angular js controller and view how can I parse this json and display the drop1 and drop2 values of respective technology in drop down menu.getting the JSON data using http get.
Thanks in advance
{
"technology": [
{
"id": "AKC",
"detail": {
"drop1": [
{
"id": "AKC-lst-1231"
},
{
"id": "AKC-lst-1232"
},
{
"id": "AKC-lst-1233"
}
],
"drop2": [
{
"id": "T_AKC_live"
},
{
"id": "T_AKC_Capt"
},
{
"id": "T_AKC_live1"
}
]
}
},
{
"id": "MET",
"detail": {
"drop1": [
{
"id": "MET-2st"
},
{
"id": "MET-34"
}
],
"drop2": [
{
"id": "sd-232"
},
{
"id": "sd-121"
}
]
}
}
]
}
Please consider this example:
<!DOCTYPE html>
<html ng-app="postExample">
<head>
<script data-require="angular.js#1.2.22" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
<script src="usersController.js"></script>
<script src="userRepoService.js"></script>
</head>
<body ng-controller="UsersController">
<h1>Post Angular Example</h1>
<select id="UserSelector" style="width: 100%;">
<option ng-repeat="user in users" value="{{user.id}}">{{user.login}} </option>
</select>
</body>
</html>
userRepoService.js
(function(){
var userRepoService = function($http){
var getUsers = function(username){
return $http.get("https://api.github.com/users")
.then(function(response){
return response.data;
});
};
return {
get: getUsers
};
};
var module = angular.module("postExample");
module.factory("userRepoService", userRepoService);
}());
Controller:
(function(){
var app = angular.module("postExample",[]);
var UsersController = function($scope, userRepoService){
var onFetchError = function(message){
$scope.error = "Error Fetching Users. Message:" +message;
};
var onFetchCompleted = function(data){
$scope.users =data;
};
var getUsers = function(){
userRepoService.get().then(onFetchCompleted,onFetchError);
};
getUsers();
};
app.controller("UsersController", UsersController);
}());
You can directly call $http service, and get that response inside success data parameter.
CODE
$http.get("test.json").
success(function(data, status, headers, config) {
//get data and play with it
}).
error(function(data, status, headers, config) {
alert("Error fetching data");
// log error
});
Hope this could help you, Thanks.
I am building a comment object using Backbone.js.
The URL in the collection returns json that looks like this:
{'type': 'comment',
'data': [{"body": "commment number 1!",
"create_dt": 1343166264000,
"comment_id": 1, "depth": 0,
"user": {"sid": "1",
"uid": "1",
"name": "Amie C",
"level": "2"},
"sid": 1
},
{"body": "commment number 1-1!",
"create_dt": 1343166361000,
"comment_id": 4,
"depth": 1,
"user": {"sid": "1",
"uid": "1",
"name": "lila M",
"level": "2"},
"sid": 1}
}]
}
The url works in the browser and I was able to see all my json coming back. However, the problem I am having is there is no data coming back when loading the comment.js. I would see a Get request that's red yet said 200 OK and has no body in the response. Also my model's lenth is 0.
Thanks much in advanced.
Here is comment.js:
//default comment model
var Comment = Backbone.Model.extend({
defaults: {
body: "",
create_dt: null,
comment_id: null,
depth: null,
user: null,
sid: null
}
});
//instaitiate a new comment
var comment = new Comment;
//default event view
var CommentView = Backbone.View.extend({
tagName: "li",
className: "comment",
initialize: function(){
this.render();
},
render: function(){
$(this.el).html(this.model.toJSON());
return this;
}
});
//default comments collection
var Comments = Backbone.Collection.extend({
model: Comment,
initialize: function(){
},
url:"http://127.0.0.1/test/objects/json/comments.json",
parse: function(resp) {
return resp.data;
}
});
//default eventsview for events collection's view
var CommentsView = Backbone.View.extend({
tagName: "ul",
className:"comments",
intialize: function(){
this.render();
},
render: function(){
_.each(this.collection.models, function(comment){
//init the CommentView and passed in its model here
var commentView = new CommentView({model: comment});
$(this.el).prepend(commentView.render().el)
}, this);
return this;
}
});
//instantiate new events collection
var comments = new Comments;
var commentsView = new CommentsView({collection: comments});
//on the new events collection, we fetch the data from URL
comments.fetch({
error:function(response, xhr){
console.log(response);
console.log(xhr)
},
success:function(){
console.log("success");
$('.comments_container').html(commentsView.render().el);
}
});
And the html looks like this:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Share</title>
<link rel="stylesheet" href="share.css" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="js/comment.js"></script>
</head>
<body>
<div class="main_app">
<div class="comments_container"></div>
</div>
</body>
</html>
The problem I think is here in CommentView:
render: function(){
$(this.el).html(this.model.toJSON());
return this;
}
this.model.toJSON() does not return a string, so it won't show when you place it directly into the html like that.
Try this instead:
$(this.el).html(JSON.stringify(this.model));