Valid JSON to display data in angularJs - javascript

I want to display data(json) in my site using AngularJs . here's what i did :
Create a database in phpmyAdmin .
Create a table with 2 row , subject and body . Should i create an id ?
After doing with PHP and angular , I got JSON like this :
[{
"0":"Soheil","subject":"Soheil",
"1":"Sadeghbayan","body":"Sadeghbayan"}
,{"0":"","subject":"","1":"","body":""}
,{"0":"","subject":"","1":"","body":""}
,{"0":"dasdasd","subject":"dasdasd","1":"qe","body":"qe"}
,{"0":"Hello","subject":"Hello","1":"This is chandler !","body":"This is chandler !"}
,{"0":"","subject":"","1":"","body":""},
{"0":"Something new in website","subject":"Something new in website","1":"oh Awsome !","body":"oh Awsome !"
}]
I think this is invalid JSON because when I replace it with custom JSON that I wrote it work .
Json valid
{
"fruits": [
{
"id": "1",
"name": "Apple"
},
{
"id": "2",
"name": "Orange"
}
]
}
AngularJS
var fruitsApp = angular.module('fruitsApp', []);
fruitsApp.factory('fruitsFactory', function($http) {
return {
getFruitsAsync: function(callback) {
$http.get('fruits.json').success(callback);
}
};
});
fruitsApp.controller('fruitsController', function($scope, fruitsFactory) {
fruitsFactory.getFruitsAsync(function(results) {
console.log('fruitsController async returned value');
$scope.fruits = results.fruits;
});
});
Html
<ul>
<li ng-repeat="fruit in fruits">
{{fruit.subject}} is {{fruit.body}}
</li>
</ul>
php
include('config.php');
$data = json_decode(file_get_contents("php://input"));
$subject = mysql_real_escape_string($data->subject);
$body = mysql_real_escape_string($data->body);
mysql_select_db("angular") or die(mysql_error());
mysql_query("INSERT INTO newstory (subject,body) VALUES ('$subject', '$body')");
Print "Your information has been successfully added to the database.";
$query = "SELECT * FROM newstory";
$result = mysql_query($query);
$arr = array();
while ($row = mysql_fetch_array($result)) {
$subject = $row['subject'];
$body = $row['body'];
$arr[] = $row;
}
echo json_encode($arr);
Any idea ? Thx in advance

Your JSON is a valid. Refer to this for information on JSON and this to check/validate a JSON object.
The data coming back from your $http.get / database data does not have a fruits attribute and you expect that when you set your $scope.fruits (the below snippet is taken from your code):
$scope.fruits = results.fruits;
The structure of the data that is being returned by the $http.get call is different than the format of your sample data.
Here's your $http.get / database data (I shortened it for brevity):
[
{
"0": "Soheil",
"1": "Sadeghbayan",
"subject": "Soheil",
"body": "Sadeghbayan"
},
{
"0": "Hello",
"1": "This is chandler !",
"subject": "Hello",
"body": "This is chandler !"
},
{
"0": "",
"1": "",
"subject": "",
"body": ""
}
]
And here's your sample / mock data:
{
"fruits": [
{
"id": "1",
"name": "Apple"
},
{
"id": "2",
"name": "Orange"
}
]
}
The former is an array of objects with keys: 0, 1, subject and body.
The latter is an object with keys: fruits.
They are both valid JSON objects with different object structures. But, you expect a fruits attribute where there isn't one. Also, your HTML/UI might be expecting the data format to look like what is in your mock data. So check that too.

Related

Convert & Transform a PHP array variable to JS

I am trying to implement a new way for users to enter data into an HTML form with Slim Select JS library.
I have basic functionality working, with a pre-populated list of <option> items.
Originally, the PHP code would grab the list of names from a database (now in MongoDB), which is then looped through when the <select> element is created.
With Slim Select, you can pass in a "data array" as a parameter of the JS script. The manually-created format is this:
var jsPlayers2 = [
{"placeholder": true, "text": "Type Name"},
{"text": "Ernie Els", "value": "abc1"},
{"text": "Rory McIlroy", "value": "abc2"},
{"text": "Tiger Woods", "value": "abc3"}
];
new SlimSelect({
select: '#slim-select',
data: jsPlayers2, // THIS WOULD BE REPOINTED TO THE JSPLAYERS ARRAY VAR...
onChange: (info) => {
console.log(info)
}
})
My MongoDB document structure returned currently is:
var jsPlayers = [{
"_id": {
"$oid": "62b49410e63c2f8469089189"
},
"name": "Tiger Woods",
"clubs": [{
"clubId": {
"$oid": "6076030465508936f00e086c"
},
"name": "Jupiter FL",
"nickName": "Jupiter",
"logoPath": "jupiter.png"
}]
}, {
"_id": {
"$oid": "609d0993906429612483cfb1"
},
"name": "Ernie Els",
"clubs": [{
"clubId": {
"$oid": "6076030465508936f00e086c"
},
"name": "Wentworth UK",
"nickName": "Wentworth",
"logoPath": "wentworth.png"
}]
}, ...
}];
I have used a simplistic echo of this variable into a new JS variable:
var jsPlayers = <?php echo json_encode($players); ?>;
How can I only pick out the fields I need from within each document? Or is there a way to filter the array elements when I add them to the slim-select.data property?
You need to loop through your players to create the array you want to output as JSON. Something like this:
$options = [];
foreach ($players as $player) {
$options[] = (object)["text" => $player->name,
"value" => $player->getId()];
}
echo json_encode($options);
This only outputs the JSON.
Note that I used $player->getId(), which might not work for you. If your players are really objects you might have defined a method yourself to get their id.

