Question

我尝试了几个月从这个JSON中提取一些数据：

    [["wrere","bogdan12",31,21,"profile_pic/poza3.jpg",78,21,31,"profile_pic/download.jpg"]
,
["hey men","bogdan12",31,21,"profile_pic/poza3.jpg",76,21,31,"profile_pic/download.jpg"]
,["rqwerqwer","bogdan12",31,21,"profile_pic/poza3.jpg",75,21,31,"profile_pic/download.jpg"]
,["roughouwehfwe","bogdan12",31,21,"profile_pic/poza3.jpg",74,21,31,"profile_pic/download.jpg"]
,["sadafsdfsadg","werewrwer",23,27,"profile_pic/twitter.png",73,27,23,"profile_pic/2.jpg"]
,
["hey \r\n","bogdan333",21,21,"profile_pic/poza3.jpg",71,21,21,"profile_pic/poza3.jpg"]
,
["hey3","werewrwer",23,27,"profile_pic/twitter.png",67,27,23,"profile_pic/2.jpg"]
]

我尝试使用这样的东西：

var string="<form>"+
    "<div class='panel panel-white post panel-shadow user-post'>"+
    "<div class='post-heading'>"+
    "<div class='pull-left image'>"+
    "<img src='static/"+obj2[i][8]+"' class='img-circle avatar' alt='user profile image'>"+

    "</div>"+
    "<div class='pull-left meta'> "+
    "<div class='title h5'>"+
    "<a href='#'><b>"+obj2[i][1]+"</b></a> made a post."+
    "</div>"+
    "<h6 class='text-muted time'>1 minute ago</h6>"+
    "</div>"+
    "</div> <div class='post-description'> "+
    "<p>"+obj2[i][0]+"</p>"+
    "<div class='stats'>"+
    "<a href='#' class='btn btn-default stat-item'> "+
    "<i class='fa fa-thumbs-up icon'></i>2</a> "+
    "<a href='#' class='btn btn-default stat-item' id='show-comments'>"+
    "<i class='fa fa-share icon'></i>12</a>"+
    "</div>"+
    "</div><div class='post-footer'>"+
    "<div class='input-group'> "+
    "<input class='form-control' placeholder='Add a comment' type='text'>"+
    "</div>     "+      
    "</div>"+
    "</div>"+
    "</form>" 


    //for(i in obj2){
    for(i=1;i<=7;i++){

  $('#load_data').append(string );

 //  }
 }

但我得到的数据只是第一个json数组7次

如果有人可以帮助我，或者可以给我一个教程，我可以寻求更多的帮助？

Answer 1

首先，让我们将问题分开。 HTML属于不在JavaScript中的HTML，因此我们将其移出javascript。这将使您的脚本更清晰。

接下来，我们将遍历您的JSON对象（实际上并不是一个对象），根据模板创建一个新的post元素并填充它。

＆＃13;

var posts = [
  ["wrere", "bogdan12", 31, 21, "profile_pic/poza3.jpg", 78, 21, 31, "profile_pic/download.jpg"],
  ["hey men", "bogdan12", 31, 21, "profile_pic/poza3.jpg", 76, 21, 31, "profile_pic/download.jpg"],
  ["rqwerqwer", "bogdan12", 31, 21, "profile_pic/poza3.jpg", 75, 21, 31, "profile_pic/download.jpg"],
  ["roughouwehfwe", "bogdan12", 31, 21, "profile_pic/poza3.jpg", 74, 21, 31, "profile_pic/download.jpg"],
  ["sadafsdfsadg", "werewrwer", 23, 27, "profile_pic/twitter.png", 73, 27, 23, "profile_pic/2.jpg"],
  ["hey \r\n", "bogdan333", 21, 21, "profile_pic/poza3.jpg", 71, 21, 21, "profile_pic/poza3.jpg"],
  ["hey3", "werewrwer", 23, 27, "profile_pic/twitter.png", 67, 27, 23, "profile_pic/2.jpg"]
];

//Set Up the template
var s = $("#postTemplate")[0].innerHTML.trim();
var holder = document.createElement('div');
holder.innerHTML = s;
var template = holder.childNodes;

