I am using this js file
export const sliderData = [
{
"id": 1,
"name": "Horse",
"brand": "Ferrrari",
"img": "https://www.formula1.com/content/dam/fom-website/manual/Misc/2022manual/WinterFebruary/RedBullRB18/SI202202090260_hires_jpeg_24bit_rgb.jpg.transform/9col/image.jpg"
},
{
"id": 2,
"name": "Power",
"brand": "Red Bull",
"img": './redbull.jpg'
},
{
"id": 3,
"name": "Arrow",
"brand": "Mercades",
"img": "src/images/merc.jpg"
}
]
And in my react, after mapping through them, I wanted to render them as {team.img} but only the first only is loading.
My folder structure is as follow:
src
|_data
| |_teams.js
|
|_images
| |_redbull.jpg
The only way to do this is to place each image in the public folder and use only paths inside of this folder.
create-react-app doesn't serve images from outside this folder.
Related
I have a react page and one of my inputs is a file upload. When loading, I want to read in the file (it's JSON) and then show the file as a tree to allow my users to select nodes (rules) to run against another dataset. BUT, when I pick the JSON file and the 'onload' event handler actually fires off, the page just stops rendering, I get a blank screen. I'm not sure why, I can't see any errors, but I AM IGNORANT with react and kinda new with javascript as well. So, this is quite likely just a dumb thing I'm doing. Can someone point me at what I'm doing wrong here?
handleRules(event) {
const ruleRdr = new FileReader();
ruleRdr.onload = async (e) => {
const rBuf = (e.target.result);
const rData = JSON.parse(new TextDecoder().decode(rBuf));
// the data is there, but it's not mapping into the tree...!?!?!?
const tree = {
name: "QA/QC Rules",
id: 1,
toggled: true,
children: rData.map((wFlow, index) => ({
name: wFlow.WorkflowName,
id: index,
children: wFlow.Rules.map((rule, idx) => ({
name: rule.RuleName,
id: idx
}))
}))
};
this.setState({ ruleData: rData, hasRules: true, treeData: tree });
}
ruleRdr.readAsArrayBuffer(event.target.files[0]);
}
EDIT #1: I don't think it's the code above now, I think it might be my tree library (react-treebeard) or my ignorance on how I'm using it. The code produces what I think is useable data, but it isn't rendering it out.
{
"name": "QA/QC Rules",
"id": 1,
"toggled": true,
"children": [
{
"name": "COMP",
"id": 0,
"children": [
{
"name": "ParentMustHaveCat",
"id": 0
},
{
"name": "ParentMustHaveMfg",
"id": 1
},
{
"name": "ParentMustHaveFamily",
"id": 2
},
{
"name": "SymbolsMustHaveFamily",
"id": 3
}
]
},
{
"name": "PNLCOMP",
"id": 1,
"children": [
{
"name": "ParentMustHaveCat",
"id": 0
},
{
"name": "ParentMustHaveMfg",
"id": 1
},
{
"name": "ParentMustHaveFamily",
"id": 2
},
{
"name": "SymbolsMustHaveFamily",
"id": 3
}
]
},
{
"name": "PNLTERM",
"id": 2,
"children": [
{
"name": "ParentMustHaveCat",
"id": 0
},
{
"name": "ParentMustHaveMfg",
"id": 1
},
{
"name": "ParentMustHaveFamily",
"id": 2
},
{
"name": "SymbolsMustHaveFamily",
"id": 3
}
]
}
]
}
I figured it out. I switched to MUI since it has more components that I will want to use anyway. I got a similar issue with it as well and realized that I have duplicate IDs between the parent and the children, and was creating a kind of lock when trying to compare parent and child IDs in the MUI library. Totally on me - I'm dumb.
so guys i have the path of images coming from a JSON File likes this
[
{
"name": "Cebola Roxa",
"price": 4,
"quantity": 0,
"path": "../assets/productsImages/purpleonion.png"
},
{
"name": "Cenoura",
"price": 4,
"quantity": 0,
"path": "../assets/productsImages/carrot.png"
},
]
The path for the images are correct, the problem is that when i try to use this path inside of o source using require it says Sintax Error
import products from '../assets/products.json'
const listProducts = products.map((product,index) => {
return( <Image source={require(product.path)} style={styles.imgProduct} />)
}
How can i load images using the path from a JSON file ?
I'm new to Vue.js and following a tutorial. I'm trying out the v-for loop using the data in the json below. However nothing is being rendered in the div and therefore the page. I can't spot any syntax errors. Can anyone help?
<body>
<div id="app" v-for="item in products">
<img :src="item.img" :alt="item.img" style="width: 250px; height:250px">
<h1>{{item.name}}</h1>
<p>{{item.description}}</p>
<p>${{item.price}}.00</p>
</div>
<script>
var data = {
products: [
{
"name": "Bamboo Thermal Ski Coat",
"description": "You'll be the most environmentally friendly skier in this!",
"img": "https://hplussport.com/wp-content/uploads/2016/12/ski-coat_LYNDA_29940.jpg",
"price": 99
},
{
"name": "#jenlooper",
"img": "https://user-images.githubusercontent.com/41929050/61567048-13938600-aa33-11e9-9cfd-712191013192.jpeg",
"description": "This project is a good learning project to get comfortable with soldering and programming an Arduino.",
"price": 5
},
{
"name": "jenlooper",
"img": "https://user-images.githubusercontent.com/41929050/61567049-13938600-aa33-11e9-9c69-a4184bf8e524.jpeg",
"description": "Use craft items you have around the house, plus two LEDs and a LilyPad battery holder, to create a useful book light for reading in the dark.",
"price": 63
},
{
"name": "#jenlooper",
"img": "https://user-images.githubusercontent.com/41929050/61567053-13938600-aa33-11e9-9780-104fe4019659.png",
"description": "Create a web-connected light-strip API controllable from your website, using the Particle.io.",
"price": 867
},
{
"name": "sailorhg",
"img": "https://user-images.githubusercontent.com/41929050/61567054-13938600-aa33-11e9-9163-eec98e239b7a.png",
"description": "Visualization of sailor scouts sorted by bubblesort algorithm by their planet\u0027s distance from the sun",
"price": 71
},
{
"name": "sailorhg",
"img": "https://user-images.githubusercontent.com/41929050/61567055-142c1c80-aa33-11e9-96ff-9fbac6413625.png",
"description": "Light-up corsage I made with my summer intern.",
"price": 456
},
],
};
new Vue({
el: '#app',
data: data
})
</script>
</body>
try it this way, with a container div#app and data as a function, you can verify here: https://jsfiddle.net/boilerplate/vue
<body>
<div id="app">
<div v-for="(item, i) in products" :key="i">
<img :src="item.img" :alt="item.img" style="width: 250px; height:250px">
<h1>{{item.name}}</h1>
<p>{{item.description}}</p>
<p>${{item.price}}.00</p>
</div>
</div>
<script>
var data = {
products: [
{
"name": "Bamboo Thermal Ski Coat",
"description": "You'll be the most environmentally friendly skier in this!",
"img": "https://hplussport.com/wp-content/uploads/2016/12/ski-coat_LYNDA_29940.jpg",
"price": 99
},
{
"name": "#jenlooper",
"img": "https://user-images.githubusercontent.com/41929050/61567048-13938600-aa33-11e9-9cfd-712191013192.jpeg",
"description": "This project is a good learning project to get comfortable with soldering and programming an Arduino.",
"price": 5
},
{
"name": "jenlooper",
"img": "https://user-images.githubusercontent.com/41929050/61567049-13938600-aa33-11e9-9c69-a4184bf8e524.jpeg",
"description": "Use craft items you have around the house, plus two LEDs and a LilyPad battery holder, to create a useful book light for reading in the dark.",
"price": 63
},
{
"name": "#jenlooper",
"img": "https://user-images.githubusercontent.com/41929050/61567053-13938600-aa33-11e9-9780-104fe4019659.png",
"description": "Create a web-connected light-strip API controllable from your website, using the Particle.io.",
"price": 867
},
{
"name": "sailorhg",
"img": "https://user-images.githubusercontent.com/41929050/61567054-13938600-aa33-11e9-9163-eec98e239b7a.png",
"description": "Visualization of sailor scouts sorted by bubblesort algorithm by their planet\u0027s distance from the sun",
"price": 71
},
{
"name": "sailorhg",
"img": "https://user-images.githubusercontent.com/41929050/61567055-142c1c80-aa33-11e9-96ff-9fbac6413625.png",
"description": "Light-up corsage I made with my summer intern.",
"price": 456
},
],
};
new Vue({
el: '#app',
data() { return data }
})
</script>
</body>
just change you code
var data = { ... }
To
data() { return { product: [...] } }
and it will work.
in recent vue.js it is recommended to put 'v-key' when you use v-for, but it still works (no v-key is also ok when you run the program)
Creating a separate #app div and returning the data within a function works.
<div id="app">
<div v-for="(item, i) in products" :key="i">
<img :src="item.img" :alt="item.img" style="width: 250px; height:250px">
<h1>{{item.name}}</h1>
<p>{{item.description}}</p>
<p>${{item.price}}.00</p>
</div>
</div>
<script>
var data = {
products: [
{
"name": "Bamboo Thermal Ski Coat",
"description": "You'll be the most environmentally friendly skier in this!",
"img": "https://hplussport.com/wp-content/uploads/2016/12/ski-coat_LYNDA_29940.jpg",
"price": 99
},
{
"name": "#jenlooper",
"img": "https://user-images.githubusercontent.com/41929050/61567048-13938600-aa33-11e9-9cfd-712191013192.jpeg",
"description": "This project is a good learning project to get comfortable with soldering and programming an Arduino.",
"price": 5
},
{
"name": "jenlooper",
"img": "https://user-images.githubusercontent.com/41929050/61567049-13938600-aa33-11e9-9c69-a4184bf8e524.jpeg",
"description": "Use craft items you have around the house, plus two LEDs and a LilyPad battery holder, to create a useful book light for reading in the dark.",
"price": 63
},
{
"name": "#jenlooper",
"img": "https://user-images.githubusercontent.com/41929050/61567053-13938600-aa33-11e9-9780-104fe4019659.png",
"description": "Create a web-connected light-strip API controllable from your website, using the Particle.io.",
"price": 867
},
{
"name": "sailorhg",
"img": "https://user-images.githubusercontent.com/41929050/61567054-13938600-aa33-11e9-9163-eec98e239b7a.png",
"description": "Visualization of sailor scouts sorted by bubblesort algorithm by their planet\u0027s distance from the sun",
"price": 71
},
{
"name": "sailorhg",
"img": "https://user-images.githubusercontent.com/41929050/61567055-142c1c80-aa33-11e9-96ff-9fbac6413625.png",
"description": "Light-up corsage I made with my summer intern.",
"price": 456
},
],
};
new Vue({
el: '#app',
data() { return data }
})
</script>
i use server-json to have a fake API, i have the path "playbook/active" in data.json
"playbook/active": [{
"description": "This playbook will install haproxy",
"name": "Testing playbook 3",
"tag": [
"loadbalancer",
"charge"
],
"path": "/etc/ansible/haproxy.yml",
"type": "action",
"id": "4bb107be-9efe-11e9-b3e5-bc5ff4901aa5"
},
{
"path": "google.com",
"description": "This is the playbook before execution",
"tag": [
"webserver",
"tomcat"
],
"id": "faa746b4-9cb7-11e9-9b94-bc5ff4901aa5",
"name": "mysql"
}
]
but i have this error
Error: Oops, found / character in database property 'playbook/active'.
I change to "playbook/active" but same error
Providing a complete answer (showcase example)
Configuring db.json and routes.json can do the trick for you:
db.json
{
"playbookActive": [
{
"id": 1,
"name": "Active Playbook 1",
"description": "Description 1"
},
{
"id": 2,
"name": "Active Playbook 2",
"description": "Description 2"
}
]
}
routes.json
{
"/playbook/active": "/playbookActive",
"/playbook/active/:id": "/playbookActive/:id"
}
Note: the mapping in routes.json is goes like this: [expanded/endpoint]: aliasEndpoint where aliasEndpoint should match the one from db.json.
package.json
{
...
"scripts": {
"api": "json-server [path-to-db.json] --routes [path-to-routes.json] --no-cors=false"
},
...
}
Verify the routing on start (logs from npm run api):
Resources
http://localhost:3000/playbookActive
Other routes
/playbook/active -> /playbookActive
/playbook/active/:id -> /playbookActive/:id
Home
http://localhost:3000
Examples
GET → http://localhost:3000/playbook/active
Response contains a list with all the active playbooks:
[
{
"id": 1,
"name": "Active Playbook 1",
"description": "Description 1"
},
{
"id": 2,
"name": "Active Playbook 2",
"description": "Description 2"
}
]
GET → http://localhost:3000/playbook/active/2
Response contains the active playbook that matches id=2:
{
"id": 2,
"name": "Active Playbook 2",
"description": "Description 2"
}
Check the error message:
Oops, found / character in database property 'dossier/la'.
/ aren't supported, if you want to tweak default routes, see
https://github.com/typicode/json-server/#add-custom-routes
It seems that slashes are not supported.
The solution is to create a routes.json file containing the mapping for your url.
For example the contents of this file could be:
{
my-awesome-endpoint": "playbook/active"
}
For example:
db.json
"list": [
{
"name": "abcde",
"tel": "123454323",
"id": 5
}
]
routes.json
{
"/v1/list?type=hot": "/list"
}
start command:
npx json-server --watch db.json --routes routes.json
I'm an Italian PouchDb and AngularJS Developer.
My json document is:
{
"_id": "6",
"_rev": "3-f7283d7683cd6fb15753f494aad1d49f",
"name": "Ivrea",
"owners": [
{
"owner_id": 1,
"name": "asdas",
"address": "asdas",
"gender": "Uomo",
"type": "Assente",
"notes": [
]
},
{
"owner_id": 2,
"name": "balbaba",
"address": "blabla",
"gender": "Uomo",
"type": "Assente",
"notes": [
]
}
]
}
and after an ng-click action, I will delete owner_id: 2 object inside _id: 6 document. In API reference I found only document delete action, but not how to delete object inside document.
Thanks for your reply!!
Alessandro
You just need to put() the main document back in the database after you remove an object from it. :)
db.get('foo').then(function (doc) {
delete doc.whatever;
return db.put(doc);
}).catch(function (err) { /* ... */ });