Related
I am trying to learn javascript reduce and map an I came across some difficulties.
I have an array with the following format. The id of the parent is same as the location_id of the child. I need to group the array into a nested format.
arr = [
{
"id": 4583211,
"name": "Location 1",
"location_id": null,
},
{
"id": 7458894,
"name": "Location 12",
"location_id": 4583211
},
{
"id": 7463953,
"name": "Location 13",
"location_id": 4583211
},
{
"id": 80302210,
"name": "Location 121",
"location_id": 7458894
},
{
"id": 80302219,
"name": "Location 122",
"location_id": 7458894
},
{
"id": 7464314,
"name": "Location 131",
"location_id": 7463953
},
{
"id": 4583216,
"name": "Location 2",
"location_id": null,
},
{
"id": 3566353,
"name": "Location 21",
"location_id": 4583216
},
]
This array should be grouped as:
result = [
{
"id": 4583211,
"name": "Location 1",
"locations": [
{
"id": 7458894,
"name": "Location 12",
"locations": [
{
"id": 80302210,
"name": "Location 121"
},
{
"id": 80302219,
"name": "Location 122"
}
]
},
{
"id": 7463953,
"name": "Location 13",
"locations": [
{
"id": 7464314,
"name": "Location 131"
}
]
}
]
},
{
"id": 4583216,
"name": "Location 2",
"locations": [
{
"id": 3566353,
"name": "Location 21"
}
]
}
]
I tried to group it using the following method found on SO but it gives different result.
result = arr.reduce(function (r, a) {
r[a.location_id] = r[a.location_id] || [];
r[a.location_id].push(a);
return r;
}, Object.create(null));
You could do this using reduce and recursion you just need to check if parent is equal to current elements location_id.
const data = [{"id":4583211,"name":"Location 1","location_id":null},{"id":7458894,"name":"Location 12","location_id":4583211},{"id":7463953,"name":"Location 13","location_id":4583211},{"id":80302210,"name":"Location 121","location_id":7458894},{"id":80302219,"name":"Location 122","location_id":7458894},{"id":7464314,"name":"Location 131","location_id":7463953},{"id":4583216,"name":"Location 2","location_id":null},{"id":3566353,"name":"Location 21","location_id":4583216}]
function create(data, parent = null) {
return data.reduce((r, e) => {
if(parent == e.location_id) {
const o = { id: e.id, name: e.name }
const children = create(data, e.id);
if(children.length) o.locations = children;
r.push(o)
}
return r
}, [])
}
console.log(create(data))
I'm very new to Javascript and have been given a task. I have a JSON feed that has been given as follows:
var data = {
"feeds": {
"regions": [{
"name": "Lichtenberg",
"id": "01408.b",
"suburbs": [{
"name": "Fennpfuhl",
"views": 76400
},
{
"name": "Lichtenberg",
"views": 87895
},
{
"name": "Rummelsberg",
"views": 10239
}
]
},
{
"name": "Mitte",
"id": "03442.f",
"suburbs": [{
"name": "Tiergarten",
"views": 82695
},
{
"name": "Mitte",
"views": 67234
},
{
"name": "Hansaviertel",
"views": 10848
},
{
"name": "Moabit",
"views": 67500
}
]
},
{
"name": "Friedrichshain-Kreuzberg",
"id": "01991.o",
"suburbs": [{
"name": "Friedrichshain",
"views": "98494"
},
{
"name": "Kreuzberg",
"views": "27800"
}
]
},
{
"name": "Templehof-Schöneberg",
"id": "01778.k",
"suburbs": [{
"name": "Friedenau",
"views": 76595
},
{
"name": "Schöneberg",
"views": 20731
},
{
"name": "Templehof",
"views": 58000
},
{
"name": "Mariendorf",
"views": 32300
}
]
},
{
"name": "Pankow",
"id": "02761.q",
"suburbs": [{
"name": "Wießensee",
"views": 81294
},
{
"name": "Prenzlauer Berg",
"views": 76470
},
{
"name": "Pankow",
"views": 90210
}
]
}
],
"branding": [{
"municipality_id": "01408.b",
"brand_color": "#f9cd90"
}, {
"municipality_id": "03442.f",
"brand_color": "#F28123"
}, {
"municipality_id": "01991.o",
"brand_color": "#D34E24"
}, {
"municipality_id": "01778.k",
"brand_color": "#563F1B"
}, {
"municipality_id": "02761.q",
"brand_color": "#38726C"
}],
"customer": {
"name": "Viktoria Tiedemann",
"date_of_birth": "1981-09-19",
"address": {
"street": "Schönfließer Str 9",
"suburb": "Prenzlauer Berg",
"postcode": "10439"
}
}
}
};
The task is simple - to find the suburb and the region of Viktoria Tiedemann. So far I've tried using the below:
var customer_suburb;
var customer_name = 'Viktoria Tiedemann';
for (var i = 0; i < data.feeds.customer.length; i++){
if (data.feeds.customer.name[i] == customer_name){
customer_suburb = data.feeds.customer.address.suburb;
}
}
but it keeps on returning undefined values - where am I going wrong? I'm thinking to use the same process to get the region.
In your data, you have just one customer — not an array of customers — which is accessible with:
data.feeds.customer
( if customer was supposed to be an array, you could find Viktoria with : let customer = data.feeds.customer.find(c => c.name === 'Viktoria Tiedemann') )
You can get the suburb with:
let suburb = data.feeds.customer.address.suburb
Once you have that, you just need to find() the region whose suburbs array has this. For that find() combined with some() does this succinctly:
var data = {"feeds": {"regions": [{"name": "Lichtenberg","id": "01408.b","suburbs": [{ "name": "Fennpfuhl", "views": 76400 },{ "name": "Lichtenberg", "views": 87895 },{ "name": "Rummelsberg", "views": 10239 }]},{"name": "Mitte","id": "03442.f","suburbs": [{ "name": "Tiergarten", "views": 82695 },{ "name": "Mitte", "views": 67234 },{ "name": "Hansaviertel", "views": 10848 },{ "name": "Moabit", "views": 67500 }]},{"name": "Friedrichshain-Kreuzberg","id": "01991.o","suburbs": [{ "name": "Friedrichshain", "views": "98494" },{ "name": "Kreuzberg", "views": "27800" }]},{"name": "Templehof-Schöneberg","id": "01778.k", "suburbs": [{ "name": "Friedenau", "views": 76595 },{ "name": "Schöneberg", "views": 20731 },{ "name": "Templehof", "views": 58000 },{ "name": "Mariendorf", "views": 32300 }]},{"name": "Pankow","id": "02761.q","suburbs": [{ "name": "Wießensee", "views": 81294 },{ "name": "Prenzlauer Berg", "views": 76470 },{ "name": "Pankow", "views": 90210 }]}],"branding": [{"municipality_id": "01408.b","brand_color": "#f9cd90"},{"municipality_id": "03442.f","brand_color": "#F28123"},{"municipality_id": "01991.o","brand_color": "#D34E24"},{"municipality_id": "01778.k","brand_color": "#563F1B"},{"municipality_id": "02761.q","brand_color": "#38726C"}],"customer": {"name": "Viktoria Tiedemann","date_of_birth": "1981-09-19","address": {"street": "Schönfließer Str 9","suburb": "Prenzlauer Berg","postcode": "10439"}}}};
let suburb = data.feeds.customer.address.suburb
let region = data.feeds.regions.find(region => region.suburbs.some(s => s.name === suburb))
console.log("suburb:", suburb, "region:", region.name)
I have a json array data in this format:
{
"jobs": [
{
"id": "some_random_id_1",
"email": "some#email.com",
"email_type": "html",
"status": "pending",
"job_fields": {
"TITLE": "job title here"
},
"stats": {
"applied": 40,
"rejected": 20
}
},
{
"id": "some_random_id_2",
"email": "some#email.com",
"email_type": "html",
"status": "pending",
"job_fields": {
"TITLE": "job title here"
},
"stats": {
"applied": 30,
"rejected": 20
}
},
{
"id": "some_random_id_3",
"email": "some#email.com",
"email_type": "html",
"status": "pending",
"job_fields": {
"TITLE": "job title here"
},
"stats": {
"applied": 13,
"rejected": 1
}
},
{
"id": "some_random_id_4",
"email": "some#email.com",
"email_type": "html",
"status": "pending",
"job_fields": {
"TITLE": "job title here"
},
"stats": {
"applied": 13,
"rejected": 1
}
}
],
"job_id": "some_id",
"total_jobs": 60
}
where I just need to access the jobs object and grab id and status and all info for job_fields and stats (or all info for now).
// example is from here
// https://pivottable.js.org/examples/mps.html
$(function(){
$.getJSON("data.json", function(mps) {
$("#output").pivotUI(mps);
});
});
the example works with this json format:
[{
"Province": "Quebec",
"Party": "NDP",
"Age": 22,
"Name": "Liu, Laurin",
"Gender": "Female"
},
{
"Province": "Quebec",
"Party": "Bloc Quebecois",
"Age": 43,
"Name": "Mourani, Maria",
"Gender": "Female"
},
{
"Province": "Ontario",
"Party": "Conservative",
"Age": "",
"Name": "O'Toole, Erin",
"Gender": "Male"
}
]
I am not sure how to modify the javascript so it can read my json format. I can't modify the json format to match the above format, so in the above javascript example, province, party, etc are all passed to the function.
I want to do the same but with my json format, so output id, status, all members of job_fields (ex: TITLE, etc. ), all members of stats (ex: applied, rejected.
Assuming all jobs have job_fields.TITLE, stats.applied and stats.rejected maybe the following will do:
const json = {
"jobs": [
{
"id": "some_random_id_1",
"email": "some#email.com",
"email_type": "html",
"status": "pending",
"job_fields": {
"TITLE": "job title here"
},
"stats": {
"applied": 40,
"rejected": 20
}
},
{
"id": "some_random_id_2",
"email": "some#email.com",
"email_type": "html",
"status": "pending",
"job_fields": {
"TITLE": "job title here"
},
"stats": {
"applied": 30,
"rejected": 20
}
},
{
"id": "some_random_id_3",
"email": "some#email.com",
"email_type": "html",
"status": "pending",
"job_fields": {
"TITLE": "job title here"
},
"stats": {
"applied": 13,
"rejected": 1
}
},
{
"id": "some_random_id_4",
"email": "some#email.com",
"email_type": "html",
"status": "pending",
"job_fields": {
"TITLE": "job title here"
},
"stats": {
"applied": 13,
"rejected": 1
}
}
],
"job_id": "some_id",
"total_jobs": 60
};
console.log(
json.jobs.map(
(job)=>({
id:job.id,
status:job.status,
title:job.job_fields.TITLE,
applied:job.stats.applied,
rejected:job.stats.rejected
})
)
);
You can use map and use Object.assign and spread operator to make an object
var obj={"jobs":[{"id":"some_random_id_1","email":"some#email.com","email_type":"html","status":"pending","job_fields":{"TITLE":"job title here"},"stats":{"applied":40,"rejected":20}},{"id":"some_random_id_2","email":"some#email.com","email_type":"html","status":"pending","job_fields":{"TITLE":"job title here"},"stats":{"applied":30,"rejected":20}},{"id":"some_random_id_3","email":"some#email.com","email_type":"html","status":"pending","job_fields":{"TITLE":"job title here"},"stats":{"applied":13,"rejected":1}},{"id":"some_random_id_4","email":"some#email.com","email_type":"html","status":"pending","job_fields":{"TITLE":"job title here"},"stats":{"applied":13,"rejected":1}}],"job_id":"some_id","total_jobs":60}
var result = obj.jobs.map(({id,status,job_fields,stats}) => {
return Object.assign({}, {id}, {status}, {...job_fields}, {...stats});
});
console.log(result);
Or you can make it shorter like:
var result = obj.jobs.map( ({id,status,job_fields,stats}) => Object.assign({},{id},{status},{...job_fields},{...stats}) );
Can try with below snippet:
$(function(){
$.getJSON("data.json", function(orgData) {
var pivotData = [];
orgData.jobs.forEach(function (job, ind) {
var reqInfo = {};
reqInfo['id'] = job.id;
reqInfo['status'] = job.status;
reqInfo['jobTitle'] = job.job_fields && job.job_fields.TITLE;
reqInfo['applied'] = job.stats && job.stats.applied;
reqInfo['rejected'] = job.stats && job.stats.rejected;
pivotData.push(reqInfo)
})
$("#output").pivotUI(pivotData);
});
});
$("#output").pivotUI(mps.jobs);
Attached JSON:-
[
{
"category":"Faces",
"items": [
{
"name": "Oh well!",
"art" : "¯\\_(ツ)_/¯"
},
{
"name": "Disapproving Look",
"art": "ಠ_ಠ"
},
{
"name": "Disapproving Look 2",
"art": "ఠ_ఠ"
},
{
"name": "Glasses Smile",
"art": "ʘ‿ʘ"
},
{
"name": "Devious Smile",
"art": "ಠ‿ಠ"
},
{
"name": "Frowning",
"art": "ಠ╭╮ಠ"
},
{
"name": "Yelling",
"art": "ಠoಠ"
},
{
"name": "Mustache Man",
"art": "ಠ▃ಠ"
},
{
"name": "Blank Stare",
"art": "ರ_ರ"
},
{
"name": "HUH?",
"art": "ლ(｀ー´ლ)"
},
{
"name": "Rosy Cheeks",
"art": "(｡◕‿◕｡)"
},
{
"name": "hehehe",
"art": "( ¬‿¬)"
},
{
"name": "Pointing Out",
"art": "☜(⌒▽⌒)☞"
},
{
"name": "Haha!",
"art": "☜(ﾟヮﾟ☜)"
},
{
"name": "Run Away Crying",
"art": "ε=ε=ε=┌(;*´Д`)ﾉ"
},
{
"name": "Cheers",
"art": "（ ^_^）o自自o（^_^ ）"
},
{
"name": "Up All Night",
"art": "۞_۞"
},
{
"name": "High",
"art": "q(❂‿❂)p"
},
{
"name": "Dazed & Confused",
"art": "⊙﹏⊙"
},
{
"name": "No Clue!",
"art": "¯\\_(⊙︿⊙)_/¯"
},
{
"name": "I Dunno",
"art": "¯\\(°_o)/¯ "
},
{
"name": "Staring Eyes",
"art": "Ꙭ"
},
{
"name": "Cat Eyes",
"art": "ф_ф"
},
{
"name": "Winking",
"art": "◕‿↼"
},
{
"name": "Reaching Down",
"art": "(,,Ծ‸Ծ,,)"
},
{
"name": "Just Woke up",
"art": "╰(´・｀)ﾉ"
},
{
"name": "Sleep Walking",
"art": "(¬º-°)¬"
},
{
"name": "Disappointed Look",
"art": "(-_-)"
}
]
},
{
"category": "Emotions",
"items": [
{
"name": "Angry",
"art": "{{|└(>o< )┘|}}"
},
{
"name": "Why, God, WHY!?",
"art": "щ（ﾟДﾟщ）"
},
{
"name": "In Love",
"art": "♥（｡✿‿✿｡）❤"
},
{
"name": "In Love 2",
"art": "♥‿♥"
},
{
"name": "Puzzled",
"art": "く(＾_・)ゝ"
},
{
"name": "Mad",
"art": "（ ﾟДﾟ）"
},
{
"name": "Whatever",
"art": "（＾～＾）ノ"
},
{
"name": "Happy",
"art": "ヽ(´▽`)/"
},
{
"name": "Love at First Sight",
"art": "꒰♡ˊ͈ ु꒳ ूˋ͈꒱.⑅*♡"
},
{
"name": "Need A Hug",
"art": "ヽ(´ー｀)ノ"
},
{
"name": "So Beautiful!",
"art": "ಥ_ಥ"
},
{
"name": "Sad / Crying",
"art": "ಥ﹏ಥ"
},
{
"name": "Embarrased",
"art": "(﹡⌒▽⌒﹡)"
},
{
"name": "Extra Embarrased",
"art": "(/ω＼)"
},
{
"name": "No Thanks",
"art": "(ღ˘⌣˘ღ)"
},
{
"name": "I've Seen The Light",
"art": "•✞_✞•"
}
]
},]
Attempt in React-Native
class Textables extends Component{
constructor(){
super()
this.state={data:[]}
}
getData(){
return fetch('https://raw.githubusercontent.com/OTGApps/Textables/master/resources/content.json')
.then((response) => response.json())
.then((responseJson) => {
this.setState({data: responseJson});
})
.catch((error) => {
console.error(error);
});
}
componentDidMount(){
this.getData();
}
render()
{
let articles= this.state.data.map(function(articleData, index){
let articles1 = articleData.map(function(meow, j){
return(<content>
<Card><CardItem><Body>
<Text>{meow.items.name}</Text></Body></CardItem></Card>
<Card><CardItem><Body>
<Text>{meow.items.art}</Text></Body></CardItem></Card></content>
);
});
return(
<Card><CardItem><Body>
<Text>{articleData.category}</Text></Body></CardItem></Card>
);
});
return(
<Content>
{articles}
</Content>
)
}
}
Error:- undefined is not a function (evaluating 'articleData.map')
I'm trying to map the the items one by one by looping through each array.
Should I use index.map instead of articleData.map?
articleData points to the object in the data array. It looks like:
{
"category": "Emotions",
"items": [],
}
You want to use articleData.items.map.
Additionally, that getData function will probably not work how you want. Since it's not bound to the class scope, it won't be able to access this.setState. You'll probably want to either add this to your constructor:
this.getData = this.getData.bind(this)
or, you can change the function declaration:
getData = () => { /* your function */ }
I've come across a problem working in react native. I've parsed a large JSON object and need to iterate over an array nested inside it. All I need to do is print three values in each item object for day[0].
My code:
import React, { Component, PropTypes } from 'react';
import { View, Text, ListView, StyleSheet, TouchableHighlight} from 'react-native';
import Header from '../Components/Header';
import Api from '../Utility/Api';
export default class CalendarPage extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(
fetch('https://s3.amazonaws.com/cbu-rec-center-app/credentials/schedule.json')
)
};
}
componentWillMount(){
Api.getDates().then((res) => {
this.setState({
//I need to have these three output, but for all items in day[0]
EventName: res.days[0].items[0].summary,
EventDate: res.days[0].items[0].start.dateTime,
EventLocation: res.days[0].items[0].description
})
})
}
render() {
return (
<View style={{flex: 1}}>
<Header pageName="Calendar" navigator={this.props.navigator}/>
<View style = {{flex:9}}>
<Text> {this.state.EventName} </Text>
<Text> {this.state.EventDate} </Text>
<Text> {this.state.EventLocation} </Text>
</View>
</View>
);
}
}
The JSON
"days": [{
"date": "2017-03-06",
"hours": {
"open": "06:00",
"close": "12:00"
},
"items": [{
"kind": "calendar#event",
"etag": "\"2977101842476000\"",
"id": "fhq5hof67nvqhj85qm65t1n3e4",
"status": "confirmed",
"htmlLink": "https://www.google.com/calendar/event?eid=ZmhxNWhvZjY3bnZxaGo4NXFtNjV0MW4zZTQgY2J1cmVjcmVhdGlvbmNlbnRlckBt",
"created": "2017-03-03T14:22:01.000Z",
"updated": "2017-03-03T14:22:01.238Z",
"summary": "Women's Volleyball",
"description": "West Court",
"creator": {
"email": "cburecreationcenter#gmail.com",
"displayName": "Cbu RecreationCenter",
"self": true
},
"organizer": {
"email": "cburecreationcenter#gmail.com",
"displayName": "Cbu RecreationCenter",
"self": true
},
"start": {
"dateTime": "2017-03-06T15:30:00-08:00"
},
"end": {
"dateTime": "2017-03-06T16:30:00-08:00"
},
"iCalUID": "fhq5hof67nvqhj85qm65t1n3e4#google.com",
"sequence": 0,
"reminders": {
"useDefault": true
},
"type": "event"
},
{
"kind": "calendar#event",
"etag": "\"2976616094232000\"",
"id": "4tnn4gn0gstndi5idrqjsg7elo_20170306T200000Z",
"status": "confirmed",
"htmlLink": "https://www.google.com/calendar/event?eid=NHRubjRnbjBnc3RuZGk1aWRycWpzZzdlbG9fMjAxNzAzMDZUMjAwMDAwWiBrbTVyM2dycW1qbjZiMTQ2MWk2aXBjMjJhc0Bn",
"created": "2017-02-28T14:24:06.000Z",
"updated": "2017-02-28T18:54:07.116Z",
"summary": "Boxing Boot Camp",
"creator": {
"email": "cburecreationcenter#gmail.com",
"displayName": "Cbu RecreationCenter"
},
"organizer": {
"email": "km5r3grqmjn6b1461i6ipc22as#group.calendar.google.com",
"displayName": "Group X Calendar",
"self": true
},
"start": {
"dateTime": "2017-03-06T12:00:00-08:00"
},
"end": {
"dateTime": "2017-03-06T12:45:00-08:00"
},
"recurringEventId": "4tnn4gn0gstndi5idrqjsg7elo",
"originalStartTime": {
"dateTime": "2017-03-06T12:00:00-08:00"
},
"iCalUID": "4tnn4gn0gstndi5idrqjsg7elo#google.com",
"sequence": 0,
"reminders": {
"useDefault": true
},
"type": "class"
},
{
"kind": "calendar#event",
"etag": "\"2967485504076000\"",
"id": "m533eg9bu5o4meinuu7pvfoge4_20170306T210000Z",
"status": "confirmed",
"htmlLink": "https://www.google.com/calendar/event?eid=bTUzM2VnOWJ1NW80bWVpbnV1N3B2Zm9nZTRfMjAxNzAzMDZUMjEwMDAwWiBrbTVyM2dycW1qbjZiMTQ2MWk2aXBjMjJhc0Bn",
"created": "2017-01-06T22:45:52.000Z",
"updated": "2017-01-06T22:45:52.038Z",
"summary": "Women on Weights",
"description": "This is a weight lifting class designed to empower women to lift free weights in a group setting . The goals of WOW are to teach proper form, assist women in improving their posture, increasing their strength, and muscle pairing. ",
"location": "Group X Room",
"creator": {
"email": "cburecreationcenter#gmail.com",
"displayName": "Cbu RecreationCenter"
},
"organizer": {
"email": "km5r3grqmjn6b1461i6ipc22as#group.calendar.google.com",
"displayName": "Group X Calendar",
"self": true
},
"start": {
"dateTime": "2017-03-06T13:00:00-08:00",
"timeZone": "America/Los_Angeles"
},
"end": {
"dateTime": "2017-03-06T14:00:00-08:00",
"timeZone": "America/Los_Angeles"
},
"recurringEventId": "m533eg9bu5o4meinuu7pvfoge4",
"originalStartTime": {
"dateTime": "2017-03-06T13:00:00-08:00",
"timeZone": "America/Los_Angeles"
},
"iCalUID": "m533eg9bu5o4meinuu7pvfoge4#google.com",
"sequence": 0,
"reminders": {
"useDefault": true
},
"type": "class"
},
you can do it using .map():
<View>
{ res.days[0].items.map((item) => (
<View>
<Text>{item.summary}</Text>
<Text>{item.start.dateTime}</Text>
<Text>{item.description}</Text>
</View>
))}
</View>
make sure to check for data availability not to display empty <Text> blocks