Question

我很难让这些Json对象显示出来。

<section class="hero" style="background-image: url(./images/hero.png)">
        <div class="wrapper">
            <div class="row row-big">
                <div class="col-1"></div>
                <div class="col-10">
                    <h1 class="title">
                        Lorem ipsum dolor sit amet, 
                        consectetur adipiscing elit
                    </h1>
                </div>
                <div class="col-1"></div>
            </div>
            <div class="row row-small">
                <div class="col-12">
                    <h1 class="title">
                        Lorem ipsum dolor sit amet, 
                        consectetur adipiscing elit
                    </h1>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <!--Icon missing instead of img--><button type="button" class="btn" style="background-image: url ('./images/button_arrow_white.png')">Sign up now</button>
                </div>
            </div>
        </div>

这是我的杰森

var json = '{"row":{"col":{"title":"Lorem ipsum dolor sit amet,consectetur adipiscing elit"}}}'

$(document).ready(function(){

//Json
var obj = JSON.parse(json);

mainDivData(obj);

function mainDivData(obj){

    /* for (i in obj.popNav.popLinks){

        var j = parseInt(i)+1;
        $('.pop-links:nth-child('+ j +').txt').text(obj.popNav.popLinks[i].txt);
    } */

    /* for (i in obj.row.colTwelve) {
        $('.news-title').text(obj.row.colTwelve[i].title);
    } */

    //THIS ONE 
    for (i in obj.row.col){
        $('.col-10.title').text(obj.row.col[i].title);
    }

}

我用不同的循环尝试了很多次，但是总是一样的。我似乎找不到我的错误。当我从HTML删除文本时，我什么也没得到。有什么建议吗？

Answer 1

将for修改为：

//THIS ONE 
for (title in obj.row.col){
    $('.col-10.title').text(obj.row.col[title]);
}

Answer 2

您可以通过嵌套循环来实现所需的功能。

var json = '{"row":{"col":{"title":"Lorem ipsum dolor sit amet,consectetur adipiscing elit"}}}'

$(document).ready(function() {
	var obj = JSON.parse(json);
	mainDivData(obj);
  
  function mainDivData(obj) {  
  	for (var row in obj){ 
    	for(var col in obj[row]) {
        var title = obj[row][col].title;
        $('.col-10 .title').text(title);
      }
  	}
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="hero" style="background-image: url(./images/hero.png)">
        <div class="wrapper">
            <div class="row row-big">
                <div class="col-1"></div>
                <div class="col-10">
                    <h1 class="title">test
                    </h1>
                </div>
                <div class="col-1"></div>
            </div>
            <div class="row row-small">
                <div class="col-12">
                    <h1 class="title">
                        Lorem ipsum dolor sit amet, 
                        consectetur adipiscing elit
                    </h1>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <!--Icon missing instead of img--><button type="button" class="btn" style="background-image: url ('./images/button_arrow_white.png')">Sign up now</button>
                </div>
            </div>
        </div>

Answer 3

好吧，第一个问题是('.col-10 .title') ...我在两个班级之间没有空格。第二个问题是我将陷入困境。

for (i in obj.row.col){
            $('.col-10 .title').text(obj.row.col[i]);
        }

这解决了问题。

将Json对象放入html

3 个答案: