Question

我有一个JSON对象，在一个长单个对象中有不同的键（＆gt; 10,000行）。如何迭代每个键并使用js在一个div中显示键及其在另一个div中的值？

我有一个变量持有这个对象和控制台记录它们我可以看到它们应该是。但我的问题在于抓住每一个，因为键总是不同的。通常，el.key将获得您所使用的键/值，但由于键始终从一对一更改为对，如何访问所有键并将它们发送到div＃键，然后获取所有值并将它们发送到div＃值？

这里是JSON对象的片段：

示例html：

<div id="keys">keys go here</div>
<div id="values">values go here</div>

谢谢，

塞尔吉奥

Answer 1

您可以通过Object.keys(yourObject)获取所有密钥。您还可以通过Object.entries(yourObject)获取密钥值。一旦你有一个包含所有键和所有值的数组，你只需join数组并将它添加到你的div中：

document.getElementById("keys").innerHTML = keys;

jsbin在这里：https://jsbin.com/vabeboyexo/edit?html,js,output

Answer 2

var test = {10: 1,11: 1,13: 1,15: 1,20: 1,21: 2,22: 2,25: 2,28: 3,32: 
1,33: 3,37: 1,38: 1,39: 2,41: 1,45: 2};

for(var i in test){
    document.getElementById('keys').innerHTML += i + ' ,';
    document.getElementById('values').innerHTML += test[i] + ' ,';
}

Answer 3

我的2美分;

module namespace repoTest = "http://marklogic.com/rest-api/resource/repoTest";
import module namespace search = "http://marklogic.com/appservices/search" at "/MarkLogic/appservices/search/search.xqy";

declare default function namespace  "http://www.w3.org/2005/xpath-functions";
declare option xdmp:mapping "false";

(: Function responding to GET method - must use local name 'get':)
declare function repoTest:get($context as map:map, $params  as map:map) as document-node()*
{

        let $out :=
            try{

            let $options := <options xmlns="http://marklogic.com/appservices/search">
                                <constraint name="gene">
                                    <range type="xs:string" facet="true">
                                        <path-index>//Hit[@type='GENE']/@id</path-index>
                                        <facet-option>frequency-order</facet-option>
                                        <facet-option>descending</facet-option>
                                        <facet-option>limit=10</facet-option>
                                    </range>
                                </constraint>
                    </options>
            let $facetContraint :=  $options//search:constraint[@name='gene']
            let $_ := xdmp:log("facetContraint :" || $facetContraint)
                return $facetContraint
            }catch($ex) {
                let $log := xdmp:log("ERROR !!!!!")
                let $log := xdmp:log($ex)
                return ()
        }

    return document { $out }
};

(: Function responding to PUT method - must use local name 'put'. :)
declare function repoTest:put($context as map:map, $params  as map:map, $input as document-node()*) as document-node()?
{
    repoTest:notSupportedMsg($context)
};

(: Func responding to DELETE method - must use local name 'delete'. :)
declare function repoTest:delete($context as map:map,$params  as map:map) as document-node()?
{
    repoTest:notSupportedMsg($context)
};

(: Function responding to POST method - must use local name 'post'. :)
declare function repoTest:post($context as map:map, $params  as map:map,$input   as document-node()*) as document-node()*
{
    repoTest:notSupportedMsg($context)
};

declare private function repoTest:notSupportedMsg($context as map:map) as document-node()*
{
    let $_ := map:put($context, "output-status", (501, "Not Supported HTTP method"))
    let $output := json:object()
    let $errorResponse := json:object()
    let $_ := (
        map:put($errorResponse, "statusCode", 501),
        map:put($errorResponse, "message", "Not Supported HTTP method")
    )
    let $dummpy := map:put($output, "errorResponse", $errorResponse )
    return document {xdmp:to-json($output)}
};

https://jsfiddle.net/1k6ndwxb/1/

但是，它也可以做得非常不同：D

Answer 4

您可以在没有循环的情况下执行此操作:(仅适用于Chrome和FireFox，因为Object.values(obj)在其他浏览器中尚不支持）

var obj = {
  10: 1,
  11: 4,
  15: 2
};

document.getElementById("keys").innerHTML = Object.keys(obj);
document.getElementById("values").innerHTML = Object.values(obj);

<div id="keys">keys go here</div>
<div id="values">values go here</div>

Answer 5

$(YourJsonVar).each(function(){
$('#keys').append(this.key);
$('#values').append(this.value)

})

每个函数（JQ）用于迭代任何东西......从变量值到dom中的元素，所以你只是在你的json值上运行for循环

JSON显示不同div中的键和值

5 个答案: