replacing or managing json data from ajax request - javascript

I've got a page that makes an ajax request and gets data back in json format.
I needed to sort this data before adding it to the DOM, so it is put into an object with the following code
function(data) {
var birthDates = {};
var uids = {};
$.each(data.users, function() {
if (!uids[this.uid]) {
uids[this.uid] = [];
uids[this.uid].push(this);
}
if (!birthDates[this.birthDate])
birthDates[this.birthDate] = [];
birthDates[this.birthDate].push(this);
});
for (var d in birthDates) {
var date = d;
$('div#holdDates').append('<ul class="dayList" id="' + date + '"><li class="date" >' + date + '</li></ul>');
$.each(birthDates[date], function() {
$('ul#' + date).append('<li class="show" id="' + this.uid + '">' + this.name + '</li>');
});
}
$('li.show').click(function() {
var getuid = $(this).attr('id');
$showArr = uids[getuid];
// now I can get the extended data about the user
this all works great when the page is loaded for the first time, however I'm running into two problems, both as a result of making a second ajax request
1) if i make the same ajax request (giving the same variables, so the same data comes back again), then the data gets added to the newly created objects (uids, and birthDates) twice, and I can't figure out how to keep that as unique
2) sometimes (and i haven't been able to debug to figure out why) i don't get any of the extended user data from uids object. (the stuff I do after the li click
Any ideas? Am i doing this efficiently?
I find it strange that you can't empty an object that you've created, but apparently everything I'm reading says that you can't.
Addition
well, after posting this, the next thing I was doing was building a dynamic tag cloud which is dependent on the returned json.
so, now I run into the same problem again. I need to tag-cloud to be new after each request. I really hope there is a way to get rid of 'legacy' data in javascript.
Thanks,
Pete

Everything declared with the var keyword inside of your function(data) will be created anew each time the function is called.
What's the symptom of your problem? Have you actually looked at the value of the uids variable in firebug and seen that items are being duplicated, or do you just see your dates/names getting doubled up on the page?
My suspicion is that this is a result of not clearing the DOM elements that you are calling .append() on before you display your results.
Try adding to the beginning of the function:
$('div#holdDates').empty();
as well as to your date display loop:
$('ul#'+date).empty();
and for good measure, at the beginning of function:
$('li.show').unbind('click');

Related

How to access and use multiple data from json object? Do I need to make an array?

I am a beginner and using $.get to retrieve data from a rest API such as:
[{"id":"1","url":"http:\/\/123.456.78.910\/workforce\/images\/item1.jpg","price":"99","description":"Mobile Phone"},
{"id":"2","url":"http:\/\/123.456.78.910\/workforce\/images\/item2.jpg","price":"98","description":"Laptop"}
{"id":"3","url":"http:\/\/123.456.78.910\/workforce\/images\/item3.jpg","price":"92","description":"Console"}] }
$.get('http://xxxxxxxxxxx,
function (data) {
var obj = $.parseJSON(data);
So from what I understand I have retrieved the data from the REST API and parsed it so it is stored in a variable called obj.
My question is, how do I access and use each unique record in the obj variable?
Each record has it's own picture (item1.jpg, item2.jpg etc).
Whem my app loads I want it to show the item1.jpg image, and I want to be able to navigate to the other item pictures using buttons (previous / next).
I also want the description and price to be displayed underneath in some text input fields.
What I have figured so far is that I should:
Iterate through the obj variable, and store each record into an array.
Upon app initialisation I can set the default value for the image placeholder to array[index0].url, and set the description and price fields.
I can then set the previous and next buttons to array[currentIndex-1] or array[currentIndex+1].
Would this be the best way to do it?
Or can I just do this without using an array and manipulate the obj.data directly?
Thanks!!!
I may not be understanding what exactly what you want to do but I think I have the gist. If you just want to show the picture then the array of just images probably wouldn't be a bad idea. However, it looks like the Jason you're getting is already in an array. You can just use array index notation to get to what you want.
ie)
var arr = //your json response ;
var current = 0; //sets currently displayed object to the first in the array
var setCurrent = function () {
var image = arr[current]["url"];
}
You can then modify current however you want (on click on arrow iterate up/down, etc) then call the setCurrent function to set your image the the one you want. Hope that helps!
You can use the response you have from $.get() directly.
It is an array of objects.
You can use it like this:
console.log(data[2].description);
// outputs: "Console"
I've made a CodePen demo where it has a 4th object with a real image url to show you how to use the url info...
EDIT
Just in case you wouldn't know this:
You can use the response inside the scope of the $.get() callback...
You can not use it straith after the $.get() outside the callback since $.get() is asynchronous.
You can use it in some other handler wich will happen after the response is received.
var getResponse;
$.get('http://xxxxxxxxxxx', function (data) {
getResponse = data;
console.log(data[2].description);
// outputs: "Console"
console.log(getResponse[2].description);
// outputs: "Console"
});
console.log(getResponse[2].description);
// outputs: "Undefined"
// But since this handler will be triggered long after the response is obtained:
$("#somebutton").click(function(){
console.log(getResponse[2].description);
// outputs: "console"
});
In order for your page javascript to be able to access the data retrieved from your ajax request, you'll need to assign it to some variable which exists outside the callback function.
You will need to wait until the ajax request has been processed before you can read the array. So you might want to set the actual default image to be something that doesn't rely on the ajax request (a local image).
Here's a simple approach
// fake testing ajax func
function fakeget (url, callback) {
setTimeout(callback(JSON.stringify([
{"id":"1","url":"http:\/\/123.456.78.910\/workforce\/images\/item1.jpg","price":"99","description":"Mobile Phone"}, {"id":"2","url":"http:\/\/123.456.78.910\/workforce\/images\/item2.jpg","price":"98","description":"Laptop"},
{"id":"3","url":"http:\/\/123.456.78.910\/workforce\/images\/item3.jpg","price":"92","description":"Console"}
])), 1000);
}
// real code starts here
// global variables for ajax callback and setImg func to update
var imageData, currentImg;
// change this back to $.get for real
fakeget('http://xxxxxxxxxxx',
function (data) {
imageData = $.parseJSON(data);
setImg(0);
}
);
function setImg(index) {
// turns negative indices into expected "wraparound" index
currentImg = (index % imageData.length + imageData.length) % imageData.length;
var r = imageData[currentImg];
$("#theImg").attr('src', r.url);
$('#theDescription').text(r.price + " " + r.description);
}
$("#prev").click(function () {
setImg(currentImg - 1);
});
$("#next").click(function () {
setImg(currentImg + 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img id='theImg' src='somedefault.jpg'>
<div id='theDescription'></div>
</div>
<button id='prev'>Prev</button>
<button id='next'>Next</button>
Few observations :
Your JSON Object is not a valid JSON.
No need to parse it again your data is already a JSON Object.
Working fiddle
var data = [{"id":"1","url":"http:\/\/123.456.78.910\/workforce\/images\/item1.jpg","price":"99","description":"Mobile Phone"},{"id":"2","url":"http:\/\/123.456.78.910\/workforce\/images\/item2.jpg","price":"98","description":"Laptop"}, {"id":"3","url":"http:\/\/123.456.78.910\/workforce\/images\/item3.jpg","price":"92","description":"Console"}];
for (var i in data) {
var imgUrl = data[i].url;
console.log(imgUrl);
}

Ajax call in "for" loops skips odd/even iterations

If I am here asking it is because we are stuck on something that we do not know how to solve. I must admit, we already searched in StackOverflow and search engines about a solution.. but we didn't manage to implement it / solve the problem.
I am trying to create a JavaScript function that:
detects in my html page all the occurrences of an html tag: <alias>
replaces its content with the result of an Ajax call (sending the
content of the tag to the Ajax.php page) + localStorage management
at the end unwraps it from <alias> tag and leaves the content returned from ajax call
the only problem is that in both cases it skips some iterations.
We have made some researches and it seems that the "problem" is that Ajax is asynchronous, so it does not wait for the response before going on with the process. We even saw that "async: false" is not a good solution.
I leave the part of my script that is interested with some brief descriptions
// includes an icon in the page to display the correct change
function multilingual(msg,i) {
// code
}
// function to make an ajax call or a "cache call" if value is in localStorage for a variable
function sendRequest(o) {
console.log(o.variab+': running sendRequest function');
// check if value for that variable is stored and if stored for more than 1 hour
if(window.localStorage && window.localStorage.getItem(o.variab) && window.localStorage.getItem(o.variab+'_exp') > +new Date - 60*60*1000) {
console.log(o.variab+': value from localStorage');
// replace <alias> content with cached value
var cached = window.localStorage.getItem(o.variab);
elements[o.counter].innerHTML = cached;
// including icon for multilingual post
console.log(o.variab+': calling multilingual function');
multilingual(window.localStorage.getItem(o.variab),o.counter);
} else {
console.log(o.variab+': starting ajax call');
// not stored yet or older than a month
console.log('variable='+o.variab+'&api_key='+o.api_key+'&lang='+o.language);
$.ajax({
type: 'POST',
url: my_ajax_url,
data: 'variable='+o.variab+'&api_key='+o.api_key+'&lang='+o.language,
success: function(msg){
// ajax call, storing new value and expiration + replace <alias> inner html with new value
window.localStorage.setItem(o.variab, msg);
var content = window.localStorage.getItem(o.variab);
window.localStorage.setItem(o.variab+'_exp', +new Date);
console.log(o.variab+': replacement from ajax call');
elements[o.counter].innerHTML = content;
// including icon for multilingual post
console.log(o.variab+': calling multilingual function');
multilingual(msg,o.counter);
},
error: function(msg){
console.warn('an error occured during ajax call');
}
});
}
};
// loop for each <alias> element found
//initial settings
var elements = document.body.getElementsByTagName('alias'),
elem_n = elements.length,
counter = 0;
var i = 0;
for(; i < elem_n;i++) {
var flag = 0;
console.info('var i='+i+' - Now working on '+elements[i].innerHTML);
sendRequest({
variab : elements[i].innerHTML,
api_key : settings.api_key,
language : default_lang,
counter : i
});
$(elements[i]).contents().unwrap().parent();
console.log(elements[i].innerHTML+': wrap removed');
}
I hope that some of you may provide me some valid solutions and/or examples, because we are stuck on this problem :(
From our test, when the value is from cache, the 1st/3rd/5th ... values are replaced correctly
when the value is from ajax the 2nd/4th .. values are replaced
Thanks in advance for your help :)
Your elements array is a live NodeList. When you unwrap things in those <alias> tags, the element disappears from the list. So, you're looking at element 0, and you do the ajax call, and then you get rid of the <alias> tag around the contents. At that instant, element[0] becomes what used to be element[1]. However, your loop increments i, so you skip the new element[0].
There's no reason to use .getElementsByTagName() anyway; you're using jQuery, so use it consistently:
var elements = $("alias");
That'll give you a jQuery object that will (mostly) work like an array, so the rest of your code won't have to change much, if at all.
To solve issues like this in the past, I've done something like the code below, you actually send the target along with the function running the AJAX call, and don't use any global variables because those may change as the for loop runs. Try passing in everything you'll use in the parameters of the function, including the target like I've done:
function loadContent(target, info) {
//ajax call
//on success replace target with new data;
}
$('alias').each(function(){
loadContent($(this), info)
});

javascript: executing order of function - nested function return value before function finishes processing?

I'm just learning JavaScript, and it seems there is a lot of information for folks like me about the way it processes functions asynchronously.
While I am still trying to get my head around this, I find myself struggling with some sharepoint csom because of what I am trying to do. Perhaps I am just going about this completely wrong, but as I said, just learning.
Trying to use SP CSOM to get list data like this:
getGridData() {
var gridURL = "https://mySite/ListData.svc/Projects";
var request = new Sys.Net.WebRequest();
request.set_httpVerb("GET");
request.set_url(gridURL);
request.get_headers()["Accept"] = "application/json";
request.add_completed(onCompletedProjectCallback);
request.invoke();
}
onCompletedProjectCallback(response, eventArgs) {
var getProject = eval("(" + response.get_responseData() + ")");
var buildMarkUp = '';
for (var i = 0; i < getProject.d.results.length; i++) {
buildMarkUp += "<div>" + getProject.d.results[i].ProjectName + "</div>";
}
}
This works great.
I do know about other methods such as spservices, but I like this as it seems to be faster for me and returns JSON which is preferable.
What happens when I want to use the ProjectID in the above to call another function and pass the id in order to get related values from a list.
However, I want to build the buildMarkUp string in order before it gets appended to the DOM(oh yeah jQuery btw). Something like this might be totally wrong, but it is what I was trying to do:
onCompletedProjectCallback(response, eventArgs) {
var getProject = eval("(" + response.get_responseData() + ")");
var buildMarkUp = '';
for (var i = 0; i < getProject.d.results.length; i++) {
buildMarkUp += "<div>" + getProject.d.results[i].ProjectName + "</div>";
//call nested function here so that I can go retrieve values for each ProjectID from another list
var getOtherData = getRelatedData(getProject.d.results[i].ProjectID);
}
}
getRelatedData(passedProjectID) {
// have to use the same method as the original to get more sharepoint list data
var relatedURL = "https://mySite/ListData.svc/Related$filter=ProjectID eq " + passedProjectID;
var request = new Sys.Net.WebRequest();
request.set_httpVerb("GET");
request.set_url(relatedURL);
request.get_headers()["Accept"] = "application/json";
request.add_completed(onCompletedRelatedCallback);
request.invoke();
}
This is where I am really struggling with this though.
A separate callback means it is not going back to the original function with data if I return right?
Does the original function keep processing and just fire the nested functions?
How can I control when/how/what values are returned to the original function then? Can I?
Basically what if I was trying to build a table, where each referenced project row contained data from other sharepoint lists, and I would need to control the order in which the string that I was going to append to the DOM got built?
You are correct that a function that executes a web request continues immediately and cannot return the data from that call. You need to code the callbacks to add the data they collected to a public data structure -- perhaps create an object that accumulates the data as new attributes. When you have collected all of the data, the last callback can build the HTML elements. If you are doing multiple simultaneous AJAX requests, then each callback can call a common function to see if all requests have finished. For example:
function checkLoadingComplete() {
if (loadedData.project && loadedData.relatedData && loadedData.summaryData) {
//now build the HTML elements
}
}
A separate callback means it is not going back to the original function with data if I return right?
Yes. return returns from the function executing, but does not wait for the ajax load event and its handler to get the data.
Does the original function keep processing and just fire the nested functions?
Yes. It starts a bunch of ajax requests, and gets back undefined for each of them.
How can I control when/how/what values are returned to the original function then? Can I?
You will need to use callbacks, you never will "return" the values.

Iterating through and displaying json data

I have a codeigniter app and in one of my views, i have an ajax call to an API that returns json data. Once i get the data, I loop through it and append records to an existing table.
There are two ways to run this ajax call. One is to request "all" data, the other is to filter by location.
Both ways return data, but when Im trying to loop through the filtered data set, the ajax is failing.
Here's the code that loops through the record set:
if (JSONdata.length != 0)
{
//create a heading row and attach it to the existing table.
var heading = $('<tr id="tblheading" naming="tblheading">').appendTo($('#switchrecords'));
heading.append($('<td>').append().text('Name'));
heading.append($('<td>').append().text('Object ID'));
//loop through each JSONdata item in the array and append another row to the switchrecords table.
$.each(JSONdata, function(i, objswitch) {
console.log('objectid is:'.objswitch.id);
console.log(objswitch.id);
var row = $('<tr>').appendTo($('#switchrecords'));
row.append($('<td>').append($('<a href='+ BASEPATH + 'index.php/controller/methodname/' + objswitch.id + '>').text(objswitch.name)));
row.append($('<td>').append(objswitch.id).text(objswitch.id));
});
Here's what I've done so far:
I've made sure that both result sets have the same fields, namely "id" and "name". Mind you, the filtered data set includes more fields than the non filtered result but i don't think that should matter.
I've used console.log to dump both result sets... Here's a snippet from both. The first one is ALL and the other is filtered.
[{"name":"888-12-993-99-1","id":"1","dict_value":"compact"},{"name":"888-22-SR1-RTR-1","id":"2","dict_value":"compact"},{"name":"888-21-SR1-SW-1","id":"3","dict_value":"compact"},{"name":"888-11-SR2-SW-2","id":"4","dict_value":"compact"},....etc
[{"parent_id":"2","tag_id":"10","Location":"Building1","id":"7","name":"888-22-228-22-1","label":null,"asset_no":"1026067","objtype_id":"1503"},{"parent_id":"2","tag_id":"5","Location":"Building2","id":"6","name":"888-2-263-88-1","label":null,"asset_no":"1026068","objtype_id":"1503"}, .... etc.
As you can see from the code snippet, I've tried to add some debug information to see what's happening inside the loop. However, I'm getting the following error message on the first console.log() call:
[17:13:30.675] TypeError: "objectid is:".objswitch is undefined
I'm not really too sure how to resolve this. Any suggestions would be appreciated.
I apologize in advance if it's a silly mistake! I've been programming all day and my brain is mush! =)
Thanks in advance for the help.
Unless I'm completely off it looks like .objswitch should be + objswitch.
Try
console.log('objectid is:' + objswitch.id);
instead of
console.log('objectid is:'.objswitch.id);
Looks like your syntax is wrong for concatenation .. It should be done using a + , I see you are using a .
Instead of objswitch try using this
$.each(JSONdata, function(i) {
console.log('objectid is:' + this.id);
console.log(this.id);
var row = $('<tr>').appendTo($('#switchrecords'));
row.append($('<td>').append($('<a href='+ BASEPATH + 'index.php/switches/getswitchdetails/' + this.id + '>').text(this.name)));
row.append($('<td>').append(this.id).text(this.id));
});
Otherwise try using the variable in general
$.each(JSONdata, function(i) {
console.log('objectid is:'+ JSONdata[i].id);
console.log(JSONdata[i].id);
var row = $('<tr>').appendTo($('#switchrecords'));
row.append($('<td>').append($('<a href='+ BASEPATH + 'index.php/switches/getswitchdetails/' + JSONdata[i].id + '>').text(JSONdata[i].name)));
row.append($('<td>').append(JSONdata[i].id).text(JSONdata[i].id));
});

Variable not updating in script string, yet it updates

Very confused here.
I have a search box which reads a list of school names from my database. When I select a school, the id (from the db) gets put in a hidden textbox.
I also have a search box which reads a list of courses from my database. However, I made the query so that it only reads the courses from the selected school.
It does that, in theory.
I was planning to pass the school id, which I grab from the hidden box, to the search script which in turn passes it to my database query. However, the variable I put my school id in doesn't seem to be updating.. yet it does. Let me explain.
I come on the page. The school for my test account has id 1. The id number in my hidden box is indeed 1. I search for a school which I know has some courses assigned to it: the id number in the box changes to 3.
I have a JS variable called school_id which I declared outside of my $(document).ready. I assume that means it's global (that's what I got taught even though SO told me once it isn't really the correct way to do this. Still have to look into that). I wrote a function which updates this variable when the school search box loses focus:
$("#school").blur(function() {
school_id = $("#school_id").val();
});
A quick javascript:alert(school_id); in my browser bar also shows the updated variable: it is now 3 instead of 1.
Onto the search script part of my page (excerpt of the script):
script:"/profiel/search_richting?json=true&limit=6&id=" + school_id + "&"
As you can see, I pass the school_id variable to the script here. However, what seems to be happening is that it always passes '1', the default variable when the page loads. It simply ignores the updated variable. Does this string get parsed when the page loads? In other words, as soon as the page loads, does it actually say &id=1? That's the only idea I can come up with why it would always pass '1'.
Is there a way to make this variable update in my script string? Or what would be the best way to solve this? I'm probably missing out on something very simple here again, as usual. Thanks a lot.
EDIT
Updated per request. I added a function getTheString as was suggest and I use the value of this function to get the URL. Still doesn't work though, it still seems to be concatenating before I get a chance to update the var. HOWEVER, with this code, my ajax log says id:[object HTMLInputElement], instead of id:1. Not sure what that means.
<script type="text/javascript">
var school_id;
$(document).ready(function() {
$("#school").blur(function() {
school_id = $("#school_id").val();
});
// zoekfunctie
var scholen = {
script:"/profiel/search_school?json=true&limit=6&",
varname:"input",
json:true,
shownoresults:false,
maxresults:6,
callback: function (obj) { document.getElementById('school_id').value = obj.id; }
};
var as_json = new bsn.AutoSuggest('school', scholen);
var richtingen = {
script: getTheString(),
varname:"input",
json:true,
shownoresults:true,
maxresults:6
};
var as_json2 = new bsn.AutoSuggest('studierichting', richtingen);
});
function getTheString() {
return "/profiel/search_richting?json=true&limit=6&id=" + school_id + "&";
}
</script>
This is because the URL is static, it is not updated as the ID changes.
You should update the URL as part of the code you wrote to get the ID:
$("#school").blur(function() {
school_id = $("#school_id").val();
// update URL here ...
});
Aren't you concatenating script:"/profiel/search_richting?json=true&limit=6&id=" + school_id + "&" before the event is fired and the var updated?
Okay. So the problem was my third party plug-in instead of the code I wrote. I fixed this by editing the code of the autoSuggest plugin so it now includes my id field in the AJAX request.
var url = this.oP.script+this.oP.varname+"="+encodeURIComponent(this.sInp)+"&id="+ $("#school_id").val();
Thanks to everyone who tried to help me out!

Categories