Question

我试图通过运行它来提取我的javascript中的json内容但是我没有得到所需的输出

我的JSON格式为

 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
    }

    ];

我尝试从JSON中提取内容的循环是

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

我想要的是

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

我确信我错过了一些逗号，但不确定究竟在哪里

更新1

"{% static 'images/abc.jpg' %}"这是我在输出中想要的精确逗号结构

更新2

这是一个记录我创建的参数的代码段控制台：

＆＃13;

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

＆＃13;

Answer 1

你的循环正在返回

<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

这里你可能有额外的逗号：“images / def.jpg”，索引= 1

Answer 2

您使用引号时遇到问题。修复它为您的内部'字符加前缀斜杠\'（这称为转义）：

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);

＆＃13;

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 + '\' %}">');
};

＆＃13;

Answer 3

如果用console.log替换gridster.add_widget，输出看起来很好：

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

尝试在关闭代码前添加空格：

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

如何创造＆＃39;在一个包裹着的字符串里面，这就是我的字符串＆＃39;

3 个答案: