How to find out similar objects in array - react js - javascript

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"
}

Related

Javascript Object is pushing on both indexes rather than specific index

I searched this a lot on stackoverflow before posting this ticket so please don't consider this as duplicate question.
I have scenario of an array with two items, I am pushing an object at index 1 but it's pushing same object on both indexes.
Extra Object
const extraObj = {
"item_id": "4",
"item_name": "Extra Patty",
"item_image": "placeholder_img.jpg",
"item_price": "3.00",
"currency_code": "USD",
"currency_symbol": "$",
"gst_fee": "0.00",
"item_quantity": "1",
"branch_id": "1",
"is_type": "extra"
};
Items Array
const itemsArr = [
{
"item_id": "3",
"category_id": "12",
"item_name": "Waffles",
"item_image": "item_081220170335.jpg",
"is_variant": "0",
"item_price": "7",
"currency_code": "USD",
"currency_symbol": "$",
"gst_fee": "0.00",
"item_quantity": "1",
"branch_id": "1",
"is_type": "item"
},
{
"item_id": "3",
"category_id": "12",
"item_name": "Waffles",
"item_image": "item_081220170335.jpg",
"is_variant": "0",
"item_price": "7",
"currency_code": "USD",
"currency_symbol": "$",
"gst_fee": "0.00",
"item_quantity": "1",
"branch_id": "1",
"is_type": "item",
}
];
itemsArr[1].extras = [extraObj];
// result
[
{
"item_id": "3",
"category_id": "12",
"item_name": "Waffles",
"item_image": "item_081220170335.jpg",
"is_variant": "0",
"item_price": "7",
"currency_code": "USD",
"currency_symbol": "$",
"gst_fee": "0.00",
"item_quantity": "1",
"branch_id": "1",
"is_type": "item",
"extras": [
{
"item_id": "4",
"item_name": "Extra Patty",
"item_image": "placeholder_img.jpg",
"item_price": "3.00",
"currency_code": "USD",
"currency_symbol": "$",
"gst_fee": "0.00",
"item_quantity": "1",
"branch_id": "1",
"is_type": "extra"
}
]
},
{
"item_id": "3",
"category_id": "12",
"item_name": "Waffles",
"item_image": "item_081220170335.jpg",
"is_variant": "0",
"item_price": "7",
"currency_code": "USD",
"currency_symbol": "$",
"gst_fee": "0.00",
"item_quantity": "1",
"branch_id": "1",
"is_type": "item",
"extras": [
{
"item_id": "4",
"item_name": "Extra Patty",
"item_image": "placeholder_img.jpg",
"item_price": "3.00",
"currency_code": "USD",
"currency_symbol": "$",
"gst_fee": "0.00",
"item_quantity": "1",
"branch_id": "1",
"is_type": "extra"
}
]
}
]
case SET_FOOD_EXTRAS:
const { itemId, extra, extraIndex, itemIndex } = action.payload;
const cloneItems = cloneDeep([...state.items]);
// cloneItems.splice(itemIndex, 0, { extras: [extra] });
cloneItems[itemIndex].extras = [extra];
return {
...state,
items: cloneItems,
summary: setSummary(state, cloneItems)
};
It depends on how you populate your itemsArr.
If you do something like:
const ob1 = {
"item_id": "3",
"category_id": "12",
"item_name": "Waffles",
"item_image": "item_081220170335.jpg",
"is_variant": "0",
"item_price": "7",
"currency_code": "USD",
"currency_symbol": "$",
"gst_fee": "0.00",
"item_quantity": "1",
"branch_id": "1",
"is_type": "item"
}
itemsArr.push(ob1);
itemsArr.push(ob1);
Then, both items in the array point to the same object so any modifications to one will be reflected on the other.
One solution is to make copies of the object:
itemsArr.push({...ob1});
itemsArr.push({..ob1});

How can we easily remove an element from an multi dimensional array object in react js

I am working in react Js. There is a trouble for me to remove an item corresponding to "product_option_value_id" .I need to remove item from product_option_value ( child array object) if my given itemId==product_option_value_id, and return whole array object after removing the specified item. I think the idea is clear . I tried a method , but I got undefined.
"default": 0,
"master_option": 0,
" master_option_value": 0,
"maximum": 0,
"minimum": 0,
"name": "Choose Size",
"option_id": "4",
"product_option_id": "111",
"product_option_value": [{
"ec_product_id": "",
"exclude_others": "0",
"image": "",
"master_option_value": "0",
"name": "25ml",
"option_value_id": "8",
"points": "0",
"product_option_value_id": "267"
},
{
" ec_product_id": "22w",
"exclude_others": "0",
"image": "",
"master_option_value": "0",
"name": "25ml",
"option_value_id": "8",
"points": "0",
"product_option_value_id": "266"
}
]
},
{
"default": 0,
"master_option": 0,
" master_option_value": 0,
"maximum": 0,
"minimum": 0,
"name": "Water",
"option_id": "4",
"product_option_id": "111",
"product_option_value": [{
"ec_product_id": "",
"exclude_others": "0",
"image": "",
"master_option_value": "0",
"name": "25ml",
"option_value_id": "8",
"points": "0",
"product_option_value_id": "700"
},
{
" ec_product_id": "22w",
"exclude_others": "0",
"image": "",
"master_option_value": "0",
"name": "50ml",
"option_value_id": "8",
"points": "0",
"product_option_value_id": "701"
},
{
" ec_product_id": "22w",
"exclude_others": "0",
"image": "",
"master_option_value": "0",
"name": "500ml",
"option_value_id": "8",
"points": "0",
"product_option_value_id": "702"
}, {
" ec_product_id": "22w",
"exclude_others": "0",
"image": "",
"master_option_value": "0",
"name": "500ml",
"option_value_id": "8",
"points": "0",
"product_option_value_id": "703"
}
]
}
]
The method I tried
const removeOption=(itemId:any)=>{
const filteredItems = productOptions.forEach(function(o:any) {
o.product_option_value = o.product_option_value.filter((s:any) => s.product_option_value_id != itemId);
});
}
Well, the forEach method does not return the array, that is why you are getting undefined as result. This method just perform a function for each element:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
So you need to use the .map() method instead:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
so basically:
const removeOption = (itemId: any) => {
return productOptions.map((o: any) => {
return { ...o, product_option_value: o.product_option_value.filter((s: any) => s.product_option_value_id !== itemId)};
});
}

Manipulating Data in Vue for Chart Options

