Develop Reference

What is the correct way to handle this data using jQuery?

I have a list of html elements with data attributes, which I would like to assemble into a jQuery object and manipulate the values.
What is the best way to dynamically add these in an each loop so that I can easily access the data as so: data.name and data.name.prop?
I want all the naming conventions to be dynamic and based on the data.
I based my code on the top answer from here: How to create dynamically named JavaScript object properties?
So far I have:
$('.licences-list .data div').each(function(index) {
var data = {}
cats[$(this).find('p').data('cat')] = $(this).find('p').data('catname')
cats.push(data)
})
But when I try to iterate over the data array, like so:
$.each(cats, function(key, value){
$('<div class="card"><p>'+value+'</p></div>').appendTo('#commercial-licenses');
});
I just get [object Object] output... and I'm not sure why!

var data = {}
cats[$(this).find('p').data('cat')] = $(this).find('p').data('catname')
Each time you loop through, you're actually just adding an empty object (data) to your array (cats). You're then assigning a named property to that array (cats) which $.each has no idea about (it ignores them because it's iterating over an actual array).
My guess is you want an object map which is something like: var cats = { "f1": "feline 1", "f2": "feline " };
In that case what you want is:
var cats = {};
$('.licences-list .data div').each(function(index) {
cats[$(this).find('p').data('cat')] = $(this).find('p').data('catname')
})
If you want an array that contain more values than just strings (or whatever data you have added to the element), you create new objects each time and append them to the cats array:
var cats = [];
$('.licences-list .data div').each(function(index) {
cats.push({
'id': $(this).find('p').data('cat'),
'name': $(this).find('p').data('catname')
});
})
This will then give you an array that you can use $.each over, and access the values using: value.id, value.name

Don't over complicate it.
$('.div').attr('data-attribute', 'data-value');
using your example:
$('.licences-list .data div').attr('attribute-name', 'attribute-value');

JQuery - How to loop through JSON using each

I have cached the JSON returned from an Ajax call and need to loop through this to display it. I get the error, 'Cannot read property 'title' of undefined'. Can anyone help?
$.each(cache['cat-'+cat], function(i, jd) {
var title= jd.title; //issue is here
)}
When I console.log(cache['cat-'+cat]) I get the below:
Object {
date: "2016-07-28T15:08:03.596Z",
data: '[{"id":471,"title":"Lines and Calls","solution_areas":"lines-calls"}]'
}
When I console.log(jd) within the loop I get the below:
2016-07-28T15:13:14.553Z
if I use console.log(jd.data); I get
undefined
I have tried the below but they don't work either:
var title= jd.data.title;
var title= jd.data[0].title;
Can anyone tell me what I am doing wrong?

The way you are currently using it, each is going to iterate over every property of the cache['cat-'+cat] object, of which there are two, date and data.
So your anonymous function function(i, jd)will be called twice. The first time, jdwill be the value of the date property (a string), the second time it will be the value of the data property (also a string, that happens to be formatted as JSON).
The contents of data need to be parsed before they can be accessed as an object/array, and given that data is formatted as an array, I am guessing that you actually want to iterate over that. Given the example provided, I would change it to:
$.each(JSON.parse(cache['cat-'+cat].data), function(i, jd) {
var title= jd.title;
});

You aren't accessing it properly. And since cache['cat-'+cat] is already the needed object, what's the purpose of $.each? Should be
var title= JSON.parse(cache['cat-'+cat].data)[0].title;
(because the title is in the data, and the data is JSON).
Demo:
var obj = {
date: "2016-07-28T15:08:03.596Z",
data: '[{"id":471,"title":"Lines and Calls","solution_areas":"lines-calls"}]'
};
var title= JSON.parse(obj.data)[0].title;
console.log(title);

Just need to understand what is JSON and what is STRING
cache['cat-'+cat].data return a string that need to convert to JSON before pass to each loop:
var dataCacheReturned = cache['cat-'+cat];
var objCache = dataCacheReturned.data; //Its return a string
objCache = JSON.parse(objCache); //Parse string to json
$.each(objCache, function(i, jd) {
var title = jd.title;
console.log(title);
});

getJSON data add array item to variable

I am using this script to retrive JSON data from a file to my page.
$.getJSON('json/data.json', function(data) {
$('#getJSON-results').html(JSON.stringify(data));
});
<div id="getJSON-results"></div>
Right now it jsut displays all the data from JSON file as a string on the page.
How would I take the data from my JSON file and place each array into a variable? My data in the JSON file looks like this:
[{"target": "summarize(first, \"1d\", \"sum\")", "datapoints": [[38.393148148148143, 1423958400], [90.800555555555633, 1424044800], [159.06037037037032, 1424131200], [245.5933333333335, 1424217600], [126.94796296296299, 1424304000], [120.37111111111113, 1424390400], [103.04148148148151, 1424476800], [99.273796296296368, 1424563200], [89.38203703703708, 1424649600], [92.970462962963012, 1424736000], [105.62666666666664, 1424822400], [110.33962962962967, 1424908800], [118.54981481481482, 1424995200], [100.08018518518523, 1425081600], [92.52277777777779, 1425168000], [98.647619047618974, 1425254400], [94.585000000000008, 1425340800], [85.568796296296284, 1425427200], [157.82222222222222, 1425513600], [109.7596296296296, 1425600000], [112.53324074074077, 1425686400], [89.392592592592649, 1425772800], [97.253518518518518, 1425859200], [73.424629629629635, 1425945600], [92.377592592592578, 1426032000], [76.117870370370397, 1426118400], [77.83953703703699, 1426204800], [66.643518518518533, 1426291200], [63.748055555555531, 1426377600], [137.30018518518517, 1426464000], [53.480648148148134, 1426550400]]},
{"target": "summarize(second, \"1d\", \"sum\")", "datapoints": [[2.7291600529100535, 1423958400], [5.7797089947089892, 1424044800], [3.4261574074074059, 1424131200], [5.0516335978835958, 1424217600], [6.2272420634920582, 1424304000], [11.752605820105822, 1424390400], [7.8688624338624269, 1424476800], [5.7305555555555525, 1424563200], [5.2784391534391499, 1424649600], [6.4652380952380897, 1424736000], [4.7690277777777741, 1424822400], [4.1451587301587258, 1424908800], [8.4178902116402039, 1424995200], [4.7948611111111061, 1425081600], [4.8153835978835939, 1425168000], [5.3873148148148111, 1425254400], [7.2819378306878262, 1425340800], [5.2084391534391488, 1425427200], [8.098492063492051, 1425513600], [5.6563822751322697, 1425600000], [5.3091468253968195, 1425686400], [4.7850396825396793, 1425772800], [3.8716931216931179, 1425859200], [3.1934325396825369, 1425945600], [3.2083531746031722, 1426032000], [3.3434391534391512, 1426118400], [3.6162235449735438, 1426204800], [3.2094179894179891, 1426291200], [2.3699537037037026, 1426377600], [4.3973544973544945, 1426464000], [2.1901388888888893, 1426550400]]},
{"target": "summarize(third, \"1d\", \"sum\")", "datapoints": [[5.3710185185185182, 1423958400], [11.25367724867724, 1424044800], [8.2990079365079268, 1424131200], [8.710694444444437, 1424217600], [9.6381216931216898, 1424304000], [9.3845105820105807, 1424390400], [9.7305820105820047, 1424476800], [8.6268055555555474, 1424563200], [10.589166666666673, 1424649600], [10.235462962962957, 1424736000], [10.455892857142853, 1424822400], [14.282407407407405, 1424908800], [17.774404761904758, 1424995200], [18.154120370370364, 1425081600], [16.249543650793651, 1425168000], [15.29764550264551, 1425254400], [16.267671957671972, 1425340800], [20.121488095238096, 1425427200], [27.007685185185196, 1425513600], [17.577962962962971, 1425600000], [17.020873015873018, 1425686400], [14.627685185185191, 1425772800], [15.824821428571433, 1425859200], [11.837579365079364, 1425945600], [13.292539682539683, 1426032000], [12.064074074074073, 1426118400], [12.279457671957676, 1426204800], [9.3799074074073978, 1426291200], [7.8777314814814732, 1426377600], [13.161825396825407, 1426464000], [7.2587499999999956, 1426550400]]}]
I am new to using JSON and would also appreciate any advice on the approach I'm taking.
How can I now make this data accsessable outside the getJSON?
$.getJSON('json/data.json', function(data) {
yourData = data;
makeMeGlobal = yourData[0];
});
console.log(makeMeGlobal.datapoints);

Changing your function to the following will result in an object you can then reference normally:
$.getJSON('json/data.json', function(data) {
yourData = data;
});
You could then get the first set of datapoints like this:
yourData.datapoints[0]

Should be:
data.forEach(function (obj) {
// obj now has each JSON object in this array
var test = obj.target;
}
When you get a JSON from AJAX, it's already ready for use in the browser. This is one of the nice perks of using JSON over XML.

It's already an array, because the original JSON string was parsed by jQuery. If you use stringify, you will get a string which contains the JSON representing the array (not useful for your purposes, as it's the same string returned by the server).
For example:
$.getJSON('json/data.json', function(data) {
// Here, data is already an array.
var data_length = data.length;
for (var i = 0; i < data_length; i++) {
var obj = data[i]; // Here we have an object from the array
alert("I have an object which target is " + obj.target);
}
});

You need to iterate through json to retrieve the value you need and append the html.More infor # https://stackoverflow.com/a/18238241/909535 Something like this
`$.getJSON('json/data.json', function(data){
data.forEach(
function(val, index, array) {
//val.target will have target attribute's value
//val.datapoints is a array which you can iterate
}
);
}
);`

GetJson Using Array

Hello I am having this issue which I cant seem to figure out were I am getting the latest films from BBC and I am displaying them after that I am fetching each of the films titles and then using the movie db .org api to get the rating of the movie. But the problem here is when I am using the getJson function for the second time as it wont let me input the array as one of the json queries. Here is my code below:
$(function(){
var filmnamevar = [];
$.getJSON('http://www.bbc.co.uk/tv/programmes/formats/films/player/episodes.json?limit=3',function(data){
console.log('success');
$.each(data.episodes,function(i,emp){
$('#epis').append('<div class="episode-l">'+emp.programme+'<div id="epi-img"><img src="http://ichef.bbci.co.uk/images/ic/192x108/legacy/episode/'+emp.programme.pid+'.jpg"/></div> <div class="ep-title">'+emp.programme.title+'</div><div class="ep-title">'+emp.programme.short_synopsis+'</div></div>');
console.log(emp);
filmnamevar.push(emp.programme.title);
console.log(filmnamevar);
});
});
$.getJSON('http://api.themoviedb.org/3/search/movie?query='+filmnamevar[whichever number]+'&api_key=81c50c197b83129dd4fc387ca6c8c323&limit=1',function(data2){
$(data2.results,function(i,rat){
$('#epis').append('<div class="rating">'+rat.vote_average+'</div>');
});
});
});

You're appending the titles to an array (filmnamevar) but then you're accessing filmnamevar directly as if it were a string.
You'll need to loop the array, calling a new getJSON request for each title (unless the movie db API let's you pull many at once):
for( var i = 0; i < filmnamevar.length; i++){
$.getJSON('http://api.themoviedb.org/3/search/movie?query='+filmnamevar[i]+'&api_key=81c50c197b83129dd4fc387ca6c8c323&limit=1',function(data2){
$(data2.results,function(i,rat){
$('#epis').append('<div class="rating">'+rat.vote_average+'</div>');
});
});
}

Processing javascript, objects and firebug

This is an edit of an earlier post. for a very novice question. I have a javascript function that is getting called with a data object. Data appears to be a json string. However the json string will not parse. How do I get parse this json string? Then how do I replace the contents of a div with value from the json string?
I get the following errors:
JSON.parse(data) dies with "unexpected character"
eval('(' + data + ')'); dies with error "missing ] after element list".
---- JSON string--------
http://jsonlint.com/ calls this a valid json string.
[{"cmd": "as", "id": "#calls", "val": "<h2> Missed Calls</h2><ul></ul>", "prop": "innerHTML"}]
---- html ----
<script type='text/javascript'>
function missed_calls_callback(data){
alert("Foo"); // (breakpoint) This alerts 'Foo'
alert(data.id); // This prints 'undefined'
var object1 = JSON.parse(data);
var object2 = eval('(' + data + ')'); // missing [
// How do I do the following?
// 1. divname = data.id
// 2. content = data.id.val
// 2. Replace contents of <div id="divname"> with content
}
</script>
<body>
And on my page I have div calls.
I want to fill div calls with
<div id="divname"> Put stuff here. </div>
</body>

What do you mean to "test" with firebug?
<body>
And on my page I have div calls.
I want to fill div calls with
<div id="divname"> Put stuff here. </div>
</body>
<script type="text/javascript">
data = {
cmd:"as",
id:"divname",
val:"<h2> My Content</h2>"
};
console.log(data);
document.getElementById(data.id).innerHTML=data.val;
</script>
jsFiddle

This was a tricky one. I will answer this for the group and the benefit of those who may have this same issue. The issue was invisible carriage returns inside a json string. data contained hidden characters that JSON.parse couldn't handle. I fixed the json string with a combination of methods to eliminate carriage returns that the javascript library couldn't handle.
------server side-------
render = render_to_string('templates/file.html', { 'tag': objects })
dajax = Dajax()
dajax.assign('tags','innerHTML', render)
jsonStr = dajax.json()
jsonStr = ''.join(unicode(jsonStr, 'utf-8').splitlines())
return jsonStr
-------client side-----
function my_callback(data){
var dString = JSON.stringify(data);
var myObject = JSON.parse(dString);
document.getElementById(myObject[0].id).innerHTML=myObject[0].val;
}