WordpressでAngularのJSONコンテンツを取得

<li>のJSON配列をWordpress-Template内にディスパッチしたいと思います。

これは、JSON-ファイルです：http://www2.suntrips.de/import/Output-extended.json

私はabsolutlyそれを行う方法を見当もつかない。WordpressでAngularのJSONコンテンツを取得

は、これは私のHTML

<div ng-app="appExtern" ng-controller="externCtrl"> 
    <ul> 
     <li ng-repeat="name in Destinations">{{name}}</li> 
    </ul> 
</div>

であり、これは私のJS

var appExtern = angular.module('appExtern',[]); 
appExtern.controller('externCtrl', function($scope, $http) { 
    $http.get("http://www2.suntrips.de/import/Output-extended.json").then(function(response) { 
     $scope.Destinations = response.data; 
    }); 
});

誰も助けることはできますか？

出典

2017-06-28 Marc Hahn

あなたのJSONには、以下のデータが含まれています

{ 
    "theme" : [ 
     { 
      "id" : 4, 
      "name" : Strand, 
      "imageUrl" : https://travelc.azureedge.net/themes/1869748-9bb43f9e-a7a1-4d74-bc23-7b180829a019.jpg, 
      "ideas" : +[ ... ], 
      "minPrice" : 922, 
      "minPriceDot" : 922 
     }, 
     [ ... ]  
    ] 
}

だから、あなたはngのリピートをしなければならない送信先[「テーマ」]上のデータにアクセスするために。宛先ではありません。コードに続いて、トリックを行う必要があります：あなたのJSONの構造は以下の通りです

<div ng-app="appExtern" ng-controller="externCtrl"> 
    <ul> 
     <li ng-repeat="theme in Destinations.theme">{{ theme.name }}</li> 
    </ul> 
</div>

出典

2017-06-28 14:49:19

ごめんなさい - いいえ： -/ –

：

{ 
    "themes" : [ 
    { "id": ... , "name" : ... , "imageUrl" : ..., ... }, 
    { "id": ... , "name" : ... , "imageUrl" : ..., ... }, 
    { "id": ... , "name" : ... , "imageUrl" : ..., ... } 
    ] 
}

だからここにあなたがいること使用方法は次のとおりです（

<li ng-repeat="theme in Destinations.themes"> 
    <p>{{theme.name}}</p> 
    <img src="{{theme.imageUrl}}"/> 
</li>

を私はさておき、としてAngular 1を学んでいる人々の数に驚くことはありません。Angular 2 - 今度はAngular 4 - が数年間開発されており、RC1は2016年9月に出てきました。）

出典

2017-06-28 14:49:47

TypeScriptに移動したくない人もいれば、AngularJSに慣れていてAngular2-4に移動することは意味がないように思えるかもしれません。あなたの最下位の陳述に答えて： – George

しかし、移動を拒否する人々は最終的にボートに沈む。特にWeb開発で。それは、Flashを愛し、HTML（私が知っている）を学ぶことを拒否した人に起こったことです。 –

ありがとうございます - それは動作しませんでした：/ –

<?php 
/** 
* The header for our theme 
* 
* This is the template that displays all of the <head> section and everything up until <div id="content"> 
* 
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials 
* 
* @package suntrips 
*/ 

?><!DOCTYPE html> 
<html <?php language_attributes(); ?>> 
<head> 
<meta charset="<?php bloginfo('charset'); ?>"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="profile" href="http://gmpg.org/xfn/11"> 
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>"> 
<?php wp_head(); ?> 
</head> 

<body <?php body_class(); ?>> 
<div id="page" class="site"> 
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e('Skip to content', 'suntrips'); ?></a> 
    <?php if(!is_page_template('blank-page.php')): ?> 
    <header id="masthead" class="site-header navbar navbar-static-top" role="banner"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only"><?php echo esc_html__('Toggle navigation', 'suntrips'); ?></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <div class="navbar-brand"> 
        <?php if (get_theme_mod('wp_bootstrap_starter_logo')): ?> 
         <a href="<?php echo esc_url(home_url('/')); ?>"> 
          <img src="<?php echo get_theme_mod('wp_bootstrap_starter_logo'); ?>" alt="<?php echo esc_attr(get_bloginfo('name')); ?>"> 
         </a> 
        <?php else : ?> 
         <a class="site-title" href="<?php echo esc_url(home_url('/')); ?>"><?php esc_url(bloginfo('name')); ?></a> 
        <?php endif; ?> 

       </div> 

      </div> 

      <nav class="collapse navbar-collapse navbar-left" role="navigation"> 

       <?php 
        wp_nav_menu(array(
         'theme_location' => 'primary', 
         'depth'    => 3, 
         'link_before' => '', //Add wrapper in the text inside the anchor tag 
         'link_after' => '', 
         'container'   => '', 
         'container_class' => '', 
         'container_id'  => 'navbar-collapsed', 
         'menu_class'  => 'nav navbar-nav', 
         'fallback_cb'  => 'wp_bootstrap_navwalker::fallback', 
         'walker'   => new wp_bootstrap_navwalker()) 
        ); 
       ?> 

      </nav> 
     </div> 
    </header><!-- #masthead --> 

    <div ng-app="appExtern" ng-controller="externCtrl"> 
     <ul> 
      <li ng-repeat="theme in Destinations.themes"> 
       <p>{{theme.name}}</p> 
       <img src="{{theme.imageUrl}}"/> 
      </li> 
     </ul> 
    </div> 

    <div id="page-sub-header" style="background-image: url('<?php if(has_header_image()) { header_image(); } ?>');"> 
     <div class="container"> 
      <h1><?php esc_url(bloginfo('name')); ?></h1> 
      <p><?php bloginfo('description'); ?></p> 
     </div> 
    </div> 
    <div id="content" class="site-content"> 
     <div class="container"> 
      <div class="row"> 
       <?php endif; ?>

これは私の全体のheader.phpの

ホープ誰もが私のミス見つけることができる。これは、私のfunctions.phpである

function add_this_script_footer(){ 
    wp_enqueue_script('jquery'); 

    // Internet Explorer HTML5 support 
    wp_enqueue_script('html5hiv',get_template_directory_uri().'/js/html5.js', array(), '3.7.0', false); 
    wp_script_add_data('html5hiv', 'conditional', 'lt IE 9'); 

    // load bootstrap js 
    wp_enqueue_script('suntrips-bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js', array()); 
    wp_enqueue_script('suntrips-themejs', get_template_directory_uri() . '/js/theme-script.js', array()); 
    wp_enqueue_script('suntrips-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true); 

    wp_enqueue_script('angularjs', get_template_directory_uri() . '/js/angular.min.js', array()); 
    wp_enqueue_script('suntrips-mainjs', get_template_directory_uri() . '/js/main.js', array()); 
} 

add_action('wp_footer', 'add_this_script_footer');

ある

出典

2017-06-29 06:32:35

ng-repeat = "テーマはDestinations.theme"で始まります（いいえ！）、データ構造を参照してください;） –

ありがとうございますが変更はありません –

WordpressでAngularのJSONコンテンツを取得

答えて

関連する問題