Develop Reference

How to add a text input, where a user can filter the list of students by their name (both first and last name)

I'm trying to create a text search where I can filter through the names from an api.
It should look something like this:
https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/part3.mp4
I'm able to fetch everything from the api successfully I'm just having a hard time creating a filter to search through the first names and last names.
My API looks like this:
https://www.hatchways.io/api/assessment/students
fetch(url).then((resp) => resp.json()).then(function(data) {
let students = data.students;
return students.map(function(student) {
let values = student.grades;
let firstNames = student.firstName;
var sum = 0;
for (var i = 0; i < values.length; i++) {
sum += parseInt(values[i], 10); //don't forget to add the base
}
var avg = sum / values.length;
let li = createNode('li'),
img = createNode('img'),
span = createNode('span');
img.src = student.pic;
span.innerHTML = `<b><li>${firstNames} ${student.lastName}</li></b>
<li>${student.company} </li>
<li>${student.email} </li>
<li>Average: ${avg}</li>`;
})
})
.catch(function(error) {
console.log(JSON.stringify(error));
})

First we fix your code so it runs and produces valid HTML (spans do not have LIs)
Use the first LI content to filter using a dynamic regular expression.
const data = JSON.parse(`{ "students": [ { "city": "Fushë-Muhurr", "company": "Yadel", "email": "iorton0#imdb.com", "firstName": "Ingaberg", "grades": [ "78", "100", "92", "86", "89", "88", "91", "87" ], "id": "1", "lastName": "Orton", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/voluptasdictablanditiis.jpg", "skill": "Oracle" }, { "city": "Sanghan", "company": "Avamm", "email": "cboards1#weibo.com", "firstName": "Clarke", "grades": [ "75", "89", "95", "93", "99", "82", "89", "76" ], "id": "2", "lastName": "Boards", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/voluptasautreprehenderit.jpg", "skill": "Sports" }, { "city": "Kugesi", "company": "Skalith", "email": "lromanet2#wired.com", "firstName": "Laurens", "grades": [ "88", "90", "79", "82", "81", "99", "94", "73" ], "id": "3", "lastName": "Romanet", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/aspernaturnonsapiente.jpg", "skill": "Employee Handbooks" }, { "city": "Krajan", "company": "Mybuzz", "email": "bskitt3#aboutads.info", "firstName": "Berti", "grades": [ "88", "93", "92", "81", "95", "98", "77", "94" ], "id": "4", "lastName": "Skitt", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/autautdeserunt.jpg", "skill": "Nutrition Education" }, { "city": "Huiqi", "company": "Avavee", "email": "msummerley4#craigslist.org", "firstName": "Mureil", "grades": [ "71", "81", "72", "92", "79", "82", "91", "90" ], "id": "5", "lastName": "Summerley", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/consequaturdelectusquis.jpg", "skill": "ISO 14971" }, { "city": "Jianghong", "company": "Twinte", "email": "rcoryndon5#cargocollective.com", "firstName": "Robbyn", "grades": [ "97", "92", "72", "99", "92", "92", "79", "96" ], "id": "6", "lastName": "Coryndon", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/autautdeserunt.jpg", "skill": "Cinema 4D" }, { "city": "Sanxi", "company": "Buzzster", "email": "seykel6#examiner.com", "firstName": "Sheena", "grades": [ "74", "95", "75", "95", "85", "97", "88", "85" ], "id": "7", "lastName": "Eykel", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/utquamut.jpg", "skill": "Ulead VideoStudio" }, { "city": "Huancheng", "company": "Edgeblab", "email": "mewen7#ycombinator.com", "firstName": "Minnnie", "grades": [ "80", "100", "97", "78", "99", "99", "76", "85" ], "id": "8", "lastName": "Ewen", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/nesciuntrerumlibero.jpg", "skill": "Vulcan" }, { "city": "Luoxiong", "company": "Fadeo", "email": "riban8#hubpages.com", "firstName": "Rory", "grades": [ "70", "100", "75", "96", "83", "90", "94", "92" ], "id": "9", "lastName": "Iban", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/autemporroplaceat.jpg", "skill": "EE4" }, { "city": "Toulon", "company": "Yakidoo", "email": "lroxby9#cam.ac.uk", "firstName": "Lenna", "grades": [ "70", "99", "81", "83", "78", "95", "81", "76" ], "id": "10", "lastName": "Roxby", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/doloribusquitempora.jpg", "skill": "LPS" }, { "city": "Lazo", "company": "Photolist", "email": "rfitzalana#parallels.com", "firstName": "Rosalynd", "grades": [ "98", "93", "78", "87", "99", "89", "97", "81" ], "id": "11", "lastName": "FitzAlan", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/utquamut.jpg", "skill": "Geography" }, { "city": "Bichura", "company": "Babblestorm", "email": "srapellib#adobe.com", "firstName": "Stephanie", "grades": [ "83", "97", "70", "96", "75", "98", "90", "71" ], "id": "12", "lastName": "Rapelli", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/enimpariaturoptio.jpg", "skill": "Identity Management" }, { "city": "Chvalšiny", "company": "Mynte", "email": "mmacdirmidc#plala.or.jp", "firstName": "Maire", "grades": [ "87", "73", "85", "98", "73", "95", "75", "97" ], "id": "13", "lastName": "MacDirmid", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/aspernaturnonsapiente.jpg", "skill": "Outdoor Advertising" }, { "city": "Itaparica", "company": "Photospace", "email": "nshepherdd#desdev.cn", "firstName": "Nicoline", "grades": [ "90", "73", "88", "95", "71", "100", "80", "86" ], "id": "14", "lastName": "Shepherd", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/nonipsaet.jpg", "skill": "Amazon VPC" }, { "city": "Praia da Vitória", "company": "Vitz", "email": "ythornse#github.com", "firstName": "Yoshi", "grades": [ "78", "78", "96", "92", "80", "82", "91", "99" ], "id": "15", "lastName": "Thorns", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/voluptasdictablanditiis.jpg", "skill": "DMR" }, { "city": "Sambir", "company": "Twitterwire", "email": "mtothef#shutterfly.com", "firstName": "Marna", "grades": [ "88", "74", "76", "89", "75", "97", "75", "86" ], "id": "16", "lastName": "Tothe", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/utquamut.jpg", "skill": "PFI" }, { "city": "Sarulla", "company": "Blogpad", "email": "okearyg#g.co", "firstName": "Orelia", "grades": [ "78", "92", "86", "80", "82", "95", "76", "84" ], "id": "17", "lastName": "Keary", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/enimpariaturoptio.jpg", "skill": "General Surgery" }, { "city": "Ochakovo-Matveyevskoye", "company": "Mydeo", "email": "mswaith#cafepress.com", "firstName": "Moses", "grades": [ "84", "82", "92", "74", "87", "98", "86", "73" ], "id": "18", "lastName": "Swait", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/velitnonquibusdam.jpg", "skill": "Sales Tax" }, { "city": "Youxi Chengguanzhen", "company": "Avaveo", "email": "fnusseyi#skyrock.com", "firstName": "Fonsie", "grades": [ "100", "75", "84", "91", "100", "97", "98", "87" ], "id": "19", "lastName": "Nussey", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/remtemporavelit.jpg", "skill": "Urbanism" }, { "city": "Limoges", "company": "Tazzy", "email": "srydingsj#phoca.cz", "firstName": "Skelly", "grades": [ "89", "81", "77", "93", "96", "96", "70", "79" ], "id": "20", "lastName": "Rydings", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/etporroalias.jpg", "skill": "IFTA" }, { "city": "Łobżenica", "company": "Quatz", "email": "obrennekek#yellowbook.com", "firstName": "Olly", "grades": [ "81", "74", "77", "82", "74", "88", "86", "87" ], "id": "21", "lastName": "Brenneke", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/velitnonquibusdam.jpg", "skill": "ATM Networks" }, { "city": "Divo", "company": "Gigazoom", "email": "nbadwickl#nifty.com", "firstName": "Norby", "grades": [ "73", "99", "91", "92", "85", "96", "95", "73" ], "id": "22", "lastName": "Badwick", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/delenitiestdolorum.jpg", "skill": "Media Relations" }, { "city": "Sortavala", "company": "Eamia", "email": "mmichiem#nifty.com", "firstName": "Melody", "grades": [ "100", "83", "76", "71", "93", "95", "73", "88" ], "id": "23", "lastName": "Michie", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/sitlaborecorrupti.jpg", "skill": "PC Games" }, { "city": "Taupo", "company": "Midel", "email": "jwillougheyn#psu.edu", "firstName": "Janice", "grades": [ "71", "80", "83", "99", "91", "95", "81", "75" ], "id": "24", "lastName": "Willoughey", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/dolordoloremassumenda.jpg", "skill": "Kondor+" }, { "city": "Krajandadapmulyo", "company": "Wikibox", "email": "ggallymoreo#mashable.com", "firstName": "Geraldine", "grades": [ "97", "71", "89", "85", "85", "87", "92", "75" ], "id": "25", "lastName": "Gallymore", "pic": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/sitlaborecorrupti.jpg", "skill": "WTL" } ] }`);
let students = data.students;
students.forEach(function(student) {
let values = student.grades;
let firstNames = student.firstName;
let sum = values.reduce((a,b) => +a + +b, 0); //convert to ints before summing
let avg = (sum / values.length).toFixed(2);
let card = document.createElement("div"), // wrapper
li = document.createElement('li'),
img = document.createElement('img'),
ul = document.createElement('ul');
ul.classList.add("filter");
img.src = student.pic;
ul.innerHTML = `<li><b>${firstNames} ${student.lastName}</b></li>
<li>${student.company} </li>
<li>${student.email} </li>
<li>Average: ${avg}</li>`;
card.appendChild(img);
card.appendChild(ul);
document.getElementById("container").appendChild(card)
})
document.getElementById("filter").addEventListener("input", (e) => {
let val = e.target.value;
re = new RegExp(val.split(" ").join("|"), "gi"); // creates /joe|blow/gi
document.querySelectorAll("ul.filter").forEach(ele => {
const words = ele.firstChild.textContent.split(' ');
let found = words.some(c => re.test(c));
ele.closest("div").style.display = found ? "" : "none"; // toggle the card
});
})
//Alternatives for the textContent:
// ul.setAttribute("data-filter", `${firstNames} ${student.lastName}`);
// `${firstNames} ${student.lastName}`.split(" ").forEach(name => ul.classList.add(name) )
ul {list-style: none}
#container img { float:left; padding:5px }
#filter { position:fixed; margin-left:300px }
<input id="filter" />
<div id="container"></div>