Unable to read properly from JSON file with php

I am trying to read from a JSON file into a PHP array and then echo the array's content, so I can fetch the info with ajax in javascript and convert the array in javascript to an array of JSON objects.
Here is how my JSON file looks like.
[["{\"id\":1474541876849,\"name\":\"D\",\"price\":\"12\"}"],["{\"id\":1474541880521,\"name\":\"DD\",\"price\":\"12\"}"],["{\"id\":1474541897705,\"name\":\"DDDGG\",\"price\":\"124\"}"],["{\"id\":1474541901141,\"name\":\"FAF\",\"price\":\"124\"}"],["{\"id\":1474543958238,\"name\":\"tset\",\"price\":\"6\"}"]]
Here is my php :
<?php
$string = file_get_contents("products.json");
$json_a = json_decode($string, true);
$arr = array();
foreach ($json_a as $key) {
array_push($arr,$key[0]);
}
foreach ($arr as $key) {
echo $key;
}
?>
And this is what I am getting on the client side :
{"id":1474541876849,"name":"D","price":"12"}{"id":1474541880521,"name":"DD","price":"12"}{"id":1474541897705,"name":"DDDGG","price":"124"}{"id":1474541901141,"name":"FAF","price":"124"}{"id":1474543958238,"name":"tset","price":"6"}
It looks like I am not that far, but what can I do so I can actually make this a JSON object?
Please help!
The problem is that you have JSON inside JSON.
you have to decode twice:
<?php
$string = file_get_contents("products.json");
$json_a = json_decode($string, true); //here you turn a JSON-string into an array containing JSON-strings
$arr = array();
foreach ($json_a as $key) {
array_push($arr,json_decode($key[0],true)); //and here you turn each of those JSON-strings into objects themselves
}
echo json_encode($arr);
gives me this:
[{
"id": 1474541876849,
"name": "D",
"price": "12"
}, {
"id": 1474541880521,
"name": "DD",
"price": "12"
}, {
"id": 1474541897705,
"name": "DDDGG",
"price": "124"
}, {
"id": 1474541901141,
"name": "FAF",
"price": "124"
}, {
"id": 1474543958238,
"name": "tset",
"price": "6"
}]
which is valid JSON itself and probably what you want.

What is the best way to get nested JSON from database?

