Parse json question

Using JavaScript with Hype
1

As you can see in my example I have a set of data in .json format.
On click on Data 1 or data 2 the text snippets from my array are loaded onto my divs.
So far so good.
Is there a way to get the ID’s from the array (“pidr”: “8549809”) and fill the image path with it.
This way it’s not working…
document.getElementById("pic1").innerHTML='<img src="http://www.dw.com/image/ + obj.protagonist[0].pidr + _401.jpg" height="190px">';
Maybe some string conversion technique before?
Same for the anchor tag.

scratch my head…
parseData.zip (17.2 KB)

2

hi, i'm not at a mac at the moment but the above line is wrong ...

try

"<img src=\"http://www.dw.com/image/" + obj.protagonist[0].pidr + "_401.jpg\""

3

Hi Hans,

my not working example was only to show how I stitch the path together.
Your method is also not working. Something is missing at the end…

Thats my function in Hype

var text = '{"protagonist":[' +
'{"Nr.": 1,"Country": "Cambodia","Land": "Kambodscha  ","Restaurant": "Restaurant Angkor Wat","Adresse": "Paulstraße 22","PLZ": "10557 Berlin","Name": "Dany Hok","Gericht": "Amok Trey","Dish": "Amok Trey","pidr": "8549809","pidp": 22233333,"pidg": 22233333,"Continent": "Asia","Kontinent": "Asien","TeasertextD": "Wenn Sie wissen wollen, wie die Heimat von Dany Hok vom Restaurant Angkor Wat schmeckt, probieren Sie doch das Rezept für Amok Trey aus.","TeasertextE": "Want to taste the cuisine native to Dany Hok of Angkor Wat\'s home? Try this recipe for Amok Trey.","a-d": 37742791,"a-e": 37834756,"Foto-Credits": "Lena Ganssmann"},'+
'{"Nr.": 2,"Country": "Jamaica","Land": "Jamaika ","Restaurant": "Restaurant RosaCaleta","Adresse": "Muskauer Str. 9","PLZ": "10997 Berlin","Name": "Restaurantchef: Kirk Henry, Küchenchef: Troy Lopez","Gericht": "Ackee mit Salzfisch","Dish": "Ackee with saltfish","pidr": 22233333,"pidp": 22233333,"pidg": 22233333,"Continent": "North America","Kontinent": "Nordamerika","TeasertextD": "Wenn Sie wissen wollen, wie die Heimat von Kirk Henry und Troy Lopez vom Restaurant RosaCaleta schmeckt, probieren Sie doch das Rezept für Ackee mit Salzfisch aus.","TeasertextE": "Want to taste the cuisine native to Kirk Henry and Troy Lopez of RosaCaleta\'s home? Try this recipe for Ackee with saltfish.","a-d": 37743413,"a-e": 37834836,"Foto-Credits": "Lena Ganssmann"}]}';

var myJSON = JSON.stringify(text);
var bg = (element.id)
if (bg == "pd-1") {
obj = JSON.parse(text);
document.getElementById("name-1").innerHTML = obj.protagonist[0].Name; 
document.getElementById("name-2").innerHTML = obj.protagonist[0].Restaurant; 
document.getElementById("name-3").innerHTML = obj.protagonist[0].Gericht;
document.getElementById("teaserTxt1").innerHTML = obj.protagonist[0].TeasertextD;
document.getElementById("pic1").innerHTML='<img src="http://www.dw.com/image/ + obj.protagonist[0].pidr +    _401.jpg"
//document.getElementById("teaserTxt1").onclick='location.href="www.pockpock.de.html";'
}
if (bg == "pd-2") {
obj = JSON.parse(text);
document.getElementById("name-1").innerHTML = obj.protagonist[1].Name; 
document.getElementById("name-2").innerHTML = obj.protagonist[1].Restaurant; 
document.getElementById("name-3").innerHTML = obj.protagonist[1].Gericht;
document.getElementById("teaserTxt1").innerHTML = obj.protagonist[1].TeasertextD;
document.getElementById("pic1").innerHTML='<img src="http://www.dw.com/image/38549809_401.jpg" height="190px">';
//document.getElementById("teaserTxt1").onclick=location.href='http://www.dw.com/en/a-38590892.html';
}
4

document.getElementById("pic1").innerHTML='<img src="http://www.dw.com/image/' + obj.protagonist[0].pidr + '_401.jpg" height="190px">';

Should work , ( Note the single quotes which in turn can enclose double quotes. )

But the images are not on the server.

You need to also get the last numbers, this image is not in the batch ‘401.jpg’

5

yes, the expected image is 404.

be careful on how to stitch the tagString as Mark said.

<!DOCTYPE html>
<html>

    <head>
       
    </head>
    <body>
        <div id = 'meinDiv' style="height:500px; width:500px;"></div>
<script>
var text = '{"protagonist":[' +
'{"Nr.": 1,"Country": "Cambodia","Land": "Kambodscha  ","Restaurant": "Restaurant Angkor Wat","Adresse": "Paulstraße 22","PLZ": "10557 Berlin","Name": "Dany Hok","Gericht": "Amok Trey","Dish": "Amok Trey","pidr": "8549809","pidp": 22233333,"pidg": 22233333,"Continent": "Asia","Kontinent": "Asien","TeasertextD": "Wenn Sie wissen wollen, wie die Heimat von Dany Hok vom Restaurant Angkor Wat schmeckt, probieren Sie doch das Rezept für Amok Trey aus.","TeasertextE": "Want to taste the cuisine native to Dany Hok of Angkor Wat\'s home? Try this recipe for Amok Trey.","a-d": 37742791,"a-e": 37834756,"Foto-Credits": "Lena Ganssmann"},'+
'{"Nr.": 2,"Country": "Jamaica","Land": "Jamaika ","Restaurant": "Restaurant RosaCaleta","Adresse": "Muskauer Str. 9","PLZ": "10997 Berlin","Name": "Restaurantchef: Kirk Henry, Küchenchef: Troy Lopez","Gericht": "Ackee mit Salzfisch","Dish": "Ackee with saltfish","pidr": 22233333,"pidp": 22233333,"pidg": 22233333,"Continent": "North America","Kontinent": "Nordamerika","TeasertextD": "Wenn Sie wissen wollen, wie die Heimat von Kirk Henry und Troy Lopez vom Restaurant RosaCaleta schmeckt, probieren Sie doch das Rezept für Ackee mit Salzfisch aus.","TeasertextE": "Want to taste the cuisine native to Kirk Henry and Troy Lopez of RosaCaleta\'s home? Try this recipe for Ackee with saltfish.","a-d": 37743413,"a-e": 37834836,"Foto-Credits": "Lena Ganssmann"}]}';


obj = JSON.parse(text);
imgTag = "<img src=\"http://www.dw.com/image/" + obj.protagonist[0].pidr +   "_401.jpg\">";
document.getElementById("meinDiv").innerHTML= imgTag;
</script>
      

    </body>
</html>
6

Just to add a bit more.

The line taken from your code above is incomplete. You are not closing the "img" tag and I would assume that the "pidr" should be "38549809" instead of "8549809" as "38549809_401.jpg" is a correct path. Also you could use the template literal way to include your variable

`<img src="http://www.dw.com/image/${obj.protagonist[0].pidr}_401.jpg" />`

note the backticks and the ${variable}

2 Likes
7

Thanks Hans and DBear,
I corected my example in the way DBear provided.
And yes, my pic Id was wrong. My fault.
I updated the example.

I would like the id teaserTxt1 a clickable “a hreft”. Is this the same method?
This is the Element with the parsed text
document.getElementById("teaserTxt1").innerHTML = obj.protagonist[0].TeasertextD;
and this is the path:
a href="http://www.dw.com/en/a-' + obj.protagonist[0].a-e + '.html //wrong at the moment

parseData2.zip (17.3 KB)

8

Yep, the same method could be used.

element.innerHTML = `<a href="http://path-to-link/plus-${aVariable}.html" target="_blank">Link</a>`;

in your example (and for ease of use) I’ve used a permalink for an article from dw.com and split it up

var link = "2bvFk";
document.getElementById("teaserTxt1").innerHTML = `<a href="http://p.dw.com/p/${link}">${obj.protagonist[0].TeasertextD}</a>`;

In this example to whole of the Teaser Text would be a link pointing to the URL http://p.dw.com/p/2bvFk

9

Ahh, now i see the magic.
The ` sign used in front and end of the tag does the trick. I thought it was bad formatting of a single quotation mark by the forum. Whats the technical background on this? Never used before… Grave accent = backtick

10

It’s EMCAScript6-7 which can be used hand in hand with Javascript. The " ` sign" is the “backtick” I did make a note of it in the above post :slight_smile: a little small to see though. It’s not a grave accent though btw that’s different (although looks the same)

https://www.google.co.uk/search?q=template+literals

11

Yeah, i saw it but did’t heard the word before :joy:
Now it’s clear. Thank you so much…

wow… template string so useful :wrench:

12

no worries :wink: I’m sure you know but on a mac keyboard backtick is next to shift “grave accent” is ALT-same button :smiley: just in case :smiley:

13

on my german layout it’s shift + “grave accent” on the top right side next to delete :yum:

germanlayout.jpg1985×964 406 KB