How to find out similar objects in array - react js

I have seen similar questions about duplicate objects.
my json output:
{ "coupons": [
{
"id": "376363",
"price": "14400",
"date": "2018-04-08 10:40:17",
"user_id": "16433",
"ip": "46.225.123.235",
"code": "5ac9b249a0cc5",
"succ": "1",
"admin_seen": "1",
"user_seen": "0",
"coupon_id": "20821",
"coupon_parent": "20821",
"coupon_code": "195_2484C1_9873(7531)",
"coupon_code_user": "7531",
"coupon_code_partner": "195_2484C1_9873",
"shop_id": "2484",
"payment_type": "7",
"merchent_type": "3",
"merchent_id": "0",
"cradit_start_date": "2018-03-24 05:05:05",
"cradit_end_date": "2018-04-22 05:05:05",
"expired": "0",
"pay_data": null,
"seri": "C",
"to_friend": "0",
"finance_id": "0",
"app": "web",
"expire_date": "0000-00-00 00:00:00",
"expire_app": "",
"buy_id": "5ac9b249970c2",
"coupon_property_id": "0",
"title": "title1",
"coupon_property_title": "",
"parent_title": ""
},
{
"id": "376362",
"price": "14400",
"date": "2018-04-08 10:40:17",
"user_id": "16433",
"ip": "46.225.123.235",
"code": "5ac9b24997103",
"succ": "1",
"admin_seen": "1",
"user_seen": "0",
"coupon_id": "20821",
"coupon_parent": "20821",
"coupon_code": "194_2484C1_9779(4478)",
"coupon_code_user": "4478",
"coupon_code_partner": "194_2484C1_9779",
"shop_id": "2484",
"payment_type": "7",
"merchent_type": "3",
"merchent_id": "0",
"cradit_start_date": "2018-03-24 05:05:05",
"cradit_end_date": "2018-04-22 05:05:05",
"expired": "0",
"pay_data": null,
"seri": "C",
"to_friend": "0",
"finance_id": "0",
"app": "web",
"expire_date": "0000-00-00 00:00:00",
"expire_app": "",
"buy_id": "5ac9b249970c2",
"coupon_property_id": "0",
"title": "title2",
"coupon_property_title": "",
"parent_title": ""
},
{
"id": "341459",
"price": "27000",
"date": "2017-03-07 10:42:47",
"user_id": "16433",
"ip": "46.225.76.21",
"code": "58be5d6fd7214",
"succ": "1",
"admin_seen": "1",
"user_seen": "0",
"coupon_id": "19457",
"coupon_parent": "19457",
"coupon_code": "7_1310B1_2389(3386)",
"coupon_code_user": "3386",
"coupon_code_partner": "7_1310B1_2389",
"shop_id": "1310",
"payment_type": "7",
"merchent_type": "3",
"merchent_id": "0",
"cradit_start_date": "2017-01-16 05:05:05",
"cradit_end_date": "2017-03-19 05:05:05",
"expired": "11",
"pay_data": null,
"seri": "B",
"to_friend": "0",
"finance_id": "0",
"app": "web",
"expire_date": "0000-00-00 00:00:00",
"expire_app": "",
"buy_id": "58be5d6fd71c6",
"coupon_property_id": "0",
"title": "title3",
"coupon_property_title": "",
"parent_title": ""
},
{
"id": "341456",
"price": "11250",
"date": "2017-03-07 10:34:54",
"user_id": "16433",
"ip": "46.225.76.21",
"code": "58be5b964bf1d",
"succ": "1",
"admin_seen": "1",
"user_seen": "0",
"coupon_id": "19724",
"coupon_parent": "19724",
"coupon_code": "16_2129A1_2178(4663)",
"coupon_code_user": "4663",
"coupon_code_partner": "16_2129A1_2178",
"shop_id": "2129",
"payment_type": "7",
"merchent_type": "3",
"merchent_id": "0",
"cradit_start_date": "2017-03-05 05:05:05",
"cradit_end_date": "2017-05-05 05:05:05",
"expired": "11",
"pay_data": null,
"seri": "A",
"to_friend": "0",
"finance_id": "0",
"app": "web",
"expire_date": "0000-00-00 00:00:00",
"expire_app": "",
"buy_id": "58be5b964b1a1",
"coupon_property_id": "0",
"title": "title4",
"coupon_property_title": "",
"parent_title": ""
}
]
}
each object has a buy_id field. buy_id shows that the objects are the same and I should print them inside one row of html table.
for example the first object and the second object are the same depending on buy_id I print them inside row. output:
---------
title1 - title2 //because the first object and second object have same `buy_id`
---------
title3
---------
title4
should I use two maps?
I should use this scenario inside return of render function.