I am hitting a rest api giving me a dataset on a piece of equipment. I need to get the first column of datas as an array and I seem to not get it right. I have tried computed and methods in vue but it always returns []. Does anyone know what I may be doing wrong? {{datas}} prints out my JSON with no issues but when i add {{ getDate }} it returns can't find date of undefined.
Thanks
<template>
<v-app>
<!-- <v-data-table :headers="headers" :items="datas" class="elevation-1">
<template slot="items" scope="props">
<td class="text-xs-right">{{props.item.date}}</td>
<td class="text-xs-right">{{props.item.iron}}</td>
<td class="text-xs-right">{{props.item.chromium}}</td>
<td class="text-xs-right">{{props.item.lead}}</td>
</template>
</v-data-table>-->
<p>{{ datas }}</p>
<!-- <p v-for="data in datas">{{ data.date }}</p> -->
{{ getDates }}
<center>
<chart :options="chartOptionsBar"></chart>
</center>
<chart :options="chartOptionsLine"></chart>
<p>108J View</p>
</v-app>
</template>
<script>
import axios from "axios";
export default {
name: "E108J",
components: {},
data() {
return {
datas: [],
chartDates: [],
chartOptionsLine: {
xAxis: {
data: ["q", "Q2", "Q3", "Q4"]
},
yAxis: {
type: "value"
},
series: [
{
type: "line",
data: [63, 75, 24, 92]
}
],
title: {
text: "Quarterly Sales Results",
x: "center",
textStyle: {
fontSize: 24
}
},
color: ["#127ac2"]
},
chartOptionsBar: {
xAxis: {
data: ["Q1", "Q2", "Q3", "Q4"]
},
yAxis: {
type: "value"
},
series: [
{
type: "bar",
data: [63, 75, 24, 92]
}
],
title: {
text: "Quarterly Sales Results",
x: "center",
textStyle: {
fontSize: 36
}
}
}
};
},
mounted() {
axios
.get("http://localhost:3000/E108J")
.then(response => (this.datas = response.data));
},
computed: {
getDates() {
let chartdates;
for (let i = 0;i< this.datas.length; i++) {
chartdates = this.data[i];
}
return chartdates;
}
}
};
</script>
JSON Data:
[
{
date: "10/18/2018",
iron: "0",
chromium: "0",
lead: "3",
copper: "0",
tin: "0",
aluminum: "0",
nickel: "0",
silver: "0",
silicon: "1",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "1",
barioum: "0",
phosphorous: "3",
zinc: "2",
molybden: "1",
tin1: "0",
vandium: "2",
w: "1",
potassium: "0",
antimony: "0",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "214.41",
tan: "0.32",
kfish: "22",
water: "0.0022",
pc0: "455",
pc1: "139",
pc2: "25",
pc3: "11",
pc4: "1",
pc5: "0",
pciso0: "16",
pciso1: "14",
pciso2: "12"
},
{
date: "11/2/2018",
iron: "0",
chromium: "0",
lead: "2",
copper: "0",
tin: "3",
aluminum: "0",
nickel: "1",
silver: "0",
silicon: "1",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "0",
barioum: "0",
phosphorous: "10",
zinc: "0",
molybden: "0",
tin1: "0",
vandium: "0",
w: "0",
potassium: "0",
antimony: "7",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "213.56",
tan: "0.19",
kfish: "29",
water: "0.0029",
pc0: "339",
pc1: "39",
pc2: "21",
pc3: "8",
pc4: "0",
pc5: "0",
pciso0: "16",
pciso1: "12",
pciso2: "12"
},
{
date: "11/29/2018",
iron: "0",
chromium: "0",
lead: "0",
copper: "0",
tin: "0",
aluminum: "0",
nickel: "0",
silver: "0",
silicon: "2",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "0",
barioum: "0",
phosphorous: "1",
zinc: "1",
molybden: "0",
tin1: "0",
vandium: "0",
w: "1",
potassium: "0",
antimony: "0",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "217.67",
tan: "0.18",
kfish: "21",
water: "0.0021",
pc0: "921",
pc1: "223",
pc2: "40",
pc3: "18",
pc4: "1",
pc5: "0",
pciso0: "17",
pciso1: "15",
pciso2: "12"
},
{
date: "12/13/2018",
iron: "0",
chromium: "0",
lead: "1",
copper: "0",
tin: "0",
aluminum: "1",
nickel: "0",
silver: "0",
silicon: "0",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "0",
barioum: "0",
phosphorous: "2",
zinc: "0",
molybden: "2",
tin1: "0",
vandium: "0",
w: "1",
potassium: "0",
antimony: "0",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "214.46",
tan: "0.26",
kfish: "22",
water: "0.0022",
pc0: "581",
pc1: "101",
pc2: "39",
pc3: "24",
pc4: "7",
pc5: "4",
pciso0: "16",
pciso1: "14",
pciso2: "12"
},
{
date: "1/14/2019",
iron: "0",
chromium: "0",
lead: "0",
copper: "0",
tin: "0",
aluminum: "0",
nickel: "1",
silver: "0",
silicon: "1",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "0",
barioum: "0",
phosphorous: "4",
zinc: "0",
molybden: "0",
tin1: "0",
vandium: "0",
w: "0",
potassium: "0",
antimony: "0",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "222.35",
tan: "0.29",
kfish: "13",
water: "0.0013",
pc0: "663",
pc1: "140",
pc2: "13",
pc3: "11",
pc4: "2",
pc5: "0",
pciso0: "17",
pciso1: "14",
pciso2: "11"
}
]
First, to be safe, check that datas exists in your computed property. It is set to an array initially, but if invalid data comes back it could cause an error. So you could check something right inside your computed property like if(this.datas && this.datas.length), and only if that is true try to fill in chartdates. Otherwise, return an empty array.
Second, based on the JSON you included, the date can be extracted in the for loop using
this.datas[i].date
What you have now would get the whole object inside { .. } instead of just the date. There's also a typo using this.data[i] when it should be this.datas[i].
Finally, to make chartdates an array you need to set chartdates[i] to each ith value, otherwise only the last value will be stored in chartdates as Steven pointed out.
Try this:
<div v-if="datas.length > 0">
<p>{{ datas }}</p>
{{ getDates }}
</div>
In this lines of code
getDates() {
let chartdates;
for (let i = 0;i< this.datas.length; i++) {
chartdates = this.data[i];
}
return chartdates;
}
may be this.data[i] is replace by this.datas[i];

