<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
const itemsData = [
{
key: 1,
src: "https://www.davidjones.com/productimages/cart/1/2384359_21556984_6888675.jpg",
title: "Nautica ANTIGUA PADDED JACKET DARK NAVY",
price: 245,
colour: "459 DARK NAVY",
Size: "M",
Qty: "1",
},
{
key: 2,
src: "https://www.davidjones.com/productimages/cart/1/2384359_21556984_6888675.jpg",
title: "Nautica ANTIGUA PADDED JACKET DARK NAVY",
price: 245,
colour: "459 DARK NAVY",
Size: "M",
Qty: "1",
},
{
key: 3,
src: "https://www.davidjones.com/productimages/cart/1/2384359_21556984_6888675.jpg",
title: "Nautica ANTIGUA PADDED JACKET DARK NAVY",
price: 245,
colour: "459 DARK NAVY",
Size: "M",
Qty: "1",
},
];
`
I am trying to filter this array. Just to get a new array as only with price array. Please help me to make a new array that has only price data
const price = [245,245,245]
You want to use map function on an array and transform the objects inside of it to a new value. Something like this
const itemsData = [
{
key: 1,
src: "https://www.davidjones.com/productimages/cart/1/2384359_21556984_6888675.jpg",
title: "Nautica ANTIGUA PADDED JACKET DARK NAVY",
price: 245,
colour: "459 DARK NAVY",
Size: "M",
Qty: "1",
},
{
key: 2,
src: "https://www.davidjones.com/productimages/cart/1/2384359_21556984_6888675.jpg",
title: "Nautica ANTIGUA PADDED JACKET DARK NAVY",
price: 245,
colour: "459 DARK NAVY",
Size: "M",
Qty: "1",
},
{
key: 3,
src: "https://www.davidjones.com/productimages/cart/1/2384359_21556984_6888675.jpg",
title: "Nautica ANTIGUA PADDED JACKET DARK NAVY",
price: 245,
colour: "459 DARK NAVY",
Size: "M",
Qty: "1",
},
];
const prices = itemsData.map(item => item.price)
console.log(prices)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
It's a simple mapping: itemsData.map(item => item.price)
Also, it's not really React related, more like a Javascript question.
itemsData.filter(item=>item.key === 1);
You can filter any item in this array like this!
Related
Here is my index.js file where i take images.
export const dataList = [
{
category: "Arts",
cuisine: "Bamboo",
id: 1,
title: "Bambooza - Bamboo Arts and Crafts",
price: 499,
image: "./images/bambooza_arts.png",
rating: 5
},
{
category: "Material",
cuisine: "Bags",
id: 2,
title: "Recycled Eco-friendly Bag",
price: 199,
image: "./images/bag_2.png",
rating: 4
},
{
category: "Material",
cuisine: "Bamboo",
id: 3,
title: "Bambooza Box with Lock | Eco-friendly",
price: 199,
image: "images/box_bamboo.png",
rating: 3
},
{
category: "Material",
cuisine: "Cups",
id: 4,
title: " Biodegradable Compostable White up | Craft Double Wall | Bamboo Fiber TravelMug ",
price: 99,
image: "images/white_cup.png",
rating: 5
},
{
category: "Material",
cuisine: "Recycled",
id: 5,
title: "Ecofriendly Chipboard Binders (3 nit) Recycled Binders |",
price: 129,
image: "images/binder_image.png",
rating: 3
},
];
You can import the file and then loop it over the array and then access the image in the object and do something like this inside the loop -
<img src={arr.image} /> assuming you named the variable inside arr while looping.
map through each element in dataList and take the image path and put it in the etc like so
{dataList.map(elem => {
<img src={elem .image} alt={elem.title}/>
})}
I have a piece of code that creates a sectioned multi select component based on https://github.com/renrizzolo/react-native-sectioned-multi-select.
This is my code:
import React, { useState } from 'react';
import {I18nManager,View,Text,SafeAreaView,Image,SectionList,TouchableOpacity,TextInput,ScrollView,useWindowDimensions,Linking} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import SectionedMultiSelect from 'react-native-sectioned-multi-select';
export function SellWithUsFirstScreen3(props){
const items = [
{
name: "Fruits",
id: 0,
children: [{
name: "Apple",
id: 10,
},{
name: "Strawberry",
id: 17,
},{
name: "Pineapple",
id: 13,
},{
name: "Banana",
id: 14,
},{
name: "Watermelon",
id: 15,
},{
name: "Kiwi fruit",
id: 16,
}]
},
{
name: "Gems",
id: 1,
children: [{
name: "Quartz",
id: 20,
},{
name: "Zircon",
id: 21,
},{
name: "Sapphire",
id: 22,
},{
name: "Topaz",
id: 23,
}]
},
{
name: "Plants",
id: 2,
children: [{
name: "Mother In Law\'s Tongue",
id: 30,
},{
name: "Yucca",
id: 31,
},{
name: "Monsteria",
id: 32,
},{
name: "Palm",
id: 33,
}]
},
]
const [selectedItems,setselectedItems] = useState([]);
onSelectedItemsChange = (theitem) => {
setselectedItems(prevState => [...prevState, theitem]);
}
console.log(selectedItems);
/////////
return (
<SafeAreaView style={{flex:1,backgroundColor:'white'}}>
<View style={styles.container}>
<View>
<SectionedMultiSelect
items={items}
uniqueKey='id'
subKey='children'
selectToggleIconComponent={<Icon name='folder' />}
dropDownToggleIconUpComponent={<Icon name='chevron-up' />}
dropDownToggleIconDownComponent={<Icon name='chevron-down' />}
selectedIconComponent={<Icon name='heart' />}
selectText='Choose some things...'
showDropDowns={true}
readOnlyHeadings={true}
onSelectedItemsChange={this.onSelectedItemsChange}
selectedItems={selectedItems}
IconRenderer={Icon}
/>
</View>
</View>
</SafeAreaView>
);
}
I get this error:
TypeError: undefined is not an object (evaluating 'item[subKey]').
I tried several code changes but I still can't get the same result as the original author video images.
Any help please?
I think your problem is that you need double quotation marks around the strings so uniqueKey="children" for each of them. Also there is no this. so you must make onSelectedItemsChange={this.onSelectedItemsChange} into onSelectedItemsChange={onSelectedItemsChange}
I learns Reactjs and trying to get images height and widths in this file to calculate the Ratio.
I havet this file albumData.js that looks like this:
// WEEK 1
import photo11 from '../images/weeks/1/DlGoaxEX0AAjY-7.jpg'
import photo12 from '../images/weeks/1/4olpqsvfte5rubn47j936z7c5vn9lff.jpeg'
import photo13 from '../images/weeks/1/9tlnx2sudu05jqxwij2evyvaifkrvbc.jpeg'
// WEEK 2
import photo21 from '../images/weeks/2/2.jpg'
import photo23 from '../images/weeks/2/original.jpg'
import photo22 from '../images/weeks/2/1_vtY9uCjeKSa1jIXm504jlg.jpeg.jpg'
export const albums = [
{
route: "1",
id: "album1",
data: [
{ id: "week 1-1", key: "1", backgroundImage: photo11, ratio: 768/1024, background: "rgb(56, 230, 236)", title: "week 1", description: "some desc" },
{ id: "week 1-2", key: "2", backgroundImage: photo12, ratio: 0.66771819137, background: "rgb(56, 230, 236)", title: "week 1", description: "some desc" },
{ id: "week 1-3", key: "3", backgroundImage: photo13, ratio: 0.74973711882, background: "rgb(56, 230, 236)", title: "week 1", description: "some desc" },
]
},
{
route: "2",
id: "album2",
data: [
{ id: "week 2-1", key: "1", backgroundImage: photo21, ratio: 0.75, background: "rgb(56, 230, 236)", title: "week 2", description: "some desc" },
{ id: "week 2-2", key: "2", backgroundImage: photo22, ratio: 0.75, background: "rgb(56, 230, 236)", title: "week 2", description: "some desc" },
{ id: "week 2-3", key: "3", backgroundImage: photo23, ratio: 0.56145833333, background: "rgb(56, 230, 236)", title: "week 2", description: "some desc" },
]
}
]
I call it from different locations like this
import { albums } from '../albumData'
My problem that I can't solve is that I need to input the images ratio inside the export const albums
Before I call and use the import { albums } from '../albumData' the array data in albums must have the ratio filled in from the actual images imports. I do that manually now but there will be 10.000 images.
The image Ratio is the width divided by the height!
I tried using React hooks but think that require a function something. Is there some static way in React to run this before using the albums?
Please advice
We are using Anychart Version 7.13 to create a PERT Chart in our application. Our data has a series of tasks with predecessors that require the chart to scroll horizontally. Our chart is getting truncated and we have tried to adjust chart.width in both % and PX but not able to enable horizontal scroll.
Any help will be most appreciated.
Thanks
VikasScreenshot showing truncation on right
Also, you should adjust spacing between milestones and milestones size in %. This will allow the pert chart fitting into the stage width. I prepared a sample for you below, the chart is scrollable. Please, pay attention to CSS style, stage settings and size/spacing settings. Probably, you should try other values in % exactly for your pert chart.
anychart.onDocumentReady(function () {
// create data
var data = [
{id: "1", duration: 1, name: "Task A"},
{id: "2", duration: 3, name: "Task B", dependsOn:["1"]},
{id: "3", duration: 4, name: "Task C", dependsOn:["2"]},
{id: "4", duration: 1, name: "Task D", dependsOn:["3"]},
{id: "5", duration: 2, name: "Task E", dependsOn: ["4"]},
{id: "6", duration: 2, name: "Task F", dependsOn: ["5"]},
{id: "7", duration: 1, name: "Task G", dependsOn: ["6"]},
{id: "8", duration: 2, name: "Task H", dependsOn: ["7"]},
{id: "9", duration: 3, name: "Task I", dependsOn: ["8"]},
{id: "10", duration: 2, name: "Task J", dependsOn: ["9"]}
];
// create a chart
var chart = anychart.pert();
//create stage
var stage = anychart.graphics.create("container");
//set stage width
stage.width(2000);
// adjsut milestones size in %
chart.milestones().size('5%');
//adjust spacing in %
chart.horizontalSpacing("9%");
// set chart data
chart.data(data, "as-table");
//render chart
chart.container(stage).draw();
});
html, body, #container {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: scroll;
}
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-pert.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-ui.min.js"></script>
<link href="https://cdn.anychart.com/releases/8.1.0/css/anychart-ui.min.css" rel="stylesheet"/>
<div id="container"></div>
I'm using this getorgchart library to generate organization chart in my application. I just want to highlight a particular node, i.e. the user who has logged in the application his node should be highlighted.
// Code goes here
var orgChart = new getOrgChart(document.getElementById("people"), {
theme: "monica",
primaryFields: ["name", "title"],
photoFields: ["image"],
gridView: true,
linkType: "B",
dataSource: [
{ id: 1, parentId: null, name: "Amber McKenzie", title: "CEO", phone: "678-772-470", mail: "lemmons#jourrapide.com", adress: "Atlanta, GA 30303", image: "images/f-11.jpg" },
{ id: 2, parentId: 1, name: "Ava Field", title: "Paper goods machine setter", phone: "937-912-4971", mail: "anderson#jourrapide.com", image: "images/f-22.jpg" },
{ id: 3, parentId: 1, name: "Evie Johnson", title: "Employer relations representative", phone: "314-722-6164", mail: "thornton#armyspy.com", image: "images/f-24.jpg" },
{ id: 6, parentId: 2, name: "Rebecca Randall", title: "Optometrist", phone: "801-920-9842", mail: "JasonWGoodman#armyspy.com", image: "images/f-8.jpg" },
{ id: 7, parentId: 2, name: "Spencer May", title: "System operator", phone: "Conservation scientist", mail: "hodges#teleworm.us", image: "images/f-7.jpg" },
{ id: 8, parentId: 3, name: "Max Ford", title: "Budget manager", phone: "989-474-8325", mail: "hunter#teleworm.us", image: "images/f-6.jpg" },
{ id: 9, parentId: 3, name: "Riley Bray", title: "Structural metal fabricator", phone: "479-359-2159", image: "images/f-3.jpg" }
],
customize: {
"1": { color: "green" },
"2": { theme: "deborah" },
"3": { theme: "deborah", color: "darkred" }
}
});
Here
customize: {
"1": { color: "green" },
"2": { theme: "deborah" },
"3": { theme: "deborah", color: "darkred" }
}
u can customize for particular Id based on your login data id you can customize and make it highlight