I put a bet on reduce for that.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
the following snippets will group your objects by buy_id, then you can render them easily
const data = { "coupons": [
{
"id": "376363",
"price": "14400",
"date": "2018-04-08 10:40:17",
"user_id": "16433",
"ip": "46.225.123.235",
"code": "5ac9b249a0cc5",
"succ": "1",
"admin_seen": "1",
"user_seen": "0",
"coupon_id": "20821",
"coupon_parent": "20821",
"coupon_code": "195_2484C1_9873(7531)",
"coupon_code_user": "7531",
"coupon_code_partner": "195_2484C1_9873",
"shop_id": "2484",
"payment_type": "7",
"merchent_type": "3",
"merchent_id": "0",
"cradit_start_date": "2018-03-24 05:05:05",
"cradit_end_date": "2018-04-22 05:05:05",
"expired": "0",
"pay_data": null,
"seri": "C",
"to_friend": "0",
"finance_id": "0",
"app": "web",
"expire_date": "0000-00-00 00:00:00",
"expire_app": "",
"buy_id": "5ac9b249970c2",
"coupon_property_id": "0",
"title": "title1",
"coupon_property_title": "",
"parent_title": ""
},
{
"id": "376362",
"price": "14400",
"date": "2018-04-08 10:40:17",
"user_id": "16433",
"ip": "46.225.123.235",
"code": "5ac9b24997103",
"succ": "1",
"admin_seen": "1",
"user_seen": "0",
"coupon_id": "20821",
"coupon_parent": "20821",
"coupon_code": "194_2484C1_9779(4478)",
"coupon_code_user": "4478",
"coupon_code_partner": "194_2484C1_9779",
"shop_id": "2484",
"payment_type": "7",
"merchent_type": "3",
"merchent_id": "0",
"cradit_start_date": "2018-03-24 05:05:05",
"cradit_end_date": "2018-04-22 05:05:05",
"expired": "0",
"pay_data": null,
"seri": "C",
"to_friend": "0",
"finance_id": "0",
"app": "web",
"expire_date": "0000-00-00 00:00:00",
"expire_app": "",
"buy_id": "5ac9b249970c2",
"coupon_property_id": "0",
"title": "title2",
"coupon_property_title": "",
"parent_title": ""
},
{
"id": "341459",
"price": "27000",
"date": "2017-03-07 10:42:47",
"user_id": "16433",
"ip": "46.225.76.21",
"code": "58be5d6fd7214",
"succ": "1",
"admin_seen": "1",
"user_seen": "0",
"coupon_id": "19457",
"coupon_parent": "19457",
"coupon_code": "7_1310B1_2389(3386)",
"coupon_code_user": "3386",
"coupon_code_partner": "7_1310B1_2389",
"shop_id": "1310",
"payment_type": "7",
"merchent_type": "3",
"merchent_id": "0",
"cradit_start_date": "2017-01-16 05:05:05",
"cradit_end_date": "2017-03-19 05:05:05",
"expired": "11",
"pay_data": null,
"seri": "B",
"to_friend": "0",
"finance_id": "0",
"app": "web",
"expire_date": "0000-00-00 00:00:00",
"expire_app": "",
"buy_id": "58be5d6fd71c6",
"coupon_property_id": "0",
"title": "title3",
"coupon_property_title": "",
"parent_title": ""
},
{
"id": "341456",
"price": "11250",
"date": "2017-03-07 10:34:54",
"user_id": "16433",
"ip": "46.225.76.21",
"code": "58be5b964bf1d",
"succ": "1",
"admin_seen": "1",
"user_seen": "0",
"coupon_id": "19724",
"coupon_parent": "19724",
"coupon_code": "16_2129A1_2178(4663)",
"coupon_code_user": "4663",
"coupon_code_partner": "16_2129A1_2178",
"shop_id": "2129",
"payment_type": "7",
"merchent_type": "3",
"merchent_id": "0",
"cradit_start_date": "2017-03-05 05:05:05",
"cradit_end_date": "2017-05-05 05:05:05",
"expired": "11",
"pay_data": null,
"seri": "A",
"to_friend": "0",
"finance_id": "0",
"app": "web",
"expire_date": "0000-00-00 00:00:00",
"expire_app": "",
"buy_id": "58be5b964b1a1",
"coupon_property_id": "0",
"title": "title4",
"coupon_property_title": "",
"parent_title": ""
}
]
};
const reducedData = data.coupons.reduce((accumulator, value) => {
accumulator[value.buy_id] = accumulator[value.buy_id] || [];
accumulator[value.buy_id].push(value);
return accumulator;
}, {});
console.log(reducedData);

