2017-06-27 5 views
0

コードベースの次のスニペットではmapの配列が返され、フィルタリングされた出力のみを得るように、たとえばstatus = 2などのフィルタを渡すことができますか? 。配列filterを使用し、mapを使用するか、マッピングせずにデータをフィルタリングするだけですか?ES6表記でfilter()メソッドを使用して1D配列を解析する

それは純粋なJSまたは私はスニペットで述べたようにreturn文の中、最終的な出力を印刷するために期待していますLodash方法

P.Sのいずれかである可能性があります。あなただけの配列をフィルタリングし、文字通りのテンプレートと、希望の文字列をマップすることができ

const data = { 
 
    "edges": [{ 
 
     "node": { 
 
     "id": 20, 
 
     "status": 1, 
 
     "info": "Order info 20" 
 
     } 
 
    }, 
 
    { 
 
     "node": { 
 
     "id": 19, 
 
     "status": 1, 
 
     "info": "Order info 19" 
 
     } 
 
    }, 
 
    { 
 
     "node": { 
 
     "id": 18, 
 
     "status": 2, 
 
     "info": "Order info 18" 
 
     } 
 
    }, 
 
    { 
 
     "node": { 
 
     "id": 17, 
 
     "status": 3, 
 
     "info": "Order info 17" 
 
     } 
 
    }, 
 
    { 
 
     "node": { 
 
     "id": 16, 
 
     "status": 2, 
 
     "info": "Order info 16" 
 
     } 
 
    }, 
 
    { 
 
     "node": { 
 
     "id": 15, 
 
     "status": 2, 
 
     "info": "Order info 15" 
 
     } 
 
    }, 
 
    { 
 
     "node": { 
 
     "id": 14, 
 
     "status": 1, 
 
     "info": "Order info 14" 
 
     } 
 
    }, 
 
    { 
 
     "node": { 
 
     "id": 13, 
 
     "status": 2, 
 
     "info": "Order info 13" 
 
     } 
 
    }, 
 
    { 
 
     "node": { 
 
     "id": 12, 
 
     "status": 1, 
 
     "info": "Order info 12" 
 
     } 
 
    }, 
 
    { 
 
     "node": { 
 
     "id": 11, 
 
     "status": 1, 
 
     "info": "Order info 11" 
 
     } 
 
    }, 
 
    { 
 
     "node": { 
 
     "id": 10, 
 
     "status": 1, 
 
     "info": "Order info 10" 
 
     } 
 
    }, 
 
    { 
 
     "node": { 
 
     "id": 9, 
 
     "status": 1, 
 
     "info": "Order info 9" 
 
     } 
 
    }, 
 
    { 
 
     "node": { 
 
     "id": 8, 
 
     "status": 1, 
 
     "info": "Order info 4" 
 
     } 
 
    }, 
 
    { 
 
     "node": { 
 
     "id": 7, 
 
     "status": 1, 
 
     "info": "Order info 8" 
 
     } 
 
    }, 
 
    { 
 
     "node": { 
 
     "id": 6, 
 
     "status": 1, 
 
     "info": "Order info 7" 
 
     } 
 
    }, 
 
    { 
 
     "node": { 
 
     "id": 5, 
 
     "status": 1, 
 
     "info": "Order info 6" 
 
     } 
 
    }, 
 
    { 
 
     "node": { 
 
     "id": 4, 
 
     "status": 1, 
 
     "info": "Order info 5" 
 
     } 
 
    }, 
 
    { 
 
     "node": { 
 
     "id": 3, 
 
     "status": 1, 
 
     "info": "Order info 3" 
 
     } 
 
    }, 
 
    { 
 
     "node": { 
 
     "id": 2, 
 
     "status": 1, 
 
     "info": "Order info 2" 
 
     } 
 
    }, 
 
    { 
 
     "node": { 
 
     "id": 1, 
 
     "status": 1, 
 
     "info": "Order info 1" 
 
     } 
 
    } 
 
    ] 
 
}; 
 

 
const myFunction =() => { 
 
    return data.edges.map(({ 
 
    node: { 
 
     id, 
 
     status, 
 
     info 
 
    } 
 
    }) => { 
 
    return(
 
     <span>{id}</span> 
 
     <span>{status}</span> 
 
     <span>{info}</span> 
 
    ); 
 
    }); 
 
};

答えて

1

あなたは(2倍のデータを反復処理することなく、すなわち)と同じ操作でフィルタリングし、マッピングしたい場合は、あなたがreduceを使用する必要があります。

const myFunction =() => { 
    return data.edges.reduce((result, { 
    node: { 
     id, 
     status, 
     info 
    } 
    }) => { 
    if (status === 2) { 
     return result.concat(<div><span>{id}</span><span>{status}</span><span>{info}</span></div>); 
    } 
    return result; 
    }, []); 
}; 

<span>{id}</span><span>{status}</span><span>{info}</span>ことあなたのコメントによると、有効なJSXではありません(何が変わるでしょうか?)。それを有効にするために、上記の<div>にラップしました。また、あなたはconcatに3つの引数を渡すこともできますが、その後は各

result.concat(<span>{id}</span>, <span>{status}</span>, <span>{info}</span>); 

も注意してくださいあなたは、elements in an array usually need a key反応し使用している場合ことを確認する必要があります。

