How to repalce HTML text with JSON data - javascript

Received data from api and converted into JSON format, however every time I try to change a selected element in HTML I get either undefined or Object Obejct.
I have tried JSON.parse/JSON.stringify. I have tried innerHTML, innerText, textContent. I have tried for loops.
HTML
<p id="lang">C++</p>
Javascript
let language = document.getElementById('lang');
let data = {
"book": [
{
"id":"01",
"language": "Java",
"edition": "third",
"author": "Herbert Schildt"
}
]
};
data = JSON.stringify(data);
language.innerHTML = data.book.language;
Need C++ in paragraph tag to change to Java in data. If Jquery would make this easier I would appreciate knowing how that works as well.

Since the data model you presented has books as an array, you'll need to get that out this way
data.book[0].language
0 being the index of whatever book you want to display
data = {
"book": [
{
"id":"01",
"language": "Java",
"edition": "third",
"author": "Herbert Schildt"
}
]
};
language.innerHTML = data.book[0].language;

This is not working as book is an array of objects, not a singular object. So you'd need to use data.book[0].language
P.S. You don't need to use JSON.stringify here, if you are receveing a JSON string from your API, you should use JSON.parse
Here is an example of the code running correctly:
https://jsfiddle.net/2et3zh7g/

From Mozilla
The JSON.stringify() method converts a JavaScript object or value to a JSON string
So it seems your code is going the opposite direction of your stated intent.
let data = {
"book": [
{
"id":"01",
"language": "Java",
"edition": "third",
"author": "Herbert Schildt"
}
]
};
After which, data already contains an object.
data = JSON.stringify(data);
And now, data contains a string. So naturally, data.book will result in an undefined value.
If, however, you were to receive the data as actual JSON, such as
let dataJSON = '{"book":[{"id":"01","language":"Java","edition":"third","author":"Herbert Schildt"}]}';
You could then extract the language value using JSON.parse as follows:
let data = JSON.parse(dataJSON);
let bookLanguage = data.book[0].language;
language.innerText = bookLanguage;
Note the array subscript on book. Since in your example, it contains an array of objects, you need to be sure to subscript into it.

Related

Regular Expressions on array

I am trying to edit the first entry in a array before it placed in another file.
This is it:
(["\"NAMES\":\"cs.js\"},[
I want to turn it into this:
([{"NAMES":"cs.js"},[
I'm using an online regex generator, but so far I've only managed to edit to this point with /.["[\]/ and substituting with ([{:
([{"NAMES\":\"cs.js\"},[
Any help given will be appreciated.
EDIT:
Here is some of the code:
var initialCourseArray = new Array()
initialCourseArray.push(["\"NAMES\":\"cs.js\"},[
{"COURSE_ID":"ENGL 1013"},
{"COURSE_ID":"FAH1"},
{"COURSE_ID":"USHG1"},
{"COURSE_ID":"TECH 1001"},
{"COURSE_ID":"COMS 1403"},
{"COURSE_ID":"COMS 1411"},
{"COURSE_ID":"ENGL 1023"},
{"COURSE_ID":"SS1"},
{"COURSE_ID":"MATH 2914"},
The stuff after is the rest of the values in the array and they do not look like this one so I'm not worried about them.
Second EDIT:
Since there is some confusion about the code that I honestly should have placed in here first, I am using a php file to retreive course data from a test database and then encoding it into JSON, formatting it, and then using fopen and fprintf to place it inside a javascript file. The part I'm giving you is what ends up inside the javascript file.
Third EDIT:
here is the code I am using to format the array. It is very messy because my leader keeps changing the format he wants the result to be in:
$row1 = "\"NAMES\"";
$colon = ":";
$row2 = "\"".$major.".js\"";
$major_name = $row1.$colon.$row2;
//The course data is already loaded into the table. This why I am using array_unshift to place the major_name inside.
array_unshift($major_array, $major_name);
array_push($major_array, "false");
$json_string = json_encode($major_array);
$re = "/.,/";
$subst = "},\r\n";
$json_string = preg_replace($re, $subst, $json_string);
$re2 = "/\,(?=[^.]*$)/";
$subst2 = ",[";
$json_string = preg_replace($re2, $subst2, $json_string, 1);
$first_string = "var initialCourseArray = new Array()";
$second_string = "initialCourseArray.push(";
$end_bracket = "]";
$end_parentheses =")";
There are several issues:
1. Don't manipulate JSON strings
You should never manipulate a string that is the result of json_encode, because you will very likely make the JSON text invalid, which is actually happening in your case.
So using this kind of statements:
$json_string = preg_replace($re, $subst, $json_string);
is asking for trouble. Once you have a $json_string, it should be final. Anything you want to happen to the structure must happen before you call json_encode.
Even if you just want to add line breaks inside a JSON string, don't do it that way. json_code provides a "pretty print" option which will do it for you:
json_encode(...., JSON_PRETTY_PRINT);
2. JavaScript does not have associative arrays
A second problem is that in JavaScript you cannot have something like
["NAMES":"cs.js" ...]
So json_encode will never generate anything like that. If you want named keys in JavaScript (like "NAMES"), you cannot define it as an array, but should define it as an object:
{"NAMES":"cs.js" ...}
json_encode will do that for you if you provide it the corresponding PHP structure (i.e. an associative array) and let it do its job without tampering.
3. Don't add "false"
It does not seem useful to add "false" as an element to the courses array. In JavaScript you can easily check how many elements there are in an array, so there is no need to put a kind of stop-sign at the end.
Anyway, if in JavaScript you refer to an element in an array that does not exist, you get undefined, which you can verify, much like verifying for the value "false".
I would strongly suggest to leave that out.
Suggested code
The PHP code you provided in your question could be replaced with this:
// Add the names element as a separate item next to the courses array,
// which we put in the "courses" property.
$major_array = array(
"names" => $major,
"courses" => $major_array
);
// Turn into JSON text with added line breaks and indentation:
$json_string = json_encode($major_array, JSON_PRETTY_PRINT);
// Don't touch the JSON text anymore, but output it:
echo "var initialCourse = $json_string;";
The output (JavaScript) would be something like:
var initialCourse = {
"names": "cs",
"courses": [
{
"COURSE_ID": "ENGL 1013"
},
{
"COURSE_ID": "FAH1"
},
{
"COURSE_ID": "USHG1"
},
{
"COURSE_ID": "TECH 1001"
},
{
"COURSE_ID": "COMS 1403"
},
{
"COURSE_ID": "COMS 1411"
},
{
"COURSE_ID": "ENGL 1023"
},
{
"COURSE_ID": "SS1"
},
{
"COURSE_ID": "MATH 2914"
}
]
};
As I mentioned above, this is an object structure, not an array structure, because JavaScript does not allow named keys in an array notation. If in JavaScript you need to iterate over the courses in the above structure, you would address the courses property (which is an array), like this:
for (var course of initialCourse.courses) {
console.log('course id: ' + course.COURSE_ID);
}
More concise structure
I must say it is a bit of an over-kill to have objects with just one property. This structure would be more concise and efficient:
var initialCourse = {
"names": "cs",
"courses": [
"ENGL 1013",
"FAH1",
"USHG1",
"TECH 1001",
"COMS 1403",
"COMS 1411",
"ENGL 1023",
"SS1",
"MATH 2914"
]
};
In JavaScript you would iterate over these courses like this:
for (var course of initialCourse.courses) {
console.log('course id: ' + course);
}
If this interests you, you should just add this line to your PHP code, before any of the PHP code I suggested above:
$major_array = array_map(function ($course) { return $course["COURSE_ID"]; }, $major_array);
If you just want to apply it to that line,
find /"?\\"/ and replace " will do it.

Display JSON values based on param string value

Any help would be greatly appreciated!
Here's what I've done so far.
I have an index.html page and a notice-details.html page. On the index.html page, I have a data grid and I'm displaying 'title' from the json file. I hyperlinked the title to details.html and also added the 'number' so each title href is unique. The data template for the linked title in the data grid is looking like this:
{{title}}
On notice-details.html page I'm trying to capture the query string parameter and display the associated key value pairs that match the 'number' in the json array. So if I land on notice-details.html?id=2012-01 I want to display on that page the title, award claim due date, award claim forms, and date posted associated to the 2012-001 in the json.
I'm stuck on how to match the number and querying only the matched content.
JSON:
{
"notices": [
{
"number": "2012-001",
"link": "google.com",
"title": "sample title",
"awardClaimDueDate": "",
"awardClaimForms": "",
"datePosted": "1/31/2012"
},
{
"number": "2012-001",
"link": "google.com",
"title": "sample title",
"awardClaimDueDate": "",
"awardClaimForms": "",
"datePosted": "1/31/2012"
}
]
}
JS:
function jsonParser(json){
$('#load').fadeOut();
$.getJSON('notices.json',function(data){
// Parse ID param from url
var noticeParamID = getParameterByName('id');
$.each(data.notices, function(k,v){
var noticeNumber = v.number,
noticeTitle = v.title,
claimDueDate = v.awardClaimDueDate,
claimForms = v.awardClaimForms,
date = v.datePosted;
if(noticeParamID == noticeNumber){
// how can I display content that matches the url param value (noticeURLNumber)?
}
});
});
}
// get URL parameter by name
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
I would personally make available a 2nd JSON data structure that allows you to make a lookup based on the notice number rather than have to iterate over an array of notices as you would have to do with your current data structure. For example, if you had JSON structured like this:
{
"2012-001": {
"number": "2012-001",
"link": "google.com",
"title": "sample title",
"awardClaimDueDate": "",
"awardClaimForms": "",
"datePosted": "1/31/2012"
},
"2012-002": {
"number": "2012-002",
"link": "yahoo.com",
"title": "another title",
"awardClaimDueDate": "",
"awardClaimForms": "",
"datePosted": "3/31/2012"
},
...
}
Then you could easily lookup your data from the object created from the JSON like this (assuming this new JSON file is called noticesByID.json):
var noticeParamID = getParameterByName('id');
// get notice based on this id
$.getJSON('noticesByID.json',function(data){
var notice = data[noticeParamID];
// do something with the notice
// let's say we are updating DOM element with id's the same as notice keys
for (propKey in notice) {
$('#'+propKey).html(notice[propKey]);
}
}
You should really strongly consider this approach, as you have already noted you have 1K+ notices that, without a proper data structure to support lookup by notice number, you would have to iterate through to find the notice you were interested in. Your performance would continue to get worse the more notices you have with the iteration approach (it has O(n) complexity where n is number of notices). With the approach I have presented here, you would always have an O(1) operation.
I would also begin to think about whether you really, truly need to make this data available via static JSON files. This requires you to download the entire file just so the use can get to a single record. That is a lot of wasted bandwidth and potential response lag in the UI. If you are going for a fully static site, perhaps you have to live with this or think about making a bunch of individual JSON files (i.e. 2012-011.json) to minimize download. Alterantely if you already have a dynamic site or are not opposed to a dynamic site, then you could look at databases and other things that could simplify your data lookup problems.
Per comments, here is suggestion on converting existing JSON to new JSON format needed for this approach:
var sourceJSON = '{"notices":...}'; // your source JSON
var sourceObj = JSON.parse(sourceJSON);
var notices = sourceObj.notices;
var targetObj = {}; // the target object you will load notice data into
// fill targetObj with data structure you want
for(i = 0; i < notices.length; i++) {
// we use the `number` property of the notice as key
// and write the whole notice object to targetObj at that key
targetObj[notices[i].number] = notices[i];
}
// create new JSON from targetObj
newJSON = JSON.stringify(targetObj);

query javascript object in Javascript

I have a casperjs script which iterates over a list of pages and extracts data.
On the other hand I have a csv file with 2 fields 'ean' 'ref' which I parse with Papa.parse. The output is an object. I am looking for a solution to query an javascript object (the output from Papa.parse) for the 'ref' field and extract the 'ean'. I thought .filter() is what i was looking for but that can only search for a predefined value in the callback function.
function cd(element) {
return element == '123';
}
var b = c.filter(cd);
The problem hear is 1. It returns an empty array and 2. even if it would work I need to change the value with every call since I want to find the ean value for any given ref.
function cd(element,ref) {
return element == ref;
}
This is the data I need to search
"data": [
{
"ean": "654321",
"ref": "123"
},
{
"ean": "1234567",
"ref": "124"
}
]
I hope I made myself more clear. Thank you in advance
I used https://lodash.com/docs#where
Does exactly what i want
var a = _.where(array,{'ref' : 'value i am looking for'});
result is an array from where I can extract the value of the ean field.

Convert String to Array of JSON Objects (Node.js)

I'm using Node.js and express (3.x). I have to provide an API for a mac client and from a post request I extract the correct fields. (The use of request.param is mandatory) But the fields should be composed back together to JSON, instead of strings.
I got:
var obj = {
"title": request.param('title'),
"thumb": request.param('thumb'),
"items": request.param('items')
};
and request.param('items') contains an array of object but still as a string:
'[{"name":"this"},{"name":"that"}]'
I want to append it so it becomes:
var obj = {
"title": request.param('title'),
"thumb": request.param('thumb'),
"items": [{"name":"this"},{"name":"that"}]
};
Instead of
var obj = {
"title": request.param('title'),
"thumb": request.param('thumb'),
"items": "[{\"name\":\"this\"},{\"name\":\"that\"}]"
};
Anyone who can help me with this? JSON.parse doesn't parse an array of object, only valid JSON.
How about this:
var obj = JSON.parse("{\"items\":" + request.param('items') + "}");
obj.title = request.param('title');
obj.thumb = request.param('thumb');
JSON.stringify(obj);
Perhaps I'm missing something, but this works just fine:
> a = '[{"name":"this"},{"name":"that"}]';
'[{"name":"this"},{"name":"that"}]'
> JSON.parse(a)
[ { name: 'this' }, { name: 'that' } ]
Node#0.10.13
May be you have old library Prototype. As I remove it, bug has disappeared.
You can try the same code. Once in page with Prototype.js. Second time in new page without library.

JavaScript JSON parse by a given key without looping

Given a JSON string as this:
{
"__ENTITIES": [
{
"__KEY": "196",
"__STAMP": 1,
"ID": 196,
"firstName": "a",
"middleName": "b",
"lastName": "c",
"ContactType": {},
"addressCollection": {
"__deferred": {
"uri": "/rest/Contact(196)/addressCollection?$expand=addressCollection"
}
},
"__ERROR": [
{
"message": "Cannot save related entity of attribute \"ContactType\" for the entity of datastore class \"Contact\"",
"componentSignature": "dbmg",
"errCode": 1537
}
]
}
]
}
Is there a method to get just the __ERROR record, I know I can use
var mydata = json.parse(mydata) and then find it from the mydata object. But I was hoping there was a method to only return the ERROR field something like
json.parse(mydata, "__ERROR") and that gets only the information in the __ERROR field without turning the whole JSON string into an object
"Is there a method to get just the __ERROR record, I know I can use var mydata = json.parse(mydata) ... But I was hoping there was ... something like json.parse(mydata, "__ERROR")"
There may be libraries that do this, but nothing built in. You need to write code that targets the data you want.
The closest you'll get will be to pass a reviver function to JSON.parse.
var errors = [];
var mydata = JSON.parse(mydata, function(key, val) {
if (key === "__ERROR")
errors.push(val);
return val
});
without turning the whole json string into an object
That's hardly possible, you would need some kind of lazy evaluation for that which is not suitable with JS. Also, you would need to write your own parser for that which would be reasonable slower than native JSON.parse.
Is there a method to get just the __ERROR record
Not that I know. Also, this is an unusual task to walk the whole object tree looking for the first property with that name. Better access __ENTITIES[0].__ERROR[0] explicitly.
If such a function existed, it would have to parse the whole thing anyway, to find the key you're looking for.
Just parse it first, then get the key you want:
var mydata = JSON.parse(mydata);
var errorObj = mydata.__ENTITIES[0].__ERROR[0];
If you want, you may create your own function:
function parseAndExtract(json, key) {
var parsed = JSON.parse(json);
return parsed[key];
}

Categories