You have to use reduce :
data.coupons.reduce((acc,value)=>{
return acc[value.buy_id] === undefined
? {...acc,[value.buy_id]:value.title}
: {...acc,[value.buy_id]:`${acc[value.buy_id]} - ${value.title}`}
},{})
The result is :
{
"5ac9b249970c2": "title1 - title2",
"58be5d6fd71c6": "title3",
"58be5b964b1a1": "title4"
}

Error when I try to parse my json

I am using AngularJs doing a simple application And I want to set a variable up in a javascript file in orther to call a json file.
This is my data.js :
[{
var data = require('data_old.json');
var json = JSON.parse(data);
alert(json["date"]); //01/05/2016
alert(json.date); //01/05/2016
"name": "city A",
"elements": [{
"id": "c01",
"name": "name1",
"price": "15",
"qte": "10"
}, {
"id": "c02",
"name": "name2",
"price": "18",
"qte": "11"
}, {
"id": "c03",
"name": "name3",
"price": "11",
"qte": "14"
}],
"subsities": [{
"name": "sub A1",
"elements": [{
"id": "sub01",
"name": "nameSub1",
"price": "1",
"qte": "14"
}, {
"id": "sub02",
"name": "nameSub2",
"price": "8",
"qte": "13"
}, {
"id": "sub03",
"name": "nameSub3",
"price": "1",
"qte": "14"
}]
}, {
"name": "sub A2",
"elements": [{
"id": "ssub01",
"name": "nameSsub1",
"price": "1",
"qte": "7"
}, {
"id": "ssub02",
"name": "nameSsub2",
"price": "8",
"qte": "1"
}, {
"id": "ssub03",
"name": "nameSsub3",
"price": "4",
"qte": "19"
}]
}, {
"name": "sub A3",
"elements": [{
"id": "sssub01",
"name": "nameSssub1",
"price": "1",
"qte": "11"
}, {
"id": "sssub02",
"name": "nameSssub2",
"price": "2",
"qte": "15"
}, {
"id": "sssub03",
"name": "nameSssub3",
"price": "1",
"qte": "15"
}]
}]
}, {
"name": "city B",
"elements": [{
"id": "cc01",
"name": "name11",
"price": "10",
"qte": "11"
}, {
"id": "cc02",
"name": "name22",
"price": "14",
"qte": "19"
}, {
"id": "cc03",
"name": "name33",
"price": "11",
"qte": "18"
}]
}, {
"name": "city C",
"elements": [{
"id": "ccc01",
"name": "name111",
"price": "19",
"qte": "12"
}, {
"id": "ccc02",
"name": "name222",
"price": "18",
"qte": "17"
}, {
"id": "ccc03",
"name": "name333",
"price": "10",
"qte": "5"
}]
}]
And this is my data.json
[{
"date":"01/05/2016"
}]
I call my data here.
angular.module("myApp",['zingchart-angularjs'])
.controller('MainController', ['$scope', '$http', function($scope, $http) {
$scope.chartBase = {
"type": "line",
"plotarea": {
"adjust-layout": true /* For automatic margin adjustment. */
},
"scale-x": {
"label": {
"text": "Above is an example of a category scale" /* Add a scale title with a label object. */
},
"labels": ["name1", "name2", "name3"] /* Add your scale labels with a labels array. */
},
"series": [{
"values": [15, 18, 11] //here the prices of city selected
},{
"values": [10, 11, 14] //here the qte of city selected
}]
};
$scope.chartData = angular.copy($scope.chartBase);
$http.get('data.js')
.then(function(response) {
$scope.cities = response.data; // save the request data
$scope.selectedCity = $scope.cities[0]; // select the first one
$scope.changeCity(); // update chart
}, function(error) { console.log(error); });
$scope.changeCity = function() {
if($scope.selectedSubCity || $scope.selectedCity){ // if something has been selected
$scope.data = ($scope.selectedSubCity || $scope.selectedCity).elements; // update elements field
// initialize the array to be displayed in chart
var labels = [];
var price = {
"values": []
};
var qte = {
"values": []
};
// fill the arrays to be displayed from the selected city (sub city)
angular.forEach($scope.data, function(item, index) {
labels.push(item.name);
price.values.push(parseInt(item.price));
qte.values.push(parseInt(item.qte));
});
console.log($scope.chartData)
// put selected values to the field that is used to render the chart
$scope.chartData["scale-x"].labels = labels;
$scope.chartData.series = [ price, qte ];
}
}
}]);
When I run this, the browser tell that I have this error :
SyntaxError: Unexpected token v in JSON at position 5
at Object.parse (native)