Ajax Get request will not find JSON file

I have a JSON file that I am trying to pull Key and Values from but this function will not ever succeed. The 'datafile.json' is in the exact same directory. The alert(weblink) never runs but the alert('test 1') works fine.
<div class="container">
<table class="table table-bordered table-striped table-hover" align="center">
<col width="50%">
<col>
<col width="15%">
<col width="25%">
<thead>
<tr bgcolor="#76767a" align="right">
<th align="left">Skill</th>
<th>Rank</th>
<th>Level</th>
<th>Experience</th>
</tr>
</thead>
</table>
</div>
<script>
var weblink = 'datafile.json';
var data = {};
$(document).ready(function(){
alert('test 1');
$.ajax({
type : 'GET',
dataType : 'json',
url : weblink,
success: function(data){
alert(weblink);
$.each(datas, function(key, val){
items.push("<tr>");
items.push("<td id =''"+key+"''>"+val.skill+"</td>");
items.push("<td id =''"+key+"''>"+val.rank+"</td>");
items.push("<td id =''"+key+"''>"+val.level+"</td>");
items.push("<td id =''"+key+"''>"+val.exp+"</td>");
items.push("</tr>");
});
$("<tbody/>", {"class": "mydata", html: items.join("")}).appendTo("table");
}
});
});
</script>
My datafile.json is:
[
{
"Skill": "Overall",
"Rank": "1132673",
"Level": "420",
"Exp": "466345"
},
{
"Skill": "Attack",
"Rank": "1256428",
"Level": "23",
"Exp": "6563"
},
{
"Skill": "Defence",
"Rank": "1182611",
"Level": "28",
"Exp": "11069"
},
{
"Skill": "Strength",
"Rank": "1250418",
"Level": "22",
"Exp": "6238"
},
{
"Skill": "Constitution",
"Rank": "1292788",
"Level": "27",
"Exp": "10413"
},
{
"Skill": "Ranged",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Prayer",
"Rank": "1116462",
"Level": "20",
"Exp": "4611"
},
{
"Skill": "Magic",
"Rank": "1058028",
"Level": "32",
"Exp": "18183"
},
{
"Skill": "Cooking",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Woodcutting",
"Rank": "955909",
"Level": "47",
"Exp": "79651"
},
{
"Skill": "Fletching",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Fishing",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Firemaking",
"Rank": "668820",
"Level": "58",
"Exp": "245606"
},
{
"Skill": "Crafting",
"Rank": "1060629",
"Level": "16",
"Exp": "3090"
},
{
"Skill": "Smithing",
"Rank": "956265",
"Level": "35",
"Exp": "24400"
},
{
"Skill": "Mining",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Herblore",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Agility",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Thieving",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Slayer",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Farming",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Runecrafting",
"Rank": "619807",
"Level": "42",
"Exp": "49314"
},
{
"Skill": "Hunter",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Construction",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Summoning",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Dungeoneering",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Divination",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Invention",
"Rank": "0",
"Level": "1",
"Exp": "0"
}
]
You can load json files using script tags. Optionally give it a .js extension. You would have to assign it to a variable, and it will be treated like javascript, but maybe that works for you.
<script type="text/javascript" language="javascript" src="datafile.json"></script>
<div class="container">
<table class="table table-bordered table-striped table-hover" align="center">
<col width="50%">
<col>
<col width="15%">
<col width="25%">
<thead>
<tr bgcolor="#76767a" align="right">
<th align="left">Skill</th>
<th>Rank</th>
<th>Level</th>
<th>Experience</th>
</tr>
</thead>
</table>
</div>
<script>
// var data is defined in the json script
$(window).load(function(){
$.each(data, function(skill) {
items.push("<tr>");
$.each(skill, function(key, val){
items.push("<td id =''"+key+"''>"+val.skill+"</td>");
items.push("<td id =''"+key+"''>"+val.rank+"</td>");
items.push("<td id =''"+key+"''>"+val.level+"</td>");
items.push("<td id =''"+key+"''>"+val.exp+"</td>");
});
items.push("</tr>");
})
$("<tbody/>", {"class": "mydata", html: items.join("")}).appendTo("table");
});
</script>
datafile.json
var data =
[
{
"Skill": "Overall",
"Rank": "1132673",
"Level": "420",
"Exp": "466345"
},
{
"Skill": "Attack",
"Rank": "1256428",
"Level": "23",
"Exp": "6563"
},
{
"Skill": "Defence",
"Rank": "1182611",
"Level": "28",
"Exp": "11069"
},
{
"Skill": "Strength",
"Rank": "1250418",
"Level": "22",
"Exp": "6238"
},
{
"Skill": "Constitution",
"Rank": "1292788",
"Level": "27",
"Exp": "10413"
},
{
"Skill": "Ranged",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Prayer",
"Rank": "1116462",
"Level": "20",
"Exp": "4611"
},
{
"Skill": "Magic",
"Rank": "1058028",
"Level": "32",
"Exp": "18183"
},
{
"Skill": "Cooking",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Woodcutting",
"Rank": "955909",
"Level": "47",
"Exp": "79651"
},
{
"Skill": "Fletching",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Fishing",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Firemaking",
"Rank": "668820",
"Level": "58",
"Exp": "245606"
},
{
"Skill": "Crafting",
"Rank": "1060629",
"Level": "16",
"Exp": "3090"
},
{
"Skill": "Smithing",
"Rank": "956265",
"Level": "35",
"Exp": "24400"
},
{
"Skill": "Mining",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Herblore",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Agility",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Thieving",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Slayer",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Farming",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Runecrafting",
"Rank": "619807",
"Level": "42",
"Exp": "49314"
},
{
"Skill": "Hunter",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Construction",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Summoning",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Dungeoneering",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Divination",
"Rank": "0",
"Level": "1",
"Exp": "0"
},
{
"Skill": "Invention",
"Rank": "0",
"Level": "1",
"Exp": "0"
}
];

