<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}});
}
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.
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
I need to add slider that is auto moving with a speed of 4 seconds , scrolling by one element.I used bower component, angular-slick from vasyabigi.github.io/angular-slick/ , it is working fine with static data, but I am fetching data from server in controller with $http. It is not working with dynamic data.
landing.html
<div ng-repeat="cat in barsubData">
<span> {{cat.subCategoryId.name | uppercase}} </span>
</div>
controller.js
// get subcat bar function
var getsubcatdetails = function () {
services.webscreensucatService($scope, function (data) {
$scope.barsubData = data.data.stock;
console.log($scope.barsubData);
});
}
getsubcatdetails();
service.js
// webscreen subcat service
this.webscreensucatService = function ($scope, callback) {
// var data = {};
// data.email = $scope.login.username;
// data.password = $scope.login.password;
$http({
method: 'GET',
url: constants.BASEURL + '/api/BranchManager/lcdScreenDataSubCategory?accessToken=xxxxxxxxx',
contentType: 'application/json',
}).success(function (data) {
if (data.statusCode == constants.SUCCESS) {
// console.log(data);
callback(data);
} else {
$scope.loading = 0;
factories.invalidDataPop(data.message);
}
}).error(function (error) {
factories.invalidDataPop("Invalid accessToken");
});
};
Kind of DATA I am getting from server
{
"statusCode": 200,
"message": "Success",
"data": {
"_id": "57a87e09cae4c29148233157",
"stock": [
{
"startingPrice": 120,
"currentPrice": 153,
"lowPrice": 120,
"highPrice": 153,
"basePrice": 120,
"currentStock": 99,
"totalStock": 100,
"_id": "57a87f49cae4c29148233165",
"Date": "2016-08-08T12:47:05.975Z",
"subCategoryId": {
"_id": "57a87e81cae4c2914823315d",
"name": "Sauvignon Blanc"
},
"categoryId": {
"_id": "57a87e48cae4c29148233159",
"imageURL": {
"thumbnail": "s3-us-west-2.amazonaws.com/barsupply/profileThumb_12JURVq.png",
"original": "s3-us-west-2.amazonaws.com/barsupply/profilePic_12JURVq.png"
},
"name": "Wine"
}
}]
Please help me working with slider. I am free to use any angularjs slider which is working.
Thank you for the help.
I'm trying the example in reactjs tutorial https://facebook.github.io/react/docs/tutorial.html to read the json from server(file). But, my "componentDidMount" is not getting called.
Below is the code:
var CommentBox = React.createClass({
loadCommentsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this),
cache: false
});
},
getInitialState: function() {
return {data: {}};
},
componentDidMount: function() {
this.loadCommentsFromServer();
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
</div>
);
}
});
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.content.map(function(comment) {
return (
<Comment pageName={comment.xyz} key={comment.id}>
{comment.abc}
</Comment>
);
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentpageName">
{this.props.pageName}
</h2>
<p> {this.props.children} </p>
</div>
);
}
});
ReactDOM.render(<CommentBox url="/api/comments" />, document.getElementById('content'));
Please check the way I have initialized the data(data: {})
The "componentDidMount" gets called when the json is of the following type(Just the way in the tutorial):
[ {"id": "1", "xyz": "xyz1", "abc": "abc1"},
{"id": "2", "xyz": "xyz2", "abc": "abc2"} ]
But the json format I want is:
{
content: [
{"id": "1", "xyz": "xyz1", "abc": "abc1"},
{"id": "2", "xyz": "xyz2", "abc": "abc2"},
{"id": "3", "xyz": "xyz3", "abc": "abc3"}],
"totalPages":3,
"totalElements":10,
"last":true
}
Let me know in what conditions the componentDidMount doesn't get called. Please help.
In the "Networks" console of chrome developer tools, I don't see the call made to my json file.
When I added logs in my program, I see that getInitialState() gets called first, then render, then the error "Uncaught TypeError: Cannot read property 'data' of null" is shown.
I think your componentDidMount() is not called because your render code inside <CommentList> does not work on first render, because data is empty, and this.props.data.content probably does not exist, therefore your render fails.
What you probably should do is change this:
var commentNodes = this.props.data.content.map(function(comment) {
To this:
var commentNodes = [];
if (this.props.data.content) {
commentNodes = this.props.data.content.map(function(comment) {
...
}
componentDidMount() is always called after the first render (and not in subsequent renders)
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.