You can't have those in your data.js file as they are not valid JSON
var data = require('data_old.json');
var json = JSON.parse(data);
alert(json["date"]); //01/05/2016
alert(json.date); //01/05/2016
The error is pointing to the first "v" of "var". You can test your JSON here http://json.parser.online.fr/ on some other online validator.
Your file should look like this:
[{
"name": "city A",
"elements": [{
"id": "c01",
"name": "name1",
"price": "15",
"qte": "10"
}, {
"id": "c02",
"name": "name2",
"price": "18",
"qte": "11"
}, {
"id": "c03",
"name": "name3",
"price": "11",
"qte": "14"
}],
"subsities": [{
"name": "sub A1",
"elements": [{
"id": "sub01",
"name": "nameSub1",
"price": "1",
"qte": "14"
}, {
"id": "sub02",
"name": "nameSub2",
"price": "8",
"qte": "13"
}, {
"id": "sub03",
"name": "nameSub3",
"price": "1",
"qte": "14"
}]
}, {
"name": "sub A2",
"elements": [{
"id": "ssub01",
"name": "nameSsub1",
"price": "1",
"qte": "7"
}, {
"id": "ssub02",
"name": "nameSsub2",
"price": "8",
"qte": "1"
}, {
"id": "ssub03",
"name": "nameSsub3",
"price": "4",
"qte": "19"
}]
}, {
"name": "sub A3",
"elements": [{
"id": "sssub01",
"name": "nameSssub1",
"price": "1",
"qte": "11"
}, {
"id": "sssub02",
"name": "nameSssub2",
"price": "2",
"qte": "15"
}, {
"id": "sssub03",
"name": "nameSssub3",
"price": "1",
"qte": "15"
}]
}]
}, {
"name": "city B",
"elements": [{
"id": "cc01",
"name": "name11",
"price": "10",
"qte": "11"
}, {
"id": "cc02",
"name": "name22",
"price": "14",
"qte": "19"
}, {
"id": "cc03",
"name": "name33",
"price": "11",
"qte": "18"
}]
}, {
"name": "city C",
"elements": [{
"id": "ccc01",
"name": "name111",
"price": "19",
"qte": "12"
}, {
"id": "ccc02",
"name": "name222",
"price": "18",
"qte": "17"
}, {
"id": "ccc03",
"name": "name333",
"price": "10",
"qte": "5"
}]
}]