For example i have two tables:
PRODUCTS (id, category_id, name);
CATEGORIES (id, name);
I want pass to frontend JSON like:
"categoryProjects": [
{
"id" : 1,
"name" : "some category name",
"projects": [
{
"id": 1,
"name": "Product1"
},
{
"id": 2,
"name": "Product2"
},
[
},
{
"id" : 2,
"name" : "second category name",
"projects": [
{
"id": 3,
"name": "Product3"
}
[
}
]
My question is: What is the best way to do this? I want it to be as efficient as possible. I have simple server in php, database (mysql), and I want create API. I wonder what is the best way to do endpoint for my frontend.
You'd need to do a SQL join, like so
select products.*, categories.name as category from products left join categories on products.category_id = categories.id
Then map the returned table to a PHP array and convert it to JSON.
<?php
$sth = $pdo->query("select products.*, categories.name as category from products left join categories on products.category_id = categories.id");
$rows = $sth->fetchAll(PDO::FETCH_ASSOC);
$categories = [];
foreach ($rows as $row)
{
if (!isset($categories[$row['category_id']]))
{
$categories[$row['category_id']] = [
"name" => $row['category'],
"id" => $row['category_id'],
"products" => []
];
}
$categories[$row['category_id']]['products'][] = [
"id" => $row['id'],
'name' => $row['name']
];
}
print json_encode($categories, JSON_PRETTY_PRINT);
This code will run assuming your tables were built as you described them.

Cannot parse mutiple json rows in javascript

I am using twitterapi to get the friends list in php and I have encoded the result as a json array, but I cannot parse the json array in javascript.I have validated the json array produced by the php and its a valid json array. Below is my code.
php
$friends = array();
$friend_list = array();
$myfriend = array();
$connection = new TwitterOAuth($CONSUMER_KEY, $CONSUMER_SECRET,oauth_token,oauth_token_secret);
$friends =$connection->get("https://api.twitter.com/1.1/friends/list.json?cursor=-1&screen_name=twitterapi&skip_status=true&include_user_entities=false&count=200);
foreach($friends as $friend) {
if(!empty($friend))
{
foreach($friend as $value)
{
$friend_list['id']=$value->id;
$friend_list['screen_name']= $value->screen_name;
$friend_list['name']= $value->name;
$friend_list['profile_image_url']= $value->profile_image_url;
$friend_list['location']= $value->location;
array_push($myfriend, $friend_list);
}
}
}
$newarray = json_encode($myfriend);
'
javascript
<script>
var obj1 = JSON.parse('<?php echo $newarray ;?>');
console.log(obj1); // am not getting anything in console
</script>
EDITED
output from echo $newarray;
[
{
"id": 50393960,
"screen_name": "BillGates",
"name": "Bill Gates",
"profile_image_url": "http://pbs.twimg.com/profile_images/1884069342/BGtwitter_normal.JPG",
"location": "Seattle, WA"
},
{
"id": 141527741,
"screen_name": "prakashraaj",
"name": "Prakash Raj",
"profile_image_url": "http://pbs.twimg.com/profile_images/2951815972/ab32fb806b480d0dc761805ae4ef9775_normal.jpeg",
"location": "india"
},
{
"id": 88856792,
"screen_name": "aamir_khan",
"name": "Aamir Khan",
"profile_image_url": "http://pbs.twimg.com/profile_images/2254031972/_MG_2190_normal.jpeg",
"location": "Mumbai"
},
{
"id": 107318424,
"screen_name": "bipsluvurself",
"name": "Bipasha Basu",
"profile_image_url": "http://pbs.twimg.com/profile_images/419745345178832896/8JvqwEM9_normal.jpeg",
"location": "Mumbai, India"
}
]
Please help, am stuck with this
You can directly output the json:
Change to:
var obj1 = <?php echo $newarray ;?>;
For example:
<?php
$newarray = json_encode(array('name' => 'srain'));
?>
var obj1 = <?php echo $newarray ;?>;
It will output:
var obj1 = {"name":"srain"};
update
If your js script is not in the same file with the php code, the $newarray will be null.
In the absence of information about how you validated json array, this is what I can recommend. Change your javascript to:
<script>
var jsonString = '<?php echo $newarray ;?>';
console.log(jsonString);
var obj1 = JSON.parse(jsonString);
console.log(obj1); // am not getting anything in console
</script>
You can see the content of jsonString in the javascript console. That should give you hints about what is going wrong.
Note:You are fetching JSON content from twitter, converting it to PHP data structure and converting it back to JSON. Sending the JSON string from twitter to javascript is far more efficient - if there is no need to filter/alter the twitter returned data.

How do I convert CakePHP json to use with JS JIT SpaceTree?

I'm using CakePHP to query my database table 'Task' that includes project_id, id, parent_id, title, description. My controller code handles the query like so:
$query= $this->Task->find('threaded', array(
'conditions' => array(
'Task.project_id' => 83,
),
'fields' => array(
'Task.id',
'Task.title',
'Task.parent_id',
)
));
//Pass the result to the view
$this->set('query', $query);
Then in my view, if I decode the json with the following:
<?php echo json_encode($simple); ?>
I get the following json structure:
[
{
"Task": {
"id": "475",
"title": "Have a Picnic",
"parent_id": "0"
},
"children": [
{
"Task": {
"id": "476",
"title": "Drive/Hike to Moutains",
"parent_id": "475"
},
"children": []
}
]
}
]
(I used this tool in to beautify it, the output is of course a continuous string)
But JS JIT SpaceTree requires the following structure:
{
"id": "aUniqueIdentifier",
"name": "usually a nodes name",
"data": [
{key:"some key", value: "some value"},
{key:"some other key", value: "some other value"}
],
children: [/* other nodes or empty */]
}
And I have no idea how to either adjust the output, or change my query to return the correct structure. Also, I've tried both 'threaded' and 'list' find() types and get the same structure. Any help is greatly appreiciated!
Simply iterate over the results and map the data into your desired structure, that's a pretty basic task. You could do that in the controller, in the view (maybe using a helper), or even in the model using a custom find method.
Here's a simple example. I don't know what data is good for, also there are no further fields in your result, so I've left that part.
function mapThreaded($source, &$target)
{
foreach($source as $item)
{
$node = array
(
'id' => $item['Task']['id'],
'name' => $item['Task']['title'],
'children' => array()
);
if(count($item['children']))
{
mapThreaded($item['children'], $node['children']);
}
$target[] = $node;
}
}
$tasks = $this->Task->find('threaded', array(...));
$tree = array();
mapThreaded($tasks, $tree);
pr($tree);
pr(json_encode($tree, JSON_PRETTY_PRINT)); // pretty print requires PHP >= 5.4.0
It should result in a JSON structure like this:
[
{
"id": "475",
"name": "Have a Picnic",
"children": [
{
"id": "476",
"name": "Drive/Hike to Moutains",
"children": [
]
}
]
}
]
In case Spacetree supports only a single root elment, simply use current($tree) or in JavaScript pass the first array entry to Spacetree.

Categories

Resources