ここでは、スニペットである:私は非構造を維持し、データをプリントアウトしたい場合について

const data = { 
 
    "edges": [ 
 
    { "node": { "id": 20, "status": 1, "info": "Order info 20" } }, 
 
    { "node": { "id": 19, "status": 1, "info": "Order info 19" } }, 
 
    { "node": { "id": 18, "status": 2, "info": "Order info 18" } }, 
 
    { "node": { "id": 17, "status": 3, "info": "Order info 17" } }, 
 
    { "node": { "id": 16, "status": 2, "info": "Order info 16" } }, 
 
    { "node": { "id": 15, "status": 2, "info": "Order info 15" } }, 
 
    { "node": { "id": 14, "status": 1, "info": "Order info 14" } }, 
 
    { "node": { "id": 13, "status": 2, "info": "Order info 13" } }, 
 
    { "node": { "id": 12, "status": 1, "info": "Order info 12" } }, 
 
    { "node": { "id": 11, "status": 1, "info": "Order info 11" } }, 
 
    { "node": { "id": 10, "status": 1, "info": "Order info 10" } }, 
 
    { "node": { "id": 9, "status": 1, "info": "Order info 9" } }, 
 
    { "node": { "id": 8, "status": 1, "info": "Order info 4" } }, 
 
    { "node": { "id": 7, "status": 1, "info": "Order info 8" } }, 
 
    { "node": { "id": 6, "status": 1, "info": "Order info 7" } }, 
 
    { "node": { "id": 5, "status": 1, "info": "Order info 6" } }, 
 
    { "node": { "id": 4, "status": 1, "info": "Order info 5" } }, 
 
    { "node": { "id": 3, "status": 1, "info": "Order info 3" } }, 
 
    { "node": { "id": 2, "status": 1, "info": "Order info 2" } }, 
 
    { "node": { "id": 1, "status": 1, "info": "Order info 1" } } 
 
    ] 
 
} 
 

 
const myFunction =() => data.edges.reduce(
 
    (result, { node: { id, status, info } }) => { 
 
    if (status === 2) { 
 
     return result.concat(<div><span>{id}</span><span>{status}</span><span>{info}</span></div>); 
 
    } 
 
    return result; 
 
    }, [] 
 
); 
 

 
console.log(myFunction());
.as-console-wrapper{min-height:100%}

+0

'' return status === 2 'という行に少し問題がありますか? result.concat(ステータス):結果; 'どのように私はhtmlタグをレンダリングし、印刷することができ、値' {ID} {状態}私は私の答えを編集します@zaq {情報} ' – zaq

+0

がどのように表示しますそれを行いますが、質問を編集して、それがあなたが望む結果であることを示す必要があります。 –

+0

私は明確な情報で質問を更新します。申し訳ありません。 – zaq

0
twoEdges = edges.filter((thingy) => { return (thingy.node.status === 2);}); 

または twoEdges = edges.filter((thingy) => thingy.node.status === 2); ...またはその

2

のようなもの。

var data = { edges: [{ node: { id: 20, status: 1, info: "Order info 20" } }, { node: { id: 19, status: 1, info: "Order info 19" } }, { node: { id: 18, status: 2, info: "Order info 18" } }, { node: { id: 17, status: 3, info: "Order info 17" } }, { node: { id: 16, status: 2, info: "Order info 16" } }, { node: { id: 15, status: 2, info: "Order info 15" } }, { node: { id: 14, status: 1, info: "Order info 14" } }, { node: { id: 13, status: 2, info: "Order info 13" } }, { node: { id: 12, status: 1, info: "Order info 12" } }, { node: { id: 11, status: 1, info: "Order info 11" } }, { node: { id: 10, status: 1, info: "Order info 10" } }, { node: { id: 9, status: 1, info: "Order info 9" } }, { node: { id: 8, status: 1, info: "Order info 4" } }, { node: { id: 7, status: 1, info: "Order info 8" } }, { node: { id: 6, status: 1, info: "Order info 7" } }, { node: { id: 5, status: 1, info: "Order info 6" } }, { node: { id: 4, status: 1, info: "Order info 5" } }, { node: { id: 3, status: 1, info: "Order info 3" } }, { node: { id: 2, status: 1, info: "Order info 2" } }, { node: { id: 1, status: 1, info: "Order info 1" } }] }, 
 
    myFunction = _ => data.edges. 
 
     filter(a => a.node.status === 2). 
 
     map(({ node: { id, status, info } }) => `<div><span>${id}</span> <span>${status}</span> <span>${info}</span></div>`); 
 

 
console.log(myFunction());
.as-console-wrapper { max-height: 100% !important; top: 0; }

+0

方法。何らかの形で 'status === 2'を正確に渡す必要があります。' return data.edges.filter(node:{id、status、info}})=> {return(

{id}{status}{info}
);});おそらく、私の元の質問で説明したのと同じ方法でしょう。 – zaq

+0

の場合、フィルタは項目を変更せず、mapはすべての要素に対して何かを返すので、フィルタリングとマッピングのために2つのパスと1つのパスが必要です。 –

+0

私は私の質問でそれを少し良く説明していたはずだと思います。フィルタリングし、指定された配列を表すようにマップしたい – zaq

関連する問題