var data = require('data_old.json');
var json = JSON.parse(data);
alert(json["date"]); //01/05/2016
alert(json.date); //01/05/2016
Why do you add those at the beginning of the JSON ? They cannot be parsed by your script, thus displaying the Syntax Error. What do you want to do exactly ?

validation of my code json

I am developping a simple application in AngularJs in the first time I create a script js but later I need to change it to json file so I need to validate this code json :
[{
"type": "line",
"plotarea": {
"adjust-layout":true /* For automatic margin adjustment. */
},
"scale-x": {
"label":{ /* Add a scale title with a label object. */
"text":"échelle essence gazoile",
},
/* Add your scale labels with a labels array. */
"labels":["sub01","sub02","sub02"]
},
"series": [
{"values":[1,8,1]},//here the prices of city selected
{"values":[14,13,14]}//here the qte of city selected
],
"name": "city A",
"elements": [{
"id": "c01",
"name": "name1",
"price": "15",
"qte": "10"
}, {
"id": "c02",
"name": "name2',
"price": "18,
"qte": "11"
}, {
"id": "c03",
"name": "name3",
"price": "11",
"qte": "14"
}],
"subsities": [{
"name": "sub A1",
"elements": [{
"id": "sub01",
"name": "nameSub1",
"price": "1",
"qte": "14"
}, {
"id": "sub02",
"name": "nameSub2",
"price": "8",
"qte": "13"
}, {
"id": "sub03",
"name": "nameSub3",
"price": "1",
"qte": "14"
}]
}, {
"name": "sub A2",
"elements": [{
"id": "ssub01",
"name": "nameSsub1",
"price": "1",
"qte": "7"
}, {
"id": "ssub02",
"name": "nameSsub2",
"price": "8",
"qte": "1"
}, {
"id": "ssub03",
"name": "nameSsub3",
"price": "4",
"qte": "19"
}]
}, {
"name": "sub A3",
"elements": [{
"id": "sssub01",
"name": "nameSssub1",
"price": "1",
"qte": "11"
}, {
"id": "sssub02",
"name": "nameSssub2",
"price": "2",
"qte": "15"
}, {
"id": "sssub03",
"name": "nameSssub3",
"price": "1",
"qte": "15"
}]
}]
}, {
"name": "city B",
"elements": [{
"id": "cc01",
"name": "name11",
"price": "10",
"qte": "11"
}, {
"id": "cc02",
"name": "name22",
"price": "14",
"qte": "19"
}, {
"id": "cc03",
"name": "name33",
"price": "11",
"qte": "18"
}]
}, {
"name": "city C",
"elements": [{
"id": "ccc01",
"name": "name111",
"price": "19",
"qte": "12"
}, {
"id": "ccc02",
"name": "name222",
"price": "18",
"qte": "17"
}, {
"id": "ccc03",
"name": "name333",
"price": "10",
"qte": "5"
}]
}];
A JSON Validator tells me that my code json is not correct.
Please anybody could help me !

