I’m trying to build a simple CRUD (create, read, update, delete) database app. For definition, a CRUD application does not know the name of the dB fields that it will go to read from the dB. It will get them from the dB every time it is ran. In PHP it’s simple:
<?php
error_reporting(E_ERROR | E_WARNING | E_PARSE);
$db = new mysqli('localhost', 'root', 'root', 'my_db');
$query = 'SHOW COLUMNS FROM my_table';
$result = $db->query($query);
while($row = $result->fetch_assoc()){
$fields[] = $row['Field'];
}
echo json_encode($fields);
?>
The above code will list all the dB fields in the table my_table
like this:
["first_name", "second_name", "address"]
The CRUD application will then use a FOR
loop to create the form with the listed INPUT
fields. In HTML will be:
<form id="generate-form" type="POST">
<?php foreach($fields as $field): ?>
<label>
<?php echo "$field: "; ?>
<input type="text" name="<?php echo $field; ?>" />
</label><br/>
<?php endforeach; ?>
<input type="submit" name="submit" />
</form>
The matter is translate this logic into Fuse. I can use the PHP code above to extract the dB fields and pass their name JSON encoded to Fuse:
fetch("http://localhost/api/dbfields.php").then(function(response) {
if (response.ok) {
return response.json();
} else {
throw Error(response.status);
}
})
.then(function(json) {
datas.replaceAll(json);
// Debug purposes
datas.forEach(function(i) {
console.log(i);
});
}).catch(function(error) {
if (error == "TypeError: Network request failed") {
isConnection.value = true;
}
});
But the problem that I’m getting mad on is that I need to transform each dB field name into a Observable. The following Fuse code outputs only the first field name (“first_name”) while TextInput
it is not ‘recognized’ as a Input field, nor it is PlaceholderText
:
<JavaScript>
var Observable = require('FuseJS/Observable');
var datas = Observable();
module.exports = {
data: datas,
};
</JavaScript>
<Each Items="{data}">
<TextInput Value="{data}" PlaceholderText="{data}" />
</Each>
How can I dynamically render a number of <TextInput>
based on the given output
["first_name", "second_name", "address"]
and set their names as Observables
so that I can use them properly in Fuse?