Parsing JSON - script fails when an expected element is missing - json

I have the following line in my script, building a string based on news feed data retrieved from JSON:
var buildstring = "<table><tr><img src=" + obj.value.items[x]["media:content"].url + "> <b>" + obj.value.items[x].title + "</b><br /><td>" + obj.value.items[x].description.content + "</td></tr></table><br />";
In general it works fine - except for one thing. The feed that is being parsed occasionally doesn't have an image file associated with a particular title and description, and in that case, the entire script fails.
Is there any way to get the script to skip over any missing item in the feed and to build the string from the items that are there? E.g. if there is no image file for a story, the string consists of just the title and description? In the typical case I am taking 5 - 10 stories - if all of them have the 3 elements (image, title and description.content), it's all fine. If one story is missing the image file, I get nothing at all.
Thanks for any advice or assistance.
EDIT:
More complete code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"> </script><script type="text/javascript">
function pipeCallback(obj) {
document.write("<div id=testdiv><b>LATEST NEWS</b><hr>");
var x;
for (x = 0; x < obj.count ; x++)
{
var imageurl = obj.value.items[x]["media:content"].url ? obj.value.items[x]["media:content"].url : "http://static.jquery.com/org/images/project/jquery-project-sm.png";
var buildstring = "<table><tr><img src=" + imageurl + "> <b>" + obj.value.items[x].title + "</b><br /><td>" + obj.value.items[x].description.content + "</td></tr></table><br />";
document.write(buildstring);
buildstring = null;
}
document.write("</div>");
}
</script>

You could use a ternary expression to build the string:
var textOnly = "<b>" + obj.value.items[x].title + "</b><br /><td>" + obj.value.items[x].description.content + "</td></tr></table><br />";
var buildstring = (typeof obj.value.items[x]["media:content"] == 'undefined') ?
"<table><tr><td><img src=" + obj.value.items[x]["media:content"].url + "></td>" + textOnly
: "<table<tr><td></td>" + textOnly;
Obviously this gets really ugly, fast, which is why they invented client-side templating (JQuery templating, Underscore.js, Mustache.js, Handlebars.js, etc, take your pick).
These allow you to separate the data from the markup, so you can write something like this:
var template = "<table><tr><td><img src='{{ image }}' /></td><td>{{ title }}</td><td>{{ description }}</td></tr></table>";
And you can get the HTML by from the data + template:
var html = Mustache.render(template, obj.value.items[x]);

The best option is simply to include placeholder, right? So if there is no image then the placeholder appears...
This would be achieved like this:
var imageurl = obj.value.items[x]["media:content"].url ? obj.value.items[x]["media:content"].url : "http://link.to.default/image.png";
var buildstring = "<table><tr><img src=" + imageurl + "> <b>" + obj.value.items[x].title + "</b><br /><td>" + obj.value.items[x].description.content + "</td></tr></table><br />";

Related

ASP.NET Json doesn't appear

Please refer to this link
http://aspsolution.net/Code/5/5215/How-to-loop-through-ViewBag-List-in-Jquery/#
I followed what is written in the website. However the Json.Result doesn't appear. I tried to include this one (#using Newtonsoft.Json) in the html but it's still not appearing. Why is that? Is there any solution for this?
This is my script:
fillDatatable();
function fillDatatable() {
var cart = #Html.Raw(Json.Result(#ViewBag.cart));
alert(cart.Items.ItemID);
}
Edited:
if (PurchaseOrder != "") {
var tableHTML = '';
$.each(PurchaseOrder, function (index, value) {
tableHTML += "<tr>";
tableHTML += "<td>" + value.items.itemID + "</td>";
tableHTML += "<td>" + value.items.itemModelDescription + "</td>";
tableHTML += "<td>";
tableHTML += "<input id='UnitPrice" + value.items.ItemID + "' class='form-control b-r-xl text-right' value='" + value.items.itemUnitPrice + "' oninput='return change_unitprice('" + value.items.itemID + "')' />";
tableHTML += "</td>";
tableHTML += "<td>";
tableHTML += " </tr>";
});
$("#TableRecords").html(tableHTML);
}
See my HTML inside the loop where you can see change_unitprice function. I'm trying to pass the value of an id there, but according to the result of console it is undefined? Why is that?
The example you are referencing does not contain the code you included to the question. It describes how to use Json.Encode() to obtain data from the ViewBag field. Possible problems why your code doesn't work are:
Using not defined the cart field.
Using the Items property that does not defined.
Trying to work with HTML document that does not loaded yet.
Therefore, use function from this example as is:
<script>
$(document).ready(function(){
var StockList =#Html.Raw(Json.Encode(#ViewBag.StockList));
if (StockList != '') {
var tableHtml;
$.each(StockList, function( index, value ) {
tableHtml +="<tr><td>" + value.stockId + "</td><td>" + value.StockName + "</td><td>" + value.StockPrice + "</td></tr>";
});
$("#output").html(tableHtml);
}
})
</script>
If it does not work (probably because of the jquery disable by Layout = null; line in the Index.cshtml ) add the following line after the <head> tag:
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js"></script>
For additional information see the following post: https://stackoverflow.com/a/10779161/6630084
I think the simplest method that works for complex object would be like this:
#Html.Raw(Json.Encode(ViewBag.cart))

Replace JSON values

It is my first time talking about JSON and I need some help (sorry if I make some mistake).
I have datas in the MySql database with strange values (ex. è - à - ù - ò.....) and when I have back the response from JSON my field result null.
Follow you can see the code I'm using!
Could somebody help me how to replace this letters or fixing the problem.
THANK YOU!
I get my datas phrased
{"items":
{
"id":"305",
"title":"Il manipolatore",
"description":null
}
....
}
This is my code:
var serviceURL = "app/testE/services/";
var employees;
$('#employeeListPage').bind('pageinit', function(event) {
getEmployeeList();
});
function getEmployeeList() {
$.getJSON(serviceURL + 'getemployees.php', function(data) {
$('#employeeList li').remove();
employees = data.items;
$.each(employees, function(index, employee) {
$('#employeeList').append('<li><a href="employeedetails.html?id=' + employee.id + '">' + '<img src="' + employee.img + '" width="80px" height="80px" />' +
'<h4>' + employee.title + '</h4>' +
'<p>' + employee.description + '</p>' +
'</a></li>');
});
$('#employeeList').listview('refresh');
});
}
Use $.ajax() rather than $.getJSON() and then set the charset to utf-8.
http://api.jquery.com/jQuery.ajax/

Converting html to Json object

I'm currently working on a project where I need to convert some older code into a json object. We're taking the result set from a sql query and returning the categories it gives back as json. I'm not that well versed in javascript let alone json so I'm not sure what's the simplest way to go about this. Here is the function I need to change into JSON:
function createOutputCategories(){
try
{
output =
"<html>" +
"<head>" +
"<title>" +
"You can find it!" +
"</title>" +
"</head>" +
"<body bgcolor='#CED3F3'>" +
"<a href='" + url + "file.xsjs?parent=1'>" +
"</a>" +
"<br><br>";
if(parent === "1"){
output = output + "<h3><font color='#AAAAAA'>Home</font>";
}else{
output = output +"<a href='javascript:history.back()'>" +
"<h3>Back";
}
output = output +
"</h3>" +
"</a>" +
"<h1>" +
"Categories:" +
"</h1>";
while(rs.next()){
if(rs.getString(3) === 0 || rs.getString(3) === null || rs.getString(3) === undefined || rs.getString(3) === "0" ){
output = output + "<br><a href='" + url + "yeti.xsjs?parent=" + rs.getString(1) + "'>" + rs.getString(2) + "</a>";
}else{
output = output + "<br><a href='" + url + "yeti.xsjs?parent=" + rs.getString(1) + "'>" + rs.getString(3) + "</a>";
}
}
}catch(Exception){
$.response.contentType = "text/plain";
$.response.setBody( "Failed to retreive data" );
$.response.status = $.net.http.INTERNAL_SERVER_ERROR;
}
Here is what I have so far but I am not returning a valid JSON object:
function createOutputCategories(){
try{
output =
"category: {name = \"" + parent + "\"; description = \"\"}";
output = output +
"subcategories: [ ";
while(rs.next()){
output = output +
"{ catid = \"" + rs.getString(1) + "\"; catname = \"" + rs.getString(2) + "\"; altname = \"" + rs.getString(3) + "\"; description = \"" + rs.getString(4) + "\"}";
}
output = output +
"];";
}
catch(Exception){
$.response.contentType = "text/plain";
$.response.setBody( "Failed to retreive data" );
$.response.status = $.net.http.INTERNAL_SERVER_ERROR;
}
If I need to provide anything else please let me know! Thanks!
Do you want to output a javascript object to a string?
Construct the object:
var category=new Object();
category.name="Name";
category.description="My lovely description";
category.subcategories=[];
var subCat=new Object();
subCat.catid=1;
subCat.catname="My subcat";
category.subcategories.push(subCat);
Alternatively, you could construct the object using literals:
var category={
name:"Name",
description:"My lovely description",
subcategories:[
{catid:1,catname:"My subcat"}
]
};
Then return the object as string.
return JSON.stringify(category);
A reference to Javascript objects if you need more help:
http://www.w3schools.com/js/js_objects.asp

Using .text() to get formatting of JSON data

I'm using:
function pipeCallback(obj) {
to get the contents of a Yahoo pipe (in JSON). I then create a string inside:
document.write("<div......);
var buildstring = ".......;
document.write(buildstring);
document.write("</div>");
Everything works, except that one item in the string:
obj.value.items[x].description.content
contains a lot of text and is stripped of its formatting. Is there a way to define a var (using .text()?) to keep the formatting and then to use the defined term in the string - e.g. something like:
var description = (obj.value.items[x].description.content).text()
and then to use the term 'description' in buildstring in place of obj.value.items[x].description.content.
Thanks for any suggestions/help.
EDIT
#Barmar Thanks. I tried that (I think...):
var description = function() {return (obj.value.items[x].description.content).text()};
var buildstring = "<table><tr><img src=" + imageurl + "> <b>" + obj.value.items[x].title + "</b><br /><td>" + description() + "</td></tr></table><br />";
(imageurl is a separately defined variable). I think I must have missed the point of your suggestion (or not given the right information at first). Anyhow..it didn't work.
EDIT #2
function pipeCallback(obj) {
document.write("<div id=testdiv><b>LATEST NEWS</b><hr>");
var x;
for (x = 0; x < obj.count ; x++)
{
var imageurl = (typeof obj.value.items[x]["media:content"] == 'undefined') ? "http://default.png" : obj.value.items[x]["media:content"].url;
var buildstring = "<table><tr><img src=" + imageurl + "> <b>" + obj.value.items[x].title + "</b><br /><td>" + obj.value.items[x].description.content + "</td></tr></table><br />";
document.write(buildstring);
buildstring = null;
}
document.write("</div>");
}
You can do:
var description = function() {return (obj.value.items[x].description.content).text()};
and then use description() to get this.

How to read Div inner contents at ajax?

I'm trying to update the sql db by a List of variables sent from the Html page.
Some of the Data are correctly sent, while others are not. I put the list in a div which is divided to two parts : "h1" and another "Div". The data at the header are all sent correctly, but the body itself which is at the second div isn't sent at all.
This is the Div which the data is put at:
$('#Classes').append('<div> <h1 class = "flip" wpID="' + subjects[i].Wkp_ID + '" lessonID="' + subjects[i].Ttb_lessonID + '" Date="' + Datecoming + '">' + subjects[i].sbj_Name + " Class:" + subjects[i].Ttb_Class + '</h1><div id ="NewBody" class="panel" contenteditable>' + subjects[i].Wkp_Body + '</div> </div>');
And that's how I read them at the ajax part:
var WeekPlan = [];
$('#Classes div').each(function (index) {
var header = $(this).children('h1');
var WeekBody = $(this).children('div').val();
var wpID = header.attr('wpID');
var lessonID = header.attr('lessonID');
var Wkp_Date = header.attr('Date');
WeekPlan[index] = { "Wkp_ID": wpID, "Wkp_Date": Wkp_Date, "Wkp_Body": WeekBody, "Wkp_lesson": lessonID };
});
The Wkp_ID, Wkp_Date, Wkp_Lesson are right, but the Wkp_Body just returns an empty string.
So do you know why is this happening and how can I truly read the body ? Most probably the problem is with this line:
var WeekBody = $(this).children('div').val();
But how can I access it correctly ?
Thanks a lot.
Here is what worked for me in case anyone needs it:
Creating the div:
$('#Classes').append('<div class="BigDiv"> <h1 class = "flip" wpID="'+ subjects[i].Wkp_ID + '" lessonID="' + subjects[i].Ttb_lessonID + '" Date="' + Datecoming + '">' + subjects[i].sbj_Name + " class:" + subjects[i].Cls_Name + '</h1><div class="panel" contenteditable>' + subjects[i].Wkp_Body + '</div> </div>');