We Keep Coding

How to get the values inside a nested JSON array

Can someone let me know how can I access the values inside the option_value array? It's an array within another array.
I get the below error with my code:
TypeError: json.option[i].option_value[j] is undefined
My code
$(document).on("click", "[name^='option']", function () {
var value = $(this).val();
var parent_id = $(this)
.attr("name")
.replace(/[^\d.]/g, "");
$.ajax({
url:
"index.php?route=controlller/get_options&parent_id=" +
parent_id +
"&value=" +
value +
"&product_id=<?php echo $product_id; ?>",
type: "get",
dataType: "json",
success: function (json) {
if (json["option"]) {
for (i = 0; i < json["option"].length; i++) {
if (
json["option"][i]["type"] == "radio" ||
json["option"][i]["type"] == "checkbox"
) {
$("#ioption" + json["option"][i]["product_option_id"])
.find("input")
.prop("checked", false);
for (j = 0; j <= json["option"][i]["option_value"].length; j++) {
$("#ioption" + json["option"][i]["product_option_id"])
.find(
"input[value='" +
json["option"][i]["option_value"][j][
"product_option_value_id"
] +
"']"
)
.parent()
.show();
}
}
}
}
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
},
});
});
Below is my JSON result:
{
"option": [
{
"product_option_id": "975",
"option_id": "76",
"name": "Stage",
"type": "image",
"option_value": [
{
"product_option_value_id": "2490",
"option_value_id": "389",
"name": "Level 1",
"price": "\u20ac 2,00"
},
{
"product_option_value_id": "2491",
"option_value_id": "390",
"name": "Level 2",
"price": "\u20ac 3,00"
}
],
"required": "1"
}
]
}
Thanks

I don't have an exact structure of your html, but atleast i can provide a clean solution with some Array.map usage.
You can loop through each object and then you can target HTML element you want to.
Example
result.option.map(opt => {
if (opt.type === 'radio' || opt.type === 'checkbox') {
let optionElement = '#ioption' + opt.option_id;
$(optionElement).find('input').prop('checked', false);
opt.option_value.map(optVal => {
let inputElement = 'input[value=\'' + optVal.product_option_value_id + '\']';
$(optionIdElement).find(inputElement).parent().show();
});
}
});
P.S: Snippet won't run as i've not included result json in the answer!
Hope this will help!

Get value of option_value use this option[0]["option_value"][0]
I just give answer according to display the top json.
And 0 replace using any loop(for / foreach) accoding to your requirment.

group by in jquery with .map()

I have an array where each element has a name and a subsection.
I now want to group those elements by subsection.
Is there a way to do a group by inside a mapping function.
The data looks like:
* 0: "name: Study subSection: Education"
1: "name: Classes subSection: Education"
2: "name: Society subSection: Social”
I want it to appear as
Education
1.Study
2.Classes
Social
1.Society
Here is my code thus far that isn't working. I think it needs a little tweaking to work properly.
let myArray = response.map(item => {
return 'name: ' + item.name + ' subSection: ' + item.subSection;
}
);
let grouppedArray1=_.groupBy(myArray, 'subSection'))

