How to create ' inside a string wrapped like 'this is my string'

Question

I am trying to extract the json content in my javascript by running it but I am not getting the desired output

My JSON is of the form

 var json = [{
        "html": "abc.jpg", //testing this failed
        "col": 1,
        "row": 1,
        "size_y": 2,
        "size_x": 2
    }, {
        "html": "def.jpg", 
        "col": 4,
        "row": 1,
        "size_y": 2,
        "size_x": 2
    },

    {
        "html": "bac.jpg",
        "col": 6,
        "row": 1,
        "size_y": 2,
        "size_x": 2
    },


    {
        "html": "xyz.jpg",
        "col": 1,
        "row": 3,
        "size_y": 1,
        "size_x": 1
    }, {
        "html": "Brand.jpg",
        "col": 4,
        "row": 3,
        "size_y": 1,
        "size_x": 1
    },

    {
        "html": "Brand.jpg",
        "col": 6,
        "row": 3,
        "size_y": 1,
        "size_x": 1
    }

    ];

The loop which I am trying to extract content from JSON is

for(var index=0;index<json.length;index++) {
    gridster.add_widget('<li class="new" ><button class="delete-widget-button" style="float: right;">-</button><img src="{% static "images/'+json[index].html+'"%}"></li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);
};

What I want is

<img src="{% static "images/abc.jpg"%}"> #for first elemet

I am sure I am missing some comma in it but not sure where exactly

Update 1

The "{% static 'images/abc.jpg' %}" This is exact comma structure I want in my ouput

Update 2

Here's a snippet console logging the arguments I'm creating:

var json = [{
    "html": "abc.jpg", //testing this failed
    "col": 1,
    "row": 1,
    "size_y": 2,
    "size_x": 2
  }, {
    "html": "def.jpg",
    "col": 4,
    "row": 1,
    "size_y": 2,
    "size_x": 2
  }, {
    "html": "bac.jpg",
    "col": 6,
    "row": 1,
    "size_y": 2,
    "size_x": 2
  }, {
    "html": "xyz.jpg",
    "col": 1,
    "row": 3,
    "size_y": 1,
    "size_x": 1
  }, {
    "html": "Brand.jpg",
    "col": 4,
    "row": 3,
    "size_y": 1,
    "size_x": 1
  }, {
    "html": "Brand.jpg",
    "col": 6,
    "row": 3,
    "size_y": 1,
    "size_x": 1
  }
];

for (var index = 0; index < json.length; index++) {
  console.log('<li class="new" ><button class="delete-widget-button" style="float: right;">-</button><img src="{% static "images/' + json[index].html + '"%}"></li>', json[index].size_x, json[index].size_y, json[index].col, json[index].row);
};

what's with `"{% static "images/abc.jpg"%}"` , which framework are you using? — ZombieChowder, Mar 22 '18 at 10:29
Please read [What is the difference between JSON and Object Literal Notation?](https://stackoverflow.com/questions/2904131/what-is-the-difference-between-json-and-object-literal-notation) — str, Mar 22 '18 at 10:30
The django is at backend.This will just send a request to get image from static/images/abc.jpg — Rookie_123, Mar 22 '18 at 10:32
Shouldn't the html be applied at javascript runtime? Like this maybe: `` — Adder, Mar 22 '18 at 10:33
I mean when I do inspect element it does not shows the path of image which should be what I asked in question — Rookie_123, Mar 22 '18 at 10:34
@Rookie_123 That is because Django executes before JavaScript. — str, Mar 22 '18 at 10:35
This isn't going to work in the manner you're attempting. The `{% static "images/abc.jpg"%}` literal is a server side construct which depends on whatever framework you use. It will not be interpreted on the client, which is the case of your problem. To achieve what you need I'd suggest you use an AJAX request to build the HTML you require (based on the server templating you're using) and then return that to your UI. — Rory McCrossan, Mar 22 '18 at 10:36
^ with tha in mind I'd suggest you read [this question](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) which covers the fundamental differences and how it affects the page lifecycle — Rory McCrossan, Mar 22 '18 at 10:42
When I do that for other instances in the page(Not for json) the image is loaded.So I tried to apply same logic here — Rookie_123, Mar 22 '18 at 10:45
May be here the logic could be different.Thanks for giving the link — Rookie_123, Mar 22 '18 at 10:59
`"html": "def.jpg,", ` sure the comma in `def.jpg,` is intentional? — connexo, Mar 22 '18 at 11:14
No that should not be there But still the abc.jpg should work fine.Updated the question by removing , — Rookie_123, Mar 22 '18 at 11:15
@connexo my desired output is of the form "{% static 'images/abc.jpg' %}" Note the comma pattern — Rookie_123, Mar 22 '18 at 11:22
There is no comma in your desired output. This, and only this is referred to as comma in the English language: `,` — connexo, Mar 22 '18 at 11:23

score 1 · Answer 1 · answered Mar 22 '18 at 10:38

Your loop is returning this

<li class="new" ><button class="delete-widget-button" style="float: right;">-</button><img src="{% static "images/abc.jpg"%}"></li> 2 2 1 1
<li class="new" ><button class="delete-widget-button" style="float: right;">-</button><img src="{% static "images/def.jpg,"%}"></li> 2 2 4 1
<li class="new" ><button class="delete-widget-button" style="float: right;">-</button><img src="{% static "images/bac.jpg"%}"></li> 2 2 6 1
<li class="new" ><button class="delete-widget-button" style="float: right;">-</button><img src="{% static "images/xyz.jpg"%}"></li> 1 1 1 3
<li class="new" ><button class="delete-widget-button" style="float: right;">-</button><img src="{% static "images/Brand.jpg"%}"></li> 1 1 4 3
<li class="new" ><button class="delete-widget-button" style="float: right;">-</button><img src="{% static "images/Brand.jpg"%}"></li> 1 1 6 3

You might have extra comma here: "images/def.jpg," at index=1

"{% static 'images/abc.jpg' %}" is what I want.Exactly same comma structure — Rookie_123, Mar 22 '18 at 10:55

score 1 · Accepted Answer · answered Mar 22 '18 at 11:27

You have a problem with the use of quotes. Fix it be prefixing your inner ' characters with a slash \' (this is called escaping):

gridster.add_widget('<li class="new" ><button class="delete-widget-button" style="float: right;">-</button><img src="{% static \'images/'+json[index].html+'\'%}"></li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);

var json = [{
    "html": "abc.jpg", //testing this failed
    "col": 1,
    "row": 1,
    "size_y": 2,
    "size_x": 2
  }, {
    "html": "def.jpg",
    "col": 4,
    "row": 1,
    "size_y": 2,
    "size_x": 2
  }, {
    "html": "bac.jpg",
    "col": 6,
    "row": 1,
    "size_y": 2,
    "size_x": 2
  }, {
    "html": "xyz.jpg",
    "col": 1,
    "row": 3,
    "size_y": 1,
    "size_x": 1
  }, {
    "html": "Brand.jpg",
    "col": 4,
    "row": 3,
    "size_y": 1,
    "size_x": 1
  }, {
    "html": "Brand.jpg",
    "col": 6,
    "row": 3,
    "size_y": 1,
    "size_x": 1
  }
];

for (var index = 0; index < json.length; index++) {
  console.log('<img src="{% static \'images/' + json[index].html + '\' %}">');
};

It says `Could not parse the remainder: '\'images/'+json[index].html+' from '\'images/'+json[index].html+` — Rookie_123, Mar 22 '18 at 11:32
In that case the problem is related to `gridster.add_widget` whatever that is, however this answer gives you the changes necessary to create your desired output. — connexo, Mar 22 '18 at 11:33

score 0 · Answer 3 · answered Mar 22 '18 at 10:39

0

if you replace gridster.add_widget with console.log, the output looks fine:

<img src="{% static "images/abc.jpg"%}">

Try adding space before closing tag:

..json[index].html+'" %}"></li>
                     ^here

answered Mar 22 '18 at 10:39

Eriks Klotins

4,042
1
12
26

How to create ' inside a string wrapped like 'this is my string'

3 Answers3