Question

我正在尝试通过在javascript循环内使用foreach在页面中显示多个类别中的最新帖子，但相反，foreach如下图所示将它们全部显示出来：

我要在每个元素中显示一个，而不是在每个元素中都显示所有。

We also get the same problem on my android app, Here is the solution.
 Follow the steps to overcome this error.

     Step 1:

    Requirements
    node >= 8
    react-native >= 0.51

    Step 2:
    npm install --save react-native-navigation

    Step 3:
    Add the following in android/settings.gradle:

    include ':react-native-navigation'

    project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/lib/android/app/')

    Step 4: 
    Make sure you're using the new gradle plugin, edit android/gradle/wrapper/gradle-wrapper.properties

    distributionBase=GRADLE_USER_HOME
    distributionPath=wrapper/dists
    zipStoreBase=GRADLE_USER_HOME
    zipStorePath=wrapper/dists
    +distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip
    -distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip

    Step 5:
    Update android/build.gradle:

    buildscript {
        repositories {
    +        google()
    +        mavenLocal()
    +        mavenCentral()
    +        jcenter()
    -        maven {
    -            url 'https://maven.google.com/'
    -            name 'Google'
    -        }
        }
        dependencies {
    +        classpath 'com.android.tools.build:gradle:3.0.1'
    -        classpath 'com.android.tools.build:gradle:2.2.3'
        }
    }

    allprojects {
        repositories {
    +        google()
    +        mavenCentral()
            mavenLocal()
            jcenter()
            maven {
                // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
                url "$rootDir/../node_modules/react-native/android"
            }
    -        maven {
    -            url 'https://maven.google.com/'
    -            name 'Google'
    -        }
    +        maven { url 'https://jitpack.io' }
        }
    }

    ext {
    -    buildToolsVersion = "26.0.3"
    +    buildToolsVersion = "27.0.3"
    -    minSdkVersion = 16
    +    minSdkVersion = 19
        compileSdkVersion = 26
        targetSdkVersion = 26
        supportLibVersion = "26.1.0"
    }

    Step 6:
    Update project dependencies in android/app/build.gradle.
    android {
        compileSdkVersion rootProject.ext.compileSdkVersion
        buildToolsVersion rootProject.ext.buildToolsVersion

        defaultConfig {
            applicationId "com.yourproject"
            minSdkVersion rootProject.ext.minSdkVersion
            targetSdkVersion rootProject.ext.targetSdkVersion
            versionCode 1
            versionName "1.0"
            ndk {
                abiFilters "armeabi-v7a", "x86"
            }
        }
    +    compileOptions {
    +        sourceCompatibility JavaVersion.VERSION_1_8
    +        targetCompatibility JavaVersion.VERSION_1_8
    +    }
        ...
    }

    dependencies {
    -    compile fileTree(dir: "libs", include: ["*.jar"])
    -    compile "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    -    compile "com.facebook.react:react-native:+"  // From node_modules
    +    implementation fileTree(dir: "libs", include: ["*.jar"])
    +    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    +    implementation "com.facebook.react:react-native:+"  // From node_modules
    +    implementation project(':react-native-navigation')
    }

    Step 7: 
    Update MainActivity.java
    MainActivity.java should extend com.reactnativenavigation.NavigationActivity instead of ReactActivity.
    This file is located in android/app/src/main/java/com/<yourproject>/MainActivity.java.
    -import com.facebook.react.ReactActivity;
    +import com.reactnativenavigation.NavigationActivity;

    -public class MainActivity extends ReactActivity { 
    +public class MainActivity extends NavigationActivity {
    -    @Override
    -    protected String getMainComponentName() {
    -        return "yourproject";
    -    }
    }

    Step 7:
    Update MainApplication.java
    This file is located in android/app/src/main/java/com/<yourproject>/MainApplication.java.
    ...
    import android.app.Application;

    import com.facebook.react.ReactApplication;
    import com.facebook.react.ReactNativeHost;
    import com.facebook.react.ReactPackage;
    import com.facebook.react.shell.MainReactPackage;
    import com.facebook.soloader.SoLoader;

    +import com.reactnativenavigation.NavigationApplication;
    +import com.reactnativenavigation.react.NavigationReactNativeHost;
    +import com.reactnativenavigation.react.ReactGateway;

    import java.util.Arrays;
    import java.util.List;

    -public class MainApplication extends Application implements ReactApplication {
    +public class MainApplication extends NavigationApplication {
    +    
    +    @Override
    +    protected ReactGateway createReactGateway() {
    +        ReactNativeHost host = new NavigationReactNativeHost(this, isDebug(), createAdditionalReactPackages()) {
    +            @Override
    +            protected String getJSMainModuleName() {
    +                return "index";
    +            }
    +        };
    +        return new ReactGateway(this, isDebug(), host);
    +    }
    +
    +    @Override
    +    public boolean isDebug() {
    +        return BuildConfig.DEBUG;
    +    }
    +
    +    protected List<ReactPackage> getPackages() {
    +        // Add additional packages you require here
    +        // No need to add RnnPackage and MainReactPackage
    +        return Arrays.<ReactPackage>asList(
    +            // eg. new VectorIconsPackage()
    +        );
    +    }
    +  
    +    @Override
    +    public List<ReactPackage> createAdditionalReactPackages() {
    +        return getPackages();
    +    }
    - ...
    +}

    Step 8: 
    RNN and React Native version

    react-native-navigation supports multiple React Native versions. Target the React Native version required by your project by specifying the RNN build flavor in android/app/build.gradle.

    android {
        ...
        defaultConfig {
            applicationId "com.yourproject"
            minSdkVersion rootProject.ext.minSdkVersion
            targetSdkVersion rootProject.ext.targetSdkVersion
    +        missingDimensionStrategy "RNN.reactNativeVersion", "reactNative57" // See note below!
            versionCode 1
            versionName "1.0"
            ...
        }
        ...
    }

对此有什么解决方案吗？ *使用JavaScript的类别顺序相同。

Answer 1

由于PHP是在服务器端呈现的，因此您无法将其与JavaScript结合使用。

但是您可以将JSON传递给JavaScript以解析该结构并将其显示在网站上。

想象一下，您的数据具有以下数组：

$data = array(
    array(
        'category_id' => 39,
        'chapters' => array(
            array(
                'link' => 'http://google.de',
                'chapter_name' => 'First chapter',
            )
        ),
    ),
    array(
        'category_id' => 37,
        'chapters' => array(
            array(
                'link' => 'http://google.de',
                'chapter_name' => 'Second chapter',
            )
        ),
    ),
    array(
        'category_id' => 42,
        'chapters' => array(
            array(
                'link' => 'http://google.de',
                'chapter_name' => 'Third chapter',
            )
        ),
    ),
);

您可以简单地使用json_encode($data)输出此数组的JSON表示形式（确保将其回显到JS变量中）。

然后，您可以使用JavaScript轻松地将其读出。这是一个不错的codepen：https://codepen.io/YannickFricke/pen/Vqzoob

有关forEach函数的简要说明：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

使foreach在javascript循环中一一显示？

1 个答案: