Please take a look at this fiddle
How can I use slice in the loop to make it return results starting from a specific index?
The JSON file:
[
{
"title": "A",
"link": "google.com",
"image": "image.com",
"price": "$1295.00",
"brand": "ABC",
"color": "Black",
"material": "Rubber"
}
]
I want it to return results starting from brand:
brand - ABC
color - Black
material - Rubber
I don't know where to put .slice(4) in the loop. I got undefined error using
$.each(value.slice(4),function(key, value)
Here's the code:
JS:
$.ajax({
url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%20%3D%22http%3A%2F%2Fgoo.gl%2FaZgYDB%22&format=json&diagnostics=true&callback=",
success: function (data) {
var item_html="";
$(data.query.results.json).each(function(key, value) {
$.each(value,function(key, value){
item_html += '<h3>'+key+' - '+value+'</h3>';
});
});
$('#area').append(item_html);
}
});
Use a separate array of property names, so you can slice it and get the names in a guaranteed order.
var props = [
"title",
"link",
"image",
"price",
"brand",
"color",
"material"
];
$.ajax({
url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%20%3D%22http%3A%2F%2Fgoo.gl%2FaZgYDB%22&format=json&diagnostics=true&callback=",
dataType: 'json',
success: function (data) {
var item_html="";
var propslice = props.slice(4);
$.each(data.query.results.json, function(i, obj) {
$.each(propslice, function(i, key) {
value = obj[key];
item_html += '<h3>'+key+' - '+value+'</h3>';
});
});
$('#area').append(item_html);
}
});
If there are a small number of properties you want to skip, you can make a list of them in an object, and test against that list:
var excluded_props = {
title: true,
link: true,
image: true,
price: true
};
$.ajax({
url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%20%3D%22http%3A%2F%2Fgoo.gl%2FaZgYDB%22&format=json&diagnostics=true&callback=",
dataType: 'json',
success: function (data) {
var item_html="";
$.each(data.query.results.json, function(i, obj) {
$.each(obj, function(key, value) {
if (!excluded_props[key]) {
value = obj[key];
item_html += '<h3>'+key+' - '+value+'</h3>';
}
});
});
$('#area').append(item_html);
}
});
What you're asking for isn't possible with an object. Objects in Javascript are not ordered, only arrays. You have a few options:
Refactor your object to be an array
Refactor your object so that each key has a new key for order*
loop through each property of the object, placing it into an array (no guaranteed order!) and then looping through the array.
*Example:
[
{
"title": {
"value" : "A",
"order" : 4
},
"link": {
"value" : "google.com",
"order" : 5
...
}
]
Related
In the controller I need to receive two parameters (detail and test), one is a List of a custom objects, the other is a string, I'm able two pass only one parameter (list of objects) when pass both I receive null values in the controller.
Resulting Json to controller:
[{
"detail": [{
"tag": "PIC330_620%2F_.PV_Out%23Value",
"color": "%2331c63e"
}, {
"tag": "A330_10%2F_.FbkFwdOut%23Value",
"color": "%238edeed"
}, {
"tag": "TIC330_603%2F_.PV_Out%23Value",
"color": "%23e8ea62"
}, {
"tag": "TI330_600%2F_.PV_Out%23Value",
"color": "%23f7cbb4"
}, {
"tag": "TIC311_602%2F_.MV%23Value",
"color": "%23ef935d"
}, {
"tag": "TIC311_602%2F_.PV_Out%23Value",
"color": "%23f28a9b"
}, {
"tag": "TIC310_600%2F_.MV%23Value",
"color": "%2385f968"
}, {
"tag": "TIC310_605%2F_.PV_Out%23Value",
"color": "%2308d687"
}],
"test": "lolo"
}]
//Generate list of objects
function getViewDetail() {
var details = [];
var tag;
var color;
var detail;
$('.tagContainer').each(function (i, obj) {
tag = $(this).find('.tag_label').text();
color = $(this).children('.colorpicker').val();
detail = { tag: encodeURIComponent(tag), color: encodeURIComponent(color) };
details.push(detail);
});
return details;
}
// Call Ajax
function sendParameters(){
var details = getViewDetail();
var list = [];
list.push({ detail: details, test: 'lolo' });
list = JSON.stringify(list);
console.log(list);
jQuery.ajax({
url: '#Url.Action("SaveView", "Batch")',
async: false,
data: list,
contentType: 'application/json',
dataType: 'json',
type: 'POST',
success: function (result) {
if (!result.success) {
showErrorMessage(result.title, result.message);
}
else {
showSuccessMessage(result.title, result.message);
}
}
});
}
//In the controller (abbreviated)
public JsonResult SaveView(IEnumerable<Detail> detail, string test)
{}
//class
public class Detail
{
string _tag;
string _color;
public string tag { get => _tag; set => _tag = value; }
public string color { get => _color; set => _color = value; }
}
Try this:
data = { detail: details, test: 'lolo' };
data = JSON.stringify(data);
And send it through ajax:
data: data,
Your action's signature is expecting two parameters, detail and test. What you were passing was a list of object with two properties detail and test on it. Got the difference ? In short your posting object should be like:
{
"detail": [...],
"test": "lolo"
}
I have a JSON file that contains object like that:
{
"status": "ok",
"feed": {
},
"items": [
{
"title": "",
"author": ""
},
{
"title": "",
"author": ""
},
{
"title": "",
"author": ""
}
]
}
I want to loop through the items and get each item data like title and author.
The code I tried:
var json = $.getJSON({'url':"filejson" , 'async': false});
json = JSON.parse(json.responseText);
$.each(json, function(index , item) {
console.log(json[index]);
});
It would appear the sync version of it acts in a weird way,
var json = JSON.parse($.getJSON({'url':"filejson" , 'async': false}).responseText);
let items = json.items;
items.forEach(item=>{
console.log(item.title, item.author);
})
As a sidenote, you should really not be using async: false.
Object.keys(json).forEach(function(key) {
console.log(json[key])
})
// or if supported/polyfilled
Object.values(json).forEach(function(value) {
console.log(value)
})
Use map():
data.map(d => ({title: d.title, author: d.author}));
Please use the following code
var json = $.getJSON({'url':"filejson" , 'async': false});
json = JSON.parse(json.responseText);
$.each(json.items, function(key , value) {
console.log(value['title'] + " : "+ value['author']);
});
I want to bind json data returned by API to dropdownlist.
but unable to fetch value id and name.
Json Format :
{
"categories": [
{
"categories": {
"id": 1,
"name": "CatOne"
}
},
{
"categories": {
"id": 2,
"name": "CatTwo"
}
}
]
}
I am returning JsonResult, using
return Json(responseData, JsonRequestBehavior.AllowGet);
and in Jquery call ,I am using
$.ajax({
type: "POST",
url: "/Home/City",
contentType: "application/json; charset=utf-8",
global: false,
async: false,
dataType: "json",
success: function (jsonObj) {
var listItems = "";
//here I want to get id and name
});
}
});
You can populate dropdown from your json like following.
var json = {
"categories": [
{ "categories": { "id": 1, "name": "CatOne" } },
{ "categories": { "id": 2, "name": "CatTwo" } }
]
}
$.each(json.categories, function () {
$('select').append('<option value="' + this.categories.id + '">' + this.categories.name + '</option>')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>
You can just stick a break point (or debugger; statement) inside your success callback. Then you can inspect your jsonObj and it'll tell you exactly what you need to know.
In this case, you should be able to iterate on jsonObj.categories, and your id and name properties will be accessible via jsonObject.categories[i].categories.id and jsonObject.categories[i].categories.name
So your success method will look something like:
for(var i = 0; i < jsonObj.categories.length; i++) {
var category = jsonObj.categories[i].categories;
var id = category.id;
var name = category.name;
}
I would also suggest formatting your json differently, as other answers have suggested.
I am trying to pass three products through the shopify ajax api. It sends over the variant id and quantity but not the properties. the code is below. if I add request.properties to the Shopify.addItem function it stops after one item and gives me a pop saying that one item has been added to the cart. It does not add the other two items nor does it redirect. If I remove request.properties from the Shopify.addItem function it adds all three items to the cart but with no properties.
FINAL CODE Revised from #miglio code
var FreeTrial={
data:[],
ini:0,
total:0,
addItem:function(qty,id,properties,callback) {
var params = {quantity:qty,id:id};
if(properties != false){
params.properties = properties;
}
$.ajax({
type: 'POST',
url: '/cart/add.js',
dataType: 'json',
async:false,
data: params,
success: function(){
if(typeof callback === 'function'){
callback();
}
},
error: function(){}
});
},
recursive:function(){
FreeTrial.addItem(FreeTrial.data[FreeTrial.ini].qty,FreeTrial.data[FreeTrial.ini].id,FreeTrial.data[FreeTrial.ini].properties,function(){
//console.log(FreeTrial.data[FreeTrial.ini]);
FreeTrial.ini += 1;
if(FreeTrial.ini < FreeTrial.total){
FreeTrial.recursive();
}else{
//return false;
document.location.href = '/cart';
}
});
},
begin:function(){
/* SET YOUR ARRAY QTY's' ID's*/
FreeTrial.data = [
{
"qty": '1',
"id": 'VARIANT_ID_GOES_HERE',
"properties": false
},
{
"qty": '1',
"id": 'VARIANT_ID_GOES_HERE',
"properties": false
},
{
"qty": '1',
"id": 'VARIANT_ID_GOES_HERE',
"properties": false
},
{
"qty": '1',
"id": 'VARIANT_ID_GOES_HERE',
"properties": false
},
{
"qty": '1',
"id": 'VARIANT_ID_GOES_HERE',
"properties": {
"recurring_price": "200.00",
"shipping_interval_frequency": "30",
"shipping_interval_unit_type": "days",
"subscription_id": "12599"
}
}
];
FreeTrial.total = FreeTrial.data.length;
FreeTrial.recursive();
}
}
FreeTrial.begin();
To add properties I use this function and work fine for me.
addItem=function(qty,id,properties,callback) {
var params = {quantity:qty,id:id};
if(properties != false){
params.properties = properties;
}
$.ajax({
type: 'POST',
url: '/cart/add.js',
dataType: 'json',
data: params,
success: function(){
if(typeof callback === 'function'){
callback();
}
},
error: function(){}
});
}
//Example :
var qty = 1;
var id = 123456;//variant_id
var properties: {
"recurring_price": "12",
"shipping_interval_frequency": "34",
"shipping_interval_unit_type": "56",
"subscription_id": "78"
}
//
addItem(qty,id,properties,function(){
console.log('done');
});
Well, I did this code for multiple items and a save in a gist:
multiple add to cart
Any POST to the endpoint url: '/cart/add.js', can include properties. If the properties are setup correctly, it works like a charm. You can assign as many properties to a variant as you want. Has been working for what, 5 years now? This function has been working for that long at least... no trouble.
addItemWithProperties: function(variant_id, quantity, properties, callback) {
var quantity = quantity || 1;
if(properties) {
var data = properties.join("&")+"&quantity="+quantity+"&id="+variant_id;
} else {
var data = "quantity="+quantity+"&id="+variant_id;
}
var params = {
type: "POST",
url: "/cart/add.js",
data: data,
dataType: "json",
success: function(line_item) {
if((typeof callback) === "function") {
callback(line_item)
} else {
Shopify.onItemAdded(line_item)
}
},
error: function(XMLHttpRequest, textStatus) {
Shopify.api.onError(XMLHttpRequest, textStatus)
}
};
$.ajax(params)
},
edit. I guess you could do the call manually
add to cart
Considering the Shopify.addItem() function is, straight off their API I'm not sure you can simply add a parameter like that.
My guess is that the extra parameter has the effect that the function doesn't run.
My JSON file:
[{"val0":"Paul","val1":"Jake","val2":null,"val3":"Max"},
{"val0":"Sam","val1":"Tina","val2":"Emily","val3":"Hardwell"},
{"val0":"Tom","val1":"Julie","val2":null,"val3":"Adi"}]
I want to create an array in javascript as follows:
var dataSet=[
['Paul','Jake','null','Max'],
['Sam','Tina','Emily','Harwell'],
['Tom','Julie','null','Adi']
];
I tried the following code but it isn’t working. Can anybody please help?
$.getJSON("filename.json", function(data) {
var items = [];
$.each(data, function(key, val) {
items.push(val);
});
// …
});
I’m using this array for display purpose (using DataTables), so, I want to create the array in that format.I'm using the dataSet array for displaying in DataTables as follows:
var dataSet = [
['Paul','Jake','Isha','Mike','null','null','Parth','Tinker'],
['Tina','Michael','null','Blue','Red','','Emily','Mina']
];
$(document).ready(function() {
$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
$('#example').dataTable( {
"data": dataSet,
"columns": [
{ "title": "Name" },
{ "title": "Deadline" },
{ "title": "Additional fees" },
{ "title": "Requirements" },
{ "title": "Field" },
{ "title": "Award" },
{ "title": "Renewable requirements"},
{ "title": "Link" }
]
} );
} );
You get an array of objects, and you want an array of arrays, so convert each object to an array by reading the properties of the object:
var items = [];
$.each( data, function( key, val ) {
items.push([val.val0,val.val1,val.val2,val.val3]);
});
Try this
<script>
$(function() {
$.getJSON("filename.json", function(data) {
var items = [];
$.each(data, function(key, val) {
var tmp = [];
for (var Key in val) {
tmp.push(val[Key]);
}
items.push(tmp);
});
console.log(items);
});
});
A solution without jquery:
var data = [
{ "val0": "Paul", "val1": "Jake", "val2": null, "val3": "Max" },
{ "val0": "Sam", "val1": "Tina", "val2": "Emily", "val3": "Hardwell" },
{ "val0": "Tom", "val1": "Julie", "val2": null, "val3": "Adi" }
],
dataSet = data.reduce(function (r, a) {
var i, a0 = [];
for (i in a) {
a0.push(a[i]);
}
r.push(a0);
return r;
}, []);
document.getElementById('out').innerHTML = JSON.stringify(dataSet, null, 4);
<pre id="out"></pre>
One liner:
var dataSet = rawData.map(function(e){ return Object.keys(e).map(function(i){ return e[i]}); })
Output:
Output as JSON:
Method explanation (from Javascript Reference)
The map() method creates a new array with the results of calling a provided function on every element in this array.
The Object.keys() method returns an array of a given object's own enumerable properties