The problem with comments and some of values doesn't contain , and some contains in the last value.(For example : 'json': {
'value1': 14,
'value2':14, // , is not allowed in the last line
}) Also last line can't contain ; after }]
Use this for validation jsonlint
This is correct json:
[{
"type": "line",
"plotarea": {
"adjust-layout": true
},
"scale-x": {
"label": {
"text": "échelle essence gazoile"
},
"labels": ["sub01", "sub02", "sub02"]
},
"series": [{
"values": [1, 8, 1]
}, {
"values": [14, 13, 14]
}],
"name": "city A",
"elements": [{
"id": "c01",
"name": "name1",
"price": "15",
"qte": "10"
}, {
"id": "c02",
"name": "name2",
"price": "18",
"qte": "11"
}, {
"id": "c03",
"name": "name3",
"price": "11",
"qte": "14"
}],
"subsities": [{
"name": "sub A1",
"elements": [{
"id": "sub01",
"name": "nameSub1",
"price": "1",
"qte": "14"
}, {
"id": "sub02",
"name": "nameSub2",
"price": "8",
"qte": "13"
}, {
"id": "sub03",
"name": "nameSub3",
"price": "1",
"qte": "14"
}]
}, {
"name": "sub A2",
"elements": [{
"id": "ssub01",
"name": "nameSsub1",
"price": "1",
"qte": "7"
}, {
"id": "ssub02",
"name": "nameSsub2",
"price": "8",
"qte": "1"
}, {
"id": "ssub03",
"name": "nameSsub3",
"price": "4",
"qte": "19"
}]
}, {
"name": "sub A3",
"elements": [{
"id": "sssub01",
"name": "nameSssub1",
"price": "1",
"qte": "11"
}, {
"id": "sssub02",
"name": "nameSssub2",
"price": "2",
"qte": "15"
}, {
"id": "sssub03",
"name": "nameSssub3",
"price": "1",
"qte": "15"
}]
}]
}, {
"name": "city B",
"elements": [{
"id": "cc01",
"name": "name11",
"price": "10",
"qte": "11"
}, {
"id": "cc02",
"name": "name22",
"price": "14",
"qte": "19"
}, {
"id": "cc03",
"name": "name33",
"price": "11",
"qte": "18"
}]
}, {
"name": "city C",
"elements": [{
"id": "ccc01",
"name": "name111",
"price": "19",
"qte": "12"
}, {
"id": "ccc02",
"name": "name222",
"price": "18",
"qte": "17"
}, {
"id": "ccc03",
"name": "name333",
"price": "10",
"qte": "5"
}]
}]

the problem is that you have comments in your JSON. This is not allowed in pure json.
In addition you have some syntax errors:
Line 8 :"text": "échelle essence gazoile", the , has to be removed because it is the last property of the object
Line 26: "name": "name2', change the singlequote to a doublequote
Line 27: "price": "18,: add a doublequote at the end
Last line: }]; remove the semicolon
This is your valid json:
[{
"type": "line",
"plotarea": {
"adjust-layout": true
},
"scale-x": {
"label": {
"text": "échelle essence gazoile"
},
"labels": ["sub01", "sub02", "sub02"]
},
"series": [{
"values": [1, 8, 1]
}, {
"values": [14, 13, 14]
}],
"name": "city A",
"elements": [{
"id": "c01",
"name": "name1",
"price": "15",
"qte": "10"
}, {
"id": "c02",
"name": "name2",
"price": "18",
"qte": "11"
}, {
"id": "c03",
"name": "name3",
"price": "11",
"qte": "14"
}],
"subsities": [{
"name": "sub A1",
"elements": [{
"id": "sub01",
"name": "nameSub1",
"price": "1",
"qte": "14"
}, {
"id": "sub02",
"name": "nameSub2",
"price": "8",
"qte": "13"
}, {
"id": "sub03",
"name": "nameSub3",
"price": "1",
"qte": "14"
}]
}, {
"name": "sub A2",
"elements": [{
"id": "ssub01",
"name": "nameSsub1",
"price": "1",
"qte": "7"
}, {
"id": "ssub02",
"name": "nameSsub2",
"price": "8",
"qte": "1"
}, {
"id": "ssub03",
"name": "nameSsub3",
"price": "4",
"qte": "19"
}]
}, {
"name": "sub A3",
"elements": [{
"id": "sssub01",
"name": "nameSssub1",
"price": "1",
"qte": "11"
}, {
"id": "sssub02",
"name": "nameSssub2",
"price": "2",
"qte": "15"
}, {
"id": "sssub03",
"name": "nameSssub3",
"price": "1",
"qte": "15"
}]
}]
}, {
"name": "city B",
"elements": [{
"id": "cc01",
"name": "name11",
"price": "10",
"qte": "11"
}, {
"id": "cc02",
"name": "name22",
"price": "14",
"qte": "19"
}, {
"id": "cc03",
"name": "name33",
"price": "11",
"qte": "18"
}]
}, {
"name": "city C",
"elements": [{
"id": "ccc01",
"name": "name111",
"price": "19",
"qte": "12"
}, {
"id": "ccc02",
"name": "name222",
"price": "18",
"qte": "17"
}, {
"id": "ccc03",
"name": "name333",
"price": "10",
"qte": "5"
}]
}]

You cannot have a C Style or C# style comments inside a json document.As a matter of fact you cannot have any comments inside a json document
You can validate your json document on http://jsonlint.com/

You can try this# http://jsonlint.com/
this will validate your json and also gives you error where you are doing mistakes