In your case, the Array#map method generates a string array and you are trying to group by subSection property but there is no such property for the string.
You can do something simple using Array#reduce method.
// iterate over the element
let res = response.reduce((obj, item) => {
// define group if not defined(property with subsection name and value as array)
obj[item.subSection] = obj[item.subSection] || [];
// push the value to group
obj[item.subSection].push('name: ' + item.name + ' subSection: ' + item.subSection);
// return the object
return obj;
// set initial value as empty object for result
}, {});
let response = [{
"name": "Study",
subSection: "Education"
}, {
"name": "Classes",
subSection: "Education"
},
{
name: "Society",
subSection: "Social"
}
];
let res = response.reduce((obj, item) => {
obj[item.subSection] = obj[item.subSection] || [];
obj[item.subSection].push('name: ' + item.name + ' subSection: ' + item.subSection);
return obj;
}, {});
console.log(res);
UPDATE : To show them as buttons( combined ), do something like this:
let response = [{
"name": "Study",
subSection: "Education"
}, {
"name": "Classes",
subSection: "Education"
},
{
name: "Society",
subSection: "Social"
}
];
let res = response.reduce((obj, item) => {
obj[item.subSection] = obj[item.subSection] || [];
obj[item.subSection].push(item.name);
return obj;
}, {});
// get values array and iterate
Object.keys(res).forEach(function(k) {
// generate h3 ith subSection value and append
$('#container').append(
$('<h3>', {
text: k,
class : 'title'
})
)
// generate buttons and append
.append(res[k].map(v =>
$('<button>', {
text: v,
class : 'btn btn-default'
})
))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

I need to loop this array

I use ajax to get a array from Economic and i would like to loop though it. The array (sortned):
{
"collection": [
{ "customerNumber": 1, "email": "jo+billing#test.com", "name": "Tester Test" }
, { "customerNumber": 2, "name": "Demo Name" }
]
, "metaData": { "more array" }
, "pagination": { "more array"}
, "self": "some url"
}
The jquery I think I need to use but give me a error: (TypeError: cannot use 'in' operator to search for 'length' in '{
"collectio...')
$.ajax({}).always(function (data) {
var options = $('#example').attr('options');
var substr = JSON.stringify(data, null, 4);
//-----------loop part------------
$.each((substr), function(i, val1) {
$.each(val1.customerNumber, function(a, val3) {
var CustInfo = val1[a]["name"] + " " + val1[a]["email"];
options[options.length] = new Option(CustInfo, val1[a]["customerNumber"]);
});
});
});
I am only interested in the values in "collection" and I want a select box with the customers info in it. like this:
<select>
<option value="1">Tester Test jo+billing#test.com</option>
<option value="2">Demo Name</option>
</select>

First, you don't have to use JSON.stringify() that will convert your response object data to a string that you can't loop through the attributes.
I am only interested in the values in "collection".
Then no need for two loops just use the data.collection :
$.ajax({}).always(function (data) {
var options = $('#example').attr('options');
$.each((data.collection), function(i, obj) {
var CustInfo = obj["name"] + " " + obj["email"];
options[options.length] = new Option(CustInfo, obj["customerNumber"]);
});
});
data = {
"collection": [{
"customerNumber": 1,
"email": "jo+billing#test.com",
"name": "Tester Test"
}, {
"customerNumber": 2,
"name": "Demo Name"
}],
"metaData": [],
"pagination": [],
"self": "some url"
};
$.each((data.collection), function(i, val1) {
var CustInfo = val1["name"] + " " + val1["email"];
console.log(CustInfo, val1["customerNumber"]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Refresh datatables data from values from array list

I have 2 HTML in which I'm just loading data with json then applying jquery datables on them. What I need now is to refresh the data but with new parameters.
example.
JSON:
[
{"name":"jon","sales":"100","set":"SET1"},
{"name":"charlie","sales":"500","set":"SET1"},
{"name":"jon","sales":"350","set":"SET2"},
{"name":"charlie","sales":"300","set":"SET2"}]
<table id="SET1" class="display compact">
<tr><th>Name</th><th>Sales</th>
</table>
<table id="SET2" class="display compact">
<tr><th>Name</th><th>Sales</th>
</table>
JS:
var uri = 'api/schedules';
$(document).ready(function () {
//function to refresh data
//loop thru every dept and query new data.
(function () {
var departments = ['Accounting', 'Sales', 'Marketing']
var idx = 0;
var len = departments.length;
function doNext() {
var entry = departments[idx];
console.log(idx + ":" + entry);
GetData(entry)
idx++;
if (idx < len) {
// Don't do anything special
} else {
// Reset the counter
idx = 0;
}
setTimeout(doNext, 10000);
}
doNext();
}());//end of function
}); //End Jquery Ready
function GetData(dept) {
$.getJSON(uri, { department: dept })
.done(function (data) {
// On success, 'data' contains a list of products.
var tr;
$.each(data, function (key, item) {
tr.append("<td >" + item.NAME + "</td>");
tr.append("<td>" + item.SALES+ "</td>");
tr.append("</tr>");
//loading the data to respective table set
$("#" + item.SET).append(tr);
});
})
}
The function to load the data works. I can see the new data every minute. Initializing the datatables works when is just ran manually.
But if I call the GetData(dept) only the first 'Department' gets loaded. at the second department I get errors from datatable that it can't load the data to the table.
I tried clearing the table with table.empty() aldo table.destroy() and redraw
but I have not been able to make it work.
How do I refresh and redraw the data on the datatables?

The issue is that you're not using DataTables to add your data. Rather, you're adding rows manually, and that is inefficient and means DataTables won't know about them, so sorting, searching etc. won't work as expected. Rather than do that use rows.add(). This JSFiddle seems to be doing what you need, though I'm having to fake the ajax, so you'll need to put the proper getJSON() back in:
let columns = [{
"title": "Name",
"data": "name"
}, {
"title": "Sales",
"data": "sales"
}];
let SET1 = $("#SET1").DataTable({
"columns": columns
});
let SET2 = $("#SET2").DataTable({
"columns": columns
});
let response = [{
"name": "jon",
"sales": "100",
"set": "SET1"
}, {
"name": "charlie",
"sales": "500",
"set": "SET1"
}, {
"name": "jon",
"sales": "350",
"set": "SET2"
}, {
"name": "charlie",
"sales": "300",
"set": "SET2"
}];
let GetData = (dept) => {
$.ajax({
"type": "POST",
"dataType": "json",
"url": "/echo/json/",
"data": {
"json": JSON.stringify(response)
},
"success": (data) => {
console.log(data);
SET1.clear().rows.add(data.filter(x => x.set === "SET1")).draw();
SET2.clear().rows.add(data.filter(x => x.set === "SET2")).draw();
}
});
}
let departments = [
'Accounting',
'Sales',
'Marketing'
];
let idx = 0;
let doNext = () => {
let entry = departments[idx];
console.log(idx + ":" + entry);
GetData(entry)
idx++;
if (idx === (departments.length)) {
idx = 0;
}
setTimeout(doNext, 10000);
}
doNext();
Also, your HTML table creation can be simplified:
<table id="SET1" class="display compact"></table>
<table id="SET2" class="display compact"></table>
Hope that helps.

Search from 7 inputs criteria to look into a json file

I'll try to explain.
I have a form with 7 inputs (Age, country, city,...) and in a JSON file i have many people. I need to search into that json file with all the criteria in the form. For example Spain&25years old.
I have the inputs data in an array, but i'm not able or don't know how to compare that criteria and retrieve info from JSON file.
Code below:
<!-- Google Maps -->
<script src="assets/js/jquery.ui.map.full.min.js"></script>
<script src="assets/js/jquery.ui.map.extensions.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#mapa').gmap({'callback': function() {
var self = this;
parsejson = function(arrayvalues){
$.getJSON( 'mapa.json', function(data) {
$.each(arrayvalues, function(x, val) {
if (val.value !== "") {
console.log(val.value);
$.each( data.markers, function(i, marker) {
console.log('marker ' + marker);
// PROBLEM IS HERE, DON'T KNOW HOW TO SOLVE
});
};
});
// Draw markers in map
// $.each( data.markers, function(i, marker) {
// self.addMarker({
// 'position': new google.maps.LatLng(marker.latitude, marker.longitude),
// 'bounds': false
// }).click(function() {
// self.openInfoWindow({'content': marker.content }, this);
// });
// });
});
};
self.getCurrentPosition(function(position, status) {
if ( status === 'OK' ) {
var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
self.addMarker({'position': clientPosition, 'bounds': false});
self.option('center', clientPosition);
self.option('zoom', 12);
self.addShape('Circle', {
'strokeColor': "#008595",
'strokeOpacity': 0.8,
'strokeWeight': 2,
'fillColor': "#008595",
'fillOpacity': 0.35,
'center': clientPosition,
'radius': 500,
'clickable': false
});
}
else {
console.log("else");
var clientPosition = new google.maps.LatLng(40.463667, -3.74922);
self.option('center', clientPosition);
self.option('zoom', 4);
}
});
}});
});
// Search form actions
$('#searcher-form').submit(function(e) {
e.preventDefault();
var $inputs = $(this).serializeArray();
parsejson($inputs);
});
</script>
<!-- End of Google Maps -->
The JSON file look like this:
{"markers":[
{
"fromcountry":"Spain",
"fromcity":"San Cristóbal de la Laguna",
"livecountry":"Spain",
"livecity":"San Cristóbal de la Laguna",
"age":25,
"profession":"Diseñador"
"title":"La Laguna",
"latitude":28.469294910391532,
"longitude":-16.329975128173828,
"content":"Mooola"
},
{
"fromcountry":"Spain",
"fromcity":"Madrid",
"livecountry":"Spain",
"livecity":"Santa Crus de Tenerife",
"age":30,
"profession":"Programador"
"title":"Los Majuelos",
"latitude":28.44038127509586,
"longitude":-16.311674416065216,
"content":"Mooola"
}
]}
The array from the form gives me back this:
Object {name: "regsearchcountry", value: "whatever"}
Object {name: "regsearchcity", value: "whatever"}
Object {name: "regsearchlivecountry", value: ""}
Object {name: "regsearchlivecity", value: "whatever"}
Object {name: "regsearchagefrom", value: ""}
Object {name: "regsearchageto", value: "whatever"}
Object {name: "regsearchprofession", value: ""}
And I need to comare the form fields with some fields in the JSON, not all data. So i need to compare all those form fields with the JSON, and in case one is empty, compare the rest.

You simply need to loop through the records in the json file, and check each record against your input record.
Within each iteration of the loop you need to do another loop over the input record fields, comparing them to the current record one property at a time.
If you are looking for an exact match, you can speed things up by continuing on to the next record as soon as one field does not match.
var records = [
{ name : 'bob', age : 22 },
{ name : 'john', age : 32 }
/* lots of other records */
];
var input = {
name : 'john',
age : 32
};
var compare, match, result;
// loop through all the records
for(var i = 0, len = records.length; i < len; i++) {
compare = records[i];
match = true;
// loop through each property (name, age etc)
for(prop in input) {
// as soon as something is wrong, break out and try the next one
if(input[prop] !== compare[prop]) {
match = false;
break;
}
}
// if we got through without anything being wrong, we found the result!
if(match) {
result = compare;
break;
}
}
// result should be set to a matching result

Use linq.js
Here is the sample copypasted from http://linqjs.codeplex.com/
var jsonArray = [
{ "user": { "id": 100, "screen_name": "d_linq" }, "text": "to objects" },
{ "user": { "id": 130, "screen_name": "c_bill" }, "text": "g" },
{ "user": { "id": 155, "screen_name": "b_mskk" }, "text": "kabushiki kaisha" },
{ "user": { "id": 301, "screen_name": "a_xbox" }, "text": "halo reach" }
]
// ["b_mskk:kabushiki kaisha", "c_bill:g", "d_linq:to objects"]
var queryResult = Enumerable.From(jsonArray)
.Where(function (x) { return x.user.id < 200 })
.OrderBy(function (x) { return x.user.screen_name })
.Select(function (x) { return x.user.screen_name + ':' + x.text })
.ToArray();
// shortcut! string lambda selector
var queryResult2 = Enumerable.From(jsonArray)
.Where("$.user.id < 200")
.OrderBy("$.user.screen_name")
.Select("$.user.screen_name + ':' + $.text")
.ToArray();