在 jQuery 中使用数组填充页面答案

【问题标题】：Use array in jQuery to populate page在 jQuery 中使用数组填充页面
【发布时间】：2013-03-12 22:59:35
【问题描述】：

听起来很简单，但不知怎的，它不起作用。

我有一个模板页面，应该使用长轮询来更新。我可以进行长轮询，但处理/插入数据失败。

这是 HTML 部分：

<p><b><div id="weather">weather here</div></b></p>
<p><div id="temperature">temperature here</div></p>
<p><i><div id="color">color here</div></i></p>

这是脚本：

var obj = {
    "color": "#880000",
        "temperature": "hot",
        "weather": "cloudy"
};

$.each(obj function (key,value) {
    ('#key').html('value');
});

另外，我想在我的样式表中使用颜色，但我不知道如何替换非 dived 元素：

#color {
    color: #880000
}

我认为 each 数组迭代来自教科书。我错过了什么？ (jfsiddle example here)

第二次尝试基于建议的内容，现在大图显示类型错误：

php 文件（array_2.php）：

<?php
/*
Values get read from files.
Here, in the example, we simply populate variables.

Original: 
$color = file_get_contents('/path/to/txt/file/with/value');
*/ 
$color = "#880000";
$temperature = "hot";
$weather = "cloudy";
$items = array(array(id => 'weather', text => $weather), array(id => 'color', text => $color), array(id => 'temperature', text => $temperature),);  
echo json_encode($items);
?>

html/javascript:

<html>
<head>
    <title>Satus Poller</title>
<script type="text/javascript" src="/jquery.js"></script>
<meta charset="utf-8">
    <script type="text/javascript" charset="utf-8">
       function addstatus(obj){
        $.each(obj, function (key,value) {
            $('#' + value.id).html(value.text);
        });
    };
    function waitForMsg(){
        $.ajax({
            type: "GET",
            url: "array_2.php",
            async: true,
            cache: false,
            timeout:50000,

            success: function(data){
                var arr = $.parseJSON(data);
                var obj = arr + ""; /* This doesn't help */
                addstatus(obj);
                setTimeout(
                    waitForMsg,
                    1000
                );
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                addmsg("error", textStatus + " (" + errorThrown + ")");
                setTimeout(
                    waitForMsg,
                    15000);
            }
        });
    };

    $(document).ready(function(){
        waitForMsg();
    });
    </script>
</head>
<body>
    <p><div id="color">color</div></p>
    <p><div id="temperature">temperature</div></p>
    <p><div id="weather">weather</div></p>
</body>
</html>

（我什至没有尝试同时替换文本和 CSS 元素。）

【问题讨论】：

标签： jquery arrays each

【解决方案1】：

OP 的方法是正确的，但有几个错别字。

var obj = {
  "color": "#880000",
  "temperature": "hot",
  "weather": "cloudy"
};

// missing $, or jQuery
$.each(obj, function (key,value) {
  // missing comma

  $('#'+key).html(value);
  // variable key and value wrapped inside quote
});

【讨论】：

在我更精细的脚本中使用这种方法时，我似乎遇到了冲突：“TypeError: invalid 'in'operand obj”。我需要让它休息一下，然后四处寻找解决方案。
@PiEnthusiast 如果您不显示完整的代码，我无能为力。
解决了我的最后一个问题。解决方法是将PHP部分提供的数据声明为content-type：*/json:header('Content-type: application/json');
我有一个后续问题here。

【解决方案2】：

http://jsfiddle.net/SKssF/151/

我把它改成了一个数组，这样它就可以遍历了，用方括号[]表示

var obj = [
    {id:"color", text:"#880000"},
    {id:"temperature", text:"hot"},
    {id:"weather", text: "cloudy"}
];

obj, function 旁边缺少逗号，缺少 jquery 选择器 $。 '#key' 只是字符串，javascript 不知道你的意思是变量：

$.each(obj, function (key,value) {
    $('#' + value.id).html(value.text);
});

【讨论】：

我不认为 obj 一定是一个数组...它的内容是用来填充一个我认为（因为使用 css id）在页面中没有重复的模板
它可能实际上使用了页面几个地方的数据，我还不确定。