Parse json question

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)

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\""

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';
}

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’

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>

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

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)

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

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

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

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:

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:

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