Uncaught TypeError: Cannot read property 'length' of undefined (it mustn`t be so!) [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 function in my code that is presented below. So, while working I see a beautiful error...
Uncaught TypeError: Cannot read property 'length' of undefined
There is my code:
.on('slider', function (data) {
if(ngtimerStatus) {
ngtimerStatus = false;
$('.forceClose').addClass('msgs-not-visible');
console.log(data);
var users = data.users;
console.log(users);
users = mulAndShuffle(users, Math.ceil(110 / users.length));
users[6] = data.winner;
users[100] = data.winner;
html = '';
...
All in all I found that $data is nit empty!
It includes
{
"chance": 98.6,
"users": [
{
"updated_at": "2015-11-24 22:25:59",
"created_at": "2015-11-24 14:56:20",
"remember_token": "xespxJgYoYR9Pe1WQOYjMa3xuN4JYG708XJ20qhMJbMNfA2B1a5yMM8p5jnm",
"is_moderator": "0",
"is_admin": "0",
"votes": "0",
"id": "1",
"username": "dota2expert.ru",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/a8/a80a9f13fdbfcf02053b73f55a4a0e8596221137_full.jpg",
"steamid": "STEAM_0:1:-24976791",
"steamid64": "76561198031473286",
"trade_link": "https://steamcommunity.com/tradeoffer/new/?partner=71207558&token=LbivBnv-",
"accessToken": "LbivBnv-",
"money": "0.00"
},
{
"updated_at": "2015-11-24 22:28:27",
"created_at": "2015-11-24 22:26:27",
"remember_token": "ZPcNSqC3nGsiuLdWTKp3IzVuqhwmj1RUYADTIOIxCGLqjfSa6V8U14qTIhs4",
"is_moderator": "0",
"is_admin": "0",
"votes": "0",
"id": "7",
"username": "SKONIKS",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d4/d4174b5213f60fc9612229320d633d421b373080_full.jpg",
"steamid": "STEAM_0:0:-4181615",
"steamid64": "76561198073063637",
"trade_link": "",
"accessToken": "",
"money": "275.00"
}
],
"tickets": "478986",
"ticket": 173512,
"round_number": "0.362248050305609551",
"winner": {
"updated_at": "2015-11-24 22:42:37",
"id": "7",
"username": "SKONIKS",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d4/d4174b5213f60fc9612229320d633d421b373080_full.jpg",
"steamid": "STEAM_0:0:-4181615",
"steamid64": "76561198073063637",
"money": 4370,
"votes": "0",
"created_at": "2015-11-24 22:26:27"
},
"game": {
"winner": {
"updated_at": "2015-11-24 22:42:37",
"id": "7",
"username": "SKONIKS",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d4/d4174b5213f60fc9612229320d633d421b373080_full.jpg",
"steamid": "STEAM_0:0:-4181615",
"steamid64": "76561198073063637",
"money": 4370,
"votes": "0",
"created_at": "2015-11-24 22:26:27"
},
"bets": [
{
"user": {
"updated_at": "2015-11-24 22:25:59",
"id": "1",
"username": "dota2expert.ru",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/a8/a80a9f13fdbfcf02053b73f55a4a0e8596221137_full.jpg",
"steamid": "STEAM_0:1:-24976791",
"steamid64": "76561198031473286",
"money": "0.00",
"votes": "0",
"created_at": "2015-11-24 14:56:20"
},
"updated_at": "2015-11-24 21:43:38",
"created_at": "2015-11-24 21:43:38",
"id": "5",
"user_id": "1",
"game_id": "2",
"items": "[{\"name\":\"Inscribed Crescent Bow\",\"market_hash_name\":\"Inscribed Crescent Bow\",\"classid\":\"503011467\",\"rarity\":\"mythical\",\"price\":\"62.85\"}]",
"itemsCount": "1",
"price": "62.85",
"from": "0",
"to": "6284"
},
{
"user": {
"updated_at": "2015-11-24 22:25:59",
"id": "1",
"username": "dota2expert.ru",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/a8/a80a9f13fdbfcf02053b73f55a4a0e8596221137_full.jpg",
"steamid": "STEAM_0:1:-24976791",
"steamid64": "76561198031473286",
"money": "0.00",
"votes": "0",
"created_at": "2015-11-24 14:56:20"
},
"updated_at": "2015-11-24 21:50:23",
"created_at": "2015-11-24 21:50:23",
"id": "6",
"user_id": "1",
"game_id": "2",
"items": "[{\"name\":\"Talon of the Scarlet Raven\",\"market_hash_name\":\"Talon of the Scarlet Raven\",\"classid\":\"217224920\",\"rarity\":\"uncommon\",\"price\":\"2.02\"}]",
"itemsCount": "1",
"price": "2.02",
"from": "6285",
"to": "6486"
},
{
"user": {
"updated_at": "2015-11-24 22:28:27",
"id": "7",
"username": "SKONIKS",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d4/d4174b5213f60fc9612229320d633d421b373080_full.jpg",
"steamid": "STEAM_0:0:-4181615",
"steamid64": "76561198073063637",
"money": "275.00",
"votes": "0",
"created_at": "2015-11-24 22:26:27"
},
"updated_at": "2015-11-24 22:28:18",
"created_at": "2015-11-24 22:28:18",
"id": "7",
"user_id": "7",
"game_id": "2",
"items": "[{\"id\":\"1\",\"name\":\"\\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u043d\\u0430 315 \\u0440\\u0443\\u0431\",\"img\":\"assets\\/img\\/tickets\\/card_1.png\",\"price\":\"315.00\"}]",
"itemsCount": "1",
"price": "315.00",
"from": "6487",
"to": "37986"
},
{
"user": {
"updated_at": "2015-11-24 22:28:27",
"id": "7",
"username": "SKONIKS",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d4/d4174b5213f60fc9612229320d633d421b373080_full.jpg",
"steamid": "STEAM_0:0:-4181615",
"steamid64": "76561198073063637",
"money": "275.00",
"votes": "0",
"created_at": "2015-11-24 22:26:27"
},
"updated_at": "2015-11-24 22:28:19",
"created_at": "2015-11-24 22:28:19",
"id": "8",
"user_id": "7",
"game_id": "2",
"items": "[{\"id\":\"1\",\"name\":\"\\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u043d\\u0430 315 \\u0440\\u0443\\u0431\",\"img\":\"assets\\/img\\/tickets\\/card_1.png\",\"price\":\"315.00\"}]",
"itemsCount": "1",
"price": "315.00",
"from": "37987",
"to": "69486"
},
{
"user": {
"updated_at": "2015-11-24 22:28:27",
"id": "7",
"username": "SKONIKS",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d4/d4174b5213f60fc9612229320d633d421b373080_full.jpg",
"steamid": "STEAM_0:0:-4181615",
"steamid64": "76561198073063637",
"money": "275.00",
"votes": "0",
"created_at": "2015-11-24 22:26:27"
},
"updated_at": "2015-11-24 22:28:21",
"created_at": "2015-11-24 22:28:21",
"id": "9",
"user_id": "7",
"game_id": "2",
"items": "[{\"id\":\"1\",\"name\":\"\\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u043d\\u0430 315 \\u0440\\u0443\\u0431\",\"img\":\"assets\\/img\\/tickets\\/card_1.png\",\"price\":\"315.00\"}]",
"itemsCount": "1",
"price": "315.00",
"from": "69487",
"to": "100986"
},
{
"user": {
"updated_at": "2015-11-24 22:28:27",
"id": "7",
"username": "SKONIKS",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d4/d4174b5213f60fc9612229320d633d421b373080_full.jpg",
"steamid": "STEAM_0:0:-4181615",
"steamid64": "76561198073063637",
"money": "275.00",
"votes": "0",
"created_at": "2015-11-24 22:26:27"
},
"updated_at": "2015-11-24 22:28:25",
"created_at": "2015-11-24 22:28:25",
"id": "10",
"user_id": "7",
"game_id": "2",
"items": "[{\"id\":\"4\",\"name\":\"\\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u043d\\u0430 3150 \\u0440\\u0443\\u0431\",\"img\":\"assets\\/img\\/tickets\\/card_4.png\",\"price\":\"3150.00\"}]",
"itemsCount": "1",
"price": "3150.00",
"from": "100987",
"to": "415986"
},
{
"user": {
"updated_at": "2015-11-24 22:28:27",
"id": "7",
"username": "SKONIKS",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d4/d4174b5213f60fc9612229320d633d421b373080_full.jpg",
"steamid": "STEAM_0:0:-4181615",
"steamid64": "76561198073063637",
"money": "275.00",
"votes": "0",
"created_at": "2015-11-24 22:26:27"
},
"updated_at": "2015-11-24 22:28:26",
"created_at": "2015-11-24 22:28:26",
"id": "11",
"user_id": "7",
"game_id": "2",
"items": "[{\"id\":\"1\",\"name\":\"\\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u043d\\u0430 315 \\u0440\\u0443\\u0431\",\"img\":\"assets\\/img\\/tickets\\/card_1.png\",\"price\":\"315.00\"}]",
"itemsCount": "1",
"price": "315.00",
"from": "415987",
"to": "447486"
},
{
"user": {
"updated_at": "2015-11-24 22:28:27",
"id": "7",
"username": "SKONIKS",
"avatar": "https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/d4/d4174b5213f60fc9612229320d633d421b373080_full.jpg",
"steamid": "STEAM_0:0:-4181615",
"steamid64": "76561198073063637",
"money": "275.00",
"votes": "0",
"created_at": "2015-11-24 22:26:27"
},
"updated_at": "2015-11-24 22:28:27",
"created_at": "2015-11-24 22:28:27",
"id": "12",
"user_id": "7",
"game_id": "2",
"items": "[{\"id\":\"1\",\"name\":\"\\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u043d\\u0430 315 \\u0440\\u0443\\u0431\",\"img\":\"assets\\/img\\/tickets\\/card_1.png\",\"price\":\"315.00\"}]",
"itemsCount": "1",
"price": "315.00",
"from": "447487",
"to": "478986"
}
],
"updated_at": "2015-11-24 22:42:37",
"created_at": "2015-11-24 21:18:41",
"rand_number": "0.362248050305609551",
"status_prize": "0",
"id": "2",
"winner_id": "7",
"status": 3,
"items": "8",
"price": "4789.87",
"started_at": "2015-11-24 22:28:27",
"finished_at": {
"timezone": "Europe/Moscow",
"timezone_type": 3,
"date": "2015-11-24 22:42:37"
},
"won_items": "\n [{\"id\":\"1\",\"name\":\"\\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u043d\\u0430 315 \\u0440\\u0443\\u0431\",\"img\":\"assets\\/img\\/tickets\\/card_1.png\",\"price\":\"315.00\"},\n {\"id\":\"4\",\"name\":\"\\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u043d\\u0430 3150 \\u0440\\u0443\\u0431\",\"img\":\"assets\\/img\\/tickets\\/card_4.png\",\"price\":\"3150.00\"},{\"id\":\"1\",\"name\":\"\\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u043d\\u0430 315 \\u0440\\u0443\\u0431\",\"img\":\"assets\\/img\\/tickets\\/card_1.png\",\"price\":\"315.00\"},{\"id\":\"1\",\"name\":\"\\u041a\\u0430\\u0440\\u0442\\u043e\\u0447\\u043a\\u0430 \\u043d\\u0430 315 \\u0440\\u0443\\u0431\",\"img\":\"assets\\/img\\/tickets\\/card_1.png\",\"price\":\"315.00\"}]"
}
}
where you can simply found part named "users" but data.users is empty! (underfined). Can you help me with it?
You might need to use data = JSON.parse(data);, before accessing data.users? It's hard to tell from your example.

Categories

Resources