Loop outputs [object, object, object object] [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have been taking some online courses recently to try and understand the basics of programming, Gradually trying to increase the complexity of what I am learning. However I cannot seem to be able to control the output of my loop, I either get the last value or [object,object object,object object, object,object]
Any help would be greatly appreciated, I am sure this is quite simple but I have tried for in's for's and for each's and no luck so far.
{
"years": [
{
"id": "1",
"year": "2015",
"total": "55045",
"points": [
{
"id": "2",
"points": "600",
"total": "215",
"percent": "0.4"
},
{
"id": "3",
"points": "500-599",
"total": "5431",
"percent": "9.9"
},
{
"id": "4",
"points": "400-499",
"total": "14097",
"percent": "25.6"
},
{
"id": "5",
"points": "300-399",
"total": "14446",
"percent": "26.2"
},
{
"id": "6",
"points": "200-299",
"total": "9768",
"percent": "17.7"
},
{
"id": "7",
"points": "100-199",
"total": "6562",
"percent": "11.9"
},
{
"id": "8",
"points": " >100",
"total": "4526",
"percent": "8.2"
}
]
},
{
"id": "9",
"year": "2014",
"total": "54025",
"points": [
{
"id": "10",
"points": "600",
"total": "162",
"percent": "0.3"
},
{
"id": "11",
"points": "500-599",
"total": "5088",
"percent": "9.4"
},
{
"id": "12",
"points": "400-499",
"total": "13447",
"percent": "24.9"
},
{
"id": "13",
"points": "300-399",
"total": "14047",
"percent": "26"
},
{
"id": "14",
"points": "200-299",
"total": "9584",
"percent": "17.7"
},
{
"id": "15",
"points": "100-199",
"total": "6926",
"percent": "12.8"
},
{
"id": "16",
"points": " >100",
"total": "4771",
"percent": "8.8"
}
]
},
{
"id": "17",
"year": "2013",
"total": "52767",
"points": [
{
"id": "18",
"points": "600",
"total": "152",
"percent": "0.3"
},
{
"id": "19",
"points": "500-599",
"total": "4813",
"percent": "9.1"
},
{
"id": "20",
"points": "400-499",
"total": "12803",
"percent": "24.3"
},
{
"id": "21",
"points": "300-399",
"total": "13381",
"percent": "25.4"
},
{
"id": "22",
"points": "200-299",
"total": "9566",
"percent": "18.1"
},
{
"id": "23",
"points": "100-199",
"total": "6914",
"percent": "13.1"
},
{
"id": "24",
"points": " >100",
"total": "5138",
"percent": "9.7"
}
]
},
{
"id": "25",
"year": "2012",
"total": "52589",
"points": [
{
"id": "26",
"points": "600",
"total": "165",
"percent": "0.2"
},
{
"id": "27",
"points": "500-599",
"total": "5026",
"percent": "9.6"
},
{
"id": "28",
"points": "400-499",
"total": "12395",
"percent": "23.6"
},
{
"id": "29",
"points": "300-399",
"total": "13170",
"percent": "25"
},
{
"id": "30",
"points": "200-299",
"total": "9588",
"percent": "18.2"
},
{
"id": "31",
"points": "100-199",
"total": "6999",
"percent": "13.3"
},
{
"id": "32",
"points": " >100",
"total": "5276",
"percent": "10"
}
]
},
{
"id": "33",
"year": "2011",
"total": "54341",
"points": [
{
"id": "34",
"points": "600",
"total": "162",
"percent": "0.3"
},
{
"id": "35",
"points": "500-599",
"total": "4863",
"percent": "8.6"
},
{
"id": "36",
"points": "400-499",
"total": "12235",
"percent": "22.5"
},
{
"id": "37",
"points": "300-399",
"total": "13860",
"percent": "18.4"
},
{
"id": "38",
"points": "200-299",
"total": "9966",
"percent": "18.4"
},
{
"id": "39",
"points": "100-199",
"total": "7477",
"percent": "13.8"
},
{
"id": "40",
"points": " >100",
"total": "5928",
"percent": "10.9"
}
]
},
{
"id": "34",
"year": "2010",
"total": "54480",
"points": [
{
"id": "35",
"points": "600",
"total": "136",
"percent": "0.2"
},
{
"id": "36",
"points": "500-599",
"total": "4564",
"percent": "8.4"
},
{
"id": "37",
"points": "400-499",
"total": "11973",
"percent": "22"
},
{
"id": "38",
"points": "300-399",
"total": "13878",
"percent": "25.5"
},
{
"id": "39",
"points": "200-299",
"total": "10391",
"percent": "19.1"
},
{
"id": "40",
"points": "100-199",
"total": "7294",
"percent": "13.4"
},
{
"id": "41",
"points": " >100",
"total": "6244",
"percent": "11.5"
}
]
}
]
}
I am hoping someone can maybe help with controlling the output of the loop.

You haven't showed any code, but I can guess that your problem is something typical in JavaScript:
JavaScript closure inside loops – simple practical example
Check out neurosnap's answer.
http://coffeescript.org/#loops
In CoffeeScript it's even simpler:
for filename in list
do (filename) ->
fs.readFile filename, (err, contents) ->
compile filename, contents.toString()
Basically, you need a lambda/IIFE inside the for loop in JavaScript to loop to avoid your problem.