//Display out data
for(i = 0; i < posts.length; i++)
{
  var post = posts[i];
  //Clone Template
  var newItem = $(template).clone();

  //Populate it
  $(newItem).find("[data-field='profileImage']").attr("src", $(this).attr("src") + post[8]);
  $(newItem).find("[data-field='userName']").html(post[1]);
  $(newItem).find("[data-field='postDescription']").html(post[0]);
  //Append it
  $("#load_data").append(newItem);
  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="load_data">
</div>
<!-- Template for our posts -->
<script type="text/template" id="postTemplate">
  <form>
    <div class='panel panel-white post panel-shadow user-post'>
      <div class='post-heading'>
        <div class='pull-left image'>
          <img src='static/' class='img-circle avatar' alt='user profile image' data-field="profileImage">
        </div>
        <div class='pull-left meta'>
          <div class='title h5'>
            <a href='#'><b data-field="userName"></b></a> made a post.
          </div>
          <h6 class='text-muted time'>1 minute ago</h6>
        </div>
      </div>
      <div class='post-description'>
        <p data-field="postDescription"></p>
        <div class='stats'>
          <a href='#' class='btn btn-default stat-item'>
            <i class='fa fa-thumbs-up icon'></i>2
          </a>
          <a href='#' class='btn btn-default stat-item' id='show-comments'>
            <i class='fa fa-share icon'></i>12</a>
        </div>
      </div>
      <div class='post-footer'>
        <div class='input-group'>
          <input class='form-control' placeholder='Add a comment' type='text'>
        </div>
      </div>
    </div>
  </form>
</script>

＆＃13;

Answer 2

每次添加字符串时都需要发送新索引，最简单的方法是将字符串放在一个获取索引的函数中，并使用正确的索引运行函数。

function getString(i){
    return "<form>"+
    "<div class='panel panel-white post panel-shadow user-post'>"+
    "<div class='post-heading'>"+
    ... //the rest of your string
}

for(i=1;i<=7;i++){
    $('#load_data').append(getString(i));
}

Answer 3

var obj = [
  ["wrere","bogdan12",31,21,"profile_pic/poza3.jpg",78,21,31,"profile_pic/download.jpg"],
  ["hey men","bogdan12",31,21,"profile_pic/poza3.jpg",76,21,31,"profile_pic/download.jpg"],
  ["rqwerqwer","bogdan12",31,21,"profile_pic/poza3.jpg",75,21,31,"profile_pic/download.jpg"],
  ["roughouwehfwe","bogdan12",31,21,"profile_pic/poza3.jpg",74,21,31,"profile_pic/download.jpg"],
  ["sadafsdfsadg","werewrwer",23,27,"profile_pic/twitter.png",73,27,23,"profile_pic/2.jpg"],
  ["hey \r\n","bogdan333",21,21,"profile_pic/poza3.jpg",71,21,21,"profile_pic/poza3.jpg"],
  ["hey3","werewrwer",23,27,"profile_pic/twitter.png",67,27,23,"profile_pic/2.jpg"]
]

var template="<form>"+
    "<div class='panel panel-white post panel-shadow user-post'>"+
    "<div class='post-heading'>"+
    "<div class='pull-left image'>"+
    "<img src='static/DATA8' class='img-circle avatar' alt='user profile image'>"+
    "</div>"+
    "<div class='pull-left meta'> "+
    "<div class='title h5'>"+
    "<a href='#'><b>DATA1</b></a> made a post."+
    "</div>"+
    "<h6 class='text-muted time'>1 minute ago</h6>"+
    "</div>"+
    "</div> <div class='post-description'> "+
    "<p>DATA0</p>"+
    "<div class='stats'>"+
    "<a href='#' class='btn btn-default stat-item'> "+
    "<i class='fa fa-thumbs-up icon'></i>2</a> "+
    "<a href='#' class='btn btn-default stat-item' id='show-comments'>"+
    "<i class='fa fa-share icon'></i>12</a>"+
    "</div>"+
    "</div><div class='post-footer'>"+
    "<div class='input-group'> "+
    "<input class='form-control' placeholder='Add a comment' type='text'>"+
    "</div>     "+      
    "</div>"+
    "</div>"+
    "</form>"

for(i=0;i<=obj.length;i++){
  var str = template.replace('DATA0', obj[i][0]).replace('DATA1', obj[i][1]).replace('DATA8', obj[i][8])
  $('#load_data').append(str)
}

如何从JSON中提取数据

3 个答案: