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.
Related
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.
I am trying to gain access within the last array of the json file and return the value from the "data" array of the json file and put it into the choiceSelection array. However, on my local host, it returns an undefined value and the images would not load. Can anyone help me out? I apologise if I haven't clearly explained my problem/logic and so please ask me for more details, if you're not sure. Thanks!
javascript code
$.getJSON('data.json', function(json) {
if(json[2].data){
for (i = 0; i < json[3].data.length; i++) {
choiceSelection[i] = new Array;
choiceSelection[i][0] = json[2].data[i].question;
choiceSelection[i][1] = json[2].data[i].correctChoice;
choiceSelection[i][2] = json[2].data[i].choice1;
choiceSelection[i][3] = json[2].data[i].choice2;
}
// choiceSelection.length = choiceSelection.length;
displayQuestion();
console.log(json[2]);
}
})
json file
[
{
"name": "match numbers 1",
"template": "matching",
"data": [
[
"six",
"Images/Number6.jpg"
],
[
"eight",
"Images/Number8.jpg"
],
[
"nine",
"Images/Number9.jpg"
]
]
},
{
"name": "order numbers 1",
"template": "ordering",
"data": [
[
"Images/Number6.jpg"
],
[
"Images/Number8.jpg"
],
[
"Images/Number9.jpg"
]
]
},
{
"name": "animal",
"template": "picture game",
"data": [
{
"question": "Where is the cat?",
"correctChoice": "Images/5cats.jpg",
"choice1": "Images/squirrel.png",
"choice2": "Images/beagle.png"
},
{
"question": "Where is the cat?",
"correctChoice": "Images/5cats.jpg",
"choice1": "Images/squirrel.png",
"choice2": "Images/beagle.png"
}
]
}
]
Edit 1: change json[i] to json[2].data. Still undefined
Edit 2: changed json[2].data. to json[2].data[i] and used json[3].data.length in the for statement. It works perfectly now. Thank you everyone for the help!:)
You could take the hassle out of your code and use some ES6 destructuring to get at your data more easily.
const json = '[{"name":"match numbers 1","template":"matching","data":[["six","Images/Number6.jpg"],["eight","Images/Number8.jpg"],["nine","Images/Number9.jpg"]]},{"name":"order numbers 1","template":"ordering","data":[["Images/Number6.jpg"],["Images/Number8.jpg"],["Images/Number9.jpg"]]},{"name":"animal","template":"picture game","data":[{"question":"Where is the cat?","correctChoice":"Images/5cats.jpg","choice1":"Images/squirrel.png","choice2":"Images/beagle.png"},{"question":"Where is the cat?","correctChoice":"Images/5cats.jpg","choice1":"Images/squirrel.png","choice2":"Images/beagle.png"}]}]'
function getJSON(endpoint, callback) {
setTimeout(() => callback(JSON.parse(json)), 1000);
}
// grab the third object from the response data
getJSON('data.json', function([ ,,obj ]) {
// grab the data array from that object but relabel it
// `choiceSelection
const { data: choiceSelection } = obj;
// then use the object property keys to get access
// to the data instead of indexes. Much easier.
console.log(choiceSelection[0].question);
console.log(choiceSelection[1].question);
});
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.
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.
I am getting a JSON in response from server:
{
"width": "765",
"height": "990",
"srcPath": "http://192.168.5.13:8888/ebook/user_content/_ADMIN_/_MERGED_/1273.pdf",
"coverPage": "",
"documents": [
{
"index": "1",
"text": "Archiving Microsoft® Office SharePoint® Server 2007 Data with the Hitachi Content Archive Platform and Hitachi Data Discovery for Microsoft SharePoint",
"type": "doc",
"id": "HDS_054227~201106290029",
"children": [
{
"text": "Page 1",
"leaf": "true",
"pageLocation": "http://192.168.5.13:8888/ebook/user_content/_ADMIN_/_IMAGES_/HDS_054227~201106290029/image_1.png"
},
{
"text": "Page 2",
"leaf": "true",
"pageLocation": "http://192.168.5.13:8888/ebook/user_content/_ADMIN_/_IMAGES_/HDS_054227~201106290029/image_2.png"
}
]
},
{
"index": "11",
"text": "Brocade FCoE Enabling Server I/O Consolidation",
"type": "doc",
"id": "HDS_053732~201105261741",
"children": [
{
"text": "Page 1",
"leaf": "true",
"pageLocation": "http://192.168.5.13:8888/ebook/user_content/_ADMIN_/_IMAGES_/HDS_053732~201105261741/image_1.png"
},
{
"text": "Page 2",
"leaf": "true",
"pageLocation": "http://192.168.5.13:8888/ebook/user_content/_ADMIN_/_IMAGES_/HDS_053732~201105261741/image_2.png"
}
]
}
]
}
And I want to get pagelocation of the children.
Can anyone tell me how to do this?
Hi
i also want to get indexes from this and then want to get pagelocations of that particular children. Can you tell me how would i do that?
And also when i when i am getting indexes array it is returning me ,, only and not the index nos.
I am using following code for that :
indexes=response.documents.map(function(e){ return e.children.index; })
Thanks & Regards
If you're interested in simply retrieving all the page locations, you can do it using filter:
var locations = [];
json.documents.forEach(function(e,i) {
e.children.forEach(function(e2,i2) {
locations.push(e2.pageLocation);
)}
});
// returns flat array like [item1,item2,item3,item4]
You can get an array of arrays using map:
var locations = [];
var locations = json.documents.map(function(e) {
return e.children.map(function(e2) {
return e2.pageLocation;
});
});
// returns 2-dimensional array like [[item1,item2],[item1,item2]]
Your json response is an appropriate javascript object So you can access all elements of the object like you do as in back end.
here, you have an array of object of the type documents and each document object has array of objects of the type children. so
syntax would be
myjson.documents[0].children[0].pagelocation
( = http://192.168.5.13:8888/ebook/user_content/_ADMIN_/_IMAGES_/HDS_054227~201106290029/image_1.png)
will give you